Felhasználói eszközök

Eszközök a webhelyen


oktatas:web:front-end_framework:bootstrap_4:kepek

< Bootsrap 4

Képek

Úsztatás

  • .float-left
  • .float-right
<img src="kep.png" class="float-left" alt="kép középen">

Lekerekített sarok

  • .rounded
<img class="rounded w-50 float-left m-2" src="oroszlan.jpg" alt="Oroszlán">

Középreigazítás

<img src="kep.png" class="rounded mx-auto d-block" alt="kép középen">

Másként:

<div class="text-center">
  <img src="kep.png" class="rounded" alt="kép középen">
</div>

Indexkép

  • .img-thumbnail

Nyújtás

  • .img-fluid
<img src="kep.png" class="img-fluid" alt="nyújtható kép">
<img class="img-fluid w-50 float-left" src="kep.png" alt="nyújtható kép">

Ovális

  • .rounded-circle

Forrás

Függelék

Nyújtás forrása

index.html
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BS</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
 
 
</head>
<body>
 
<div class="container-fluid">
 
    <h1>Almafa</h1>    
 
    <img class="img-fluid w-50 float-left mr-2" src="oroszlan.jpg" alt="Oroszlán">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ull                        
    </p>
 
    </div>
</div>
 
</body>
</html>
oktatas/web/front-end_framework/bootstrap_4/kepek.txt · Utolsó módosítás: 2024/09/06 22:10 szerkesztette: admin