Bootstrap

Question 1

Szöveg keretbe helyezése, responsive fix szélességgel

Answer 1

<div>
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>

Question 2

szöveg teljes szélességű keretbe helyezése responsive fix szélességgel

Answer 2

<div>
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container-fluid class.</p>
<p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>
</div>

Question 3

bootsrap 4 Grid típusa

Answer 3

.col- (extra small devices - screen width less than 576px)
.col-sm- (small devices - screen width equal to or greater than 576px)
.col-md- (medium devices - screen width equal to or greater than 768px)
.col-lg- (large devices - screen width equal to or greater than 992px)
.col-xl- (xlarge devices - screen width equal to or greater than 1200px)

Question 4

felsorolás bootsrappel

Answer 4

<div class="container">
  <h1>Description Lists</h1>    
  <p>The dl element indicates a description list:</p>
  <dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
  </dl>     
</div>

Question 5

félkövér szöveg:

Answer 5

.font-weight-bold

Question 6

félkövérebb szöveg

Answer 6

.font-weight-bolder

Question 7

dőlt-betűs szöveg

Answer 7

.font-italic

Question 8

light weight text

Answer 8

.font-weight-light

Question 9

Lighter weight text

Answer 9

.font-weight-lighter

Question 10

grid automatikus layout kezeléssel

Answer 10

<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Question 11

grid hosszának megadására, 4 egyenlő részre osztására példa

Answer 11

<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
</div>

Question 12

táblázat megadása

Answer 12

Firstname
Lastname
Email

    John
    Doe
    john@example.com

    Mary
    Moe
    mary@example.com

    July
    Dooley
    july@example.com

Question 13

Képnek kerek sarok

Answer 13

<div class="container">
  <h2>Rounded Corners</h2>
  <p>The .rounded class adds rounded corners to an image:</p>            
  <img class="rounded"> 
</div>

Question 14

kerek kép

Answer 14

<div class="container">
  <h2>Circle</h2>
  <p>The .rounded-circle class shapes the image to a circle:</p>            
  <img class="rounded-circle"> 
</div>

Question 15

Keretes kép:

Answer 15

<div class="container">
  <h2>Thumbnail</h2>
  <p>The .img-thumbnail class creates a thumbnail of the image:</p>            
  <img class="img-thumbnail"> 
</div>

Question 16

Képek jobbra és balra igazítása:

Answer 16

<div class="container">
  <h2>Thumbnail</h2>
  <p>The .img-thumbnail class creates a thumbnail of the image:</p>            
  <img class="img-thumbnail"> 
</div>