6.1 KiB
id | title | challengeType | forumTopicId | dashedName |
---|---|---|---|---|
bad88fee1348ce8acef08815 | Usare la griglia di Bootstrap per affiancare gli elementi | 0 | 18371 | use-the-bootstrap-grid-to-put-elements-side-by-side |
--description--
Bootstrap utilizza una griglia responsiva a 12 colonne, che rende facile mettere gli elementi dentro a delle righe specificando la larghezza relativa di ognuno. La maggior parte delle classi di Bootstrap può essere applicata a un elemento div
.
Bootstrap ha diversi attributi di larghezza della colonna che usa a seconda dell'ampiezza dello schermo dell'utente. Ad esempio, i telefoni hanno schermi stretti, e i computer portatili hanno schermi più ampi.
Prendiamo ad esempio la classe col-md-*
di Bootstrap. Qui, md
significa medio, e *
è un numero che specifica su quante colonne dovrebbe estendersi l'elemento. In questo caso, viene specificata la larghezza della colonna di un elemento su uno schermo di medie dimensioni, come un computer portatile.
Nella Cat Photo App che stiamo costruendo, useremo col-xs-*
, dove xs
significa extra piccolo (come uno schermo del telefono cellulare extra-piccolo), e *
è il numero di colonne che specifica su quante colonne dovrebbe estendersi l'elemento.
Affianca i bottoni Like
, Info
e Delete
annidandoli tutti e tre in un elemento <div class="row">
, poi ognuno di essi all'interno di un elemento <div class="col-xs-4">
.
La classe row
viene applicata a un div
, e i bottoni stessi possono essere annidati al suo interno.
--hints--
I tuoi bottoni dovrebbero essere tutti annidati all'interno dello stesso elemento div
di classe row
.
assert($('div.row:has(button)').length > 0);
Ognuno dei tuoi bottoni Bootstrap dovrebbe essere annidato all'interno del suo elemento div
di classe col-xs-4
.
assert($('div.col-xs-4:has(button)').length > 2);
Ognuno dei tuoi elementi button
dovrebbe avere un tag di chiusura.
assert(
code.match(/<\/button>/g) &&
code.match(/<button/g) &&
code.match(/<\/button>/g).length === code.match(/<button/g).length
);
Ognuno dei tuoi elementi div
dovrebbe avere un tag di chiusura.
assert(
code.match(/<\/div>/g) &&
code.match(/<div/g) &&
code.match(/<\/div>/g).length === code.match(/<div/g).length
);
--seed--
--seed-contents--
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
<div class="container-fluid">
<h2 class="red-text text-center">CatPhotoApp</h2>
<p>Click here for <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
<button class="btn btn-block btn-primary">Like</button>
<button class="btn btn-block btn-info">Info</button>
<button class="btn btn-block btn-danger">Delete</button>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="https://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
--solutions--
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
<div class="container-fluid">
<h2 class="red-text text-center">CatPhotoApp</h2>
<p>Click here for <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary">Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info">Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger">Delete</button>
</div>
</div>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="https://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>