szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:web:front-end_framework:bootstrap 4|< Bootsrap 4]]

====== Képek ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2020
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Úsztatás =====
  * .float-left
  * .float-right

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


<html>
<iframe src="m/bootstrap/images/index_images_float_left.html" sandbox
style="resize:both;">
</iframe>
</html>

===== Lekerekített sarok =====
  * .rounded

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


<html>
<iframe src="m/bootstrap/images/index_images_rounded.html" sandbox
style="resize:both;">
</iframe>
</html>




===== Középreigazítás =====

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

Másként:
<code html5>
<div class="text-center">
  <img src="kep.png" class="rounded" alt="kép középen">
</div>
</code>



===== Indexkép =====

  * .img-thumbnail

<html>
<iframe src="m/bootstrap/images/index_images_thumbnail.html" sandbox
style="resize:both;">
</iframe>
</html>

===== Nyújtás =====
  * .img-fluid

<code html5>
<img src="kep.png" class="img-fluid" alt="nyújtható kép">
</code>

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


<html>
<iframe src="m/bootstrap/images/index_images_fluid.html" sandbox
style="resize:both;">
</iframe>
</html>


===== Ovális =====

  * .rounded-circle

<html>
<iframe src="m/bootstrap/images/index_images_circle.html" sandbox
style="resize:both;">
</iframe>
</html>

===== Forrás =====

  * A kép forrása: https://hu.wikipedia.org/wiki/Oroszl%C3%A1n 
===== Függelék =====

==== Nyújtás forrása ====

<code html 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>
</code>