Per imparare a programmare per il web, è sì necessario conoscere i linguaggi di programmazioni utili a quest’ambito, ma anche guardare alle tecnologie e alle risorse di supporto agli sviluppatori web.
Il framework Bootstrap fa parte di queste risorse.
Cos’è Bootstrap?
Bootstrap è una libreria di componenti front-end e un toolkit open source. Viene usato per creare pagine web reattive e mobile-first con HTML, CSS e JavaScript. Dal suo rilascio nel 2011, Bootstrap si è evoluto attraverso numerose versioni. È una tecnologia chiave per la carriera da sviluppatore web, lato front-end.
Bootstrap offre molte soluzioni allo sviluppatore, è definito “framework CSS”, proprio perché presenta un alto tasso di personalizzazione grazia alla grande quantità di classi dedicate e sistemi ad alta responsività per la gestione dei layout e dei media su tutti i display.
Facciamo un passo indietro, CSS cos è?
Il linguaggio CSS (Cascading Style Sheets) è un linguaggio di markup. Serve per compilare i “fogli stile” che caratterizzano l’estetica della nostra pagina web. Usato da sempre per la resa grafica dei documenti, in “collaborazione” con HTML.
Avere confidenza con queste tecnologie apre le porte a tante posizioni lavorative come sviluppatore front-end. Ma per aver dimestichezza è fondamentale esercitarsi. Vedremo in questo articolo una serie di esercizi per capire e interagire con il framework Bootstrap e il linguaggio CSS. Dove serve, verrà fornito il codice HTML.
- Secondo gli standard di coding di Bootstrap, scrivi in CSS tutti gli statement raggruppati che riguardano lo stile di un elemento
- Scrivi la proprietà CSS di Bootstrap per permettere alle immagini di supportare un layout responsivo.
- Scrivi una tabella con i bordi evidenziati sfruttando Bootstrap e CSS.
HTML code:
<html>
<head>
<title>Esempio griglia “bordered” in Bootstrap</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<table class="table table-bordered">
<thead>
<tr>
<th>Sr. No.</th>
<th>Roll No</th>
<th>Maths</th>
<th>Comp. Sc.</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1234</td>
<td>87</td>
<td>87</td>
</tr>
<tr>
<td>2</td>
<td>5678</td>
<td>67</td>
<td>98</td>
</tr>
<tr>
<td>3</td>
<td>6986</td>
<td>88</td>
<td>59</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
- Scrivi uno script CSS Bootstrap per creare lo stile di una Breadcrumb navigation (menù a briciole).
HTML code:
<div class=" container d-flex justify-content-center">
<ul class="pagination shadow-lg">
<li class="page-item "><a class="page-link" href="#"><i class="fa fa-home "></i> <small>Home</small> </a></li>
<li class="page-item "><a class="page-link " href="#"><i class="fa fa-file mr-1 ml-0"></i><small>Files </small></a></li>
<li class="page-item "><a class="page-link" href="#"><i class="fa fa-image mr-1"></i><small>Image</small></a></li>
<li class="page-item "><a class="page-link" href="#"><i class="fa fa-video-camera mr-1"></i><small>Videos</small></a></li>
<li class="page-item active "><a class="page-link " href="#"><i class="fa fa-music mr-1 "></i><small>Music</small></a></li>
</ul>
</div>
- Scrivi le proprietà CSS in Bootstrap per creare righe e colonne una fixed grid. (griglia fissa)
Gli esercizi sono tutto sommato semplici, lasciano spazio alla creatività e ci permettono di familiarizzare con Bootstrap e CSS. Vediamo insieme le soluzioni di questi esercizi.
- In Bootstrap è fondamentale seguire questo ordine di scrittura in CSS delle proprietà: posizionamento, stile della casella, caratteristiche del font, visualizzazione e poi il resto.
.declaration-order {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* Box-model */
display: block;
float: right;
width: 100px;
height: 100px;
/* Typography */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;
/* Visual */
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;
/* Misc */
opacity: 1;
}
- In HTML la classe Bootstrap è chiamata img-responsive, questo viene riportato in CSS e possiamo gestire a nostro piacimento le caratteristiche di layout e non, grazie alla classe definita in HTML. Forte, vero?
.img-responsive {
display: inline-block;
height: auto;
max-width: 100%;
}
table {
color:#1054f0
}
.table-bordered {
border: 1px solid #5ac4ed;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
border: 1px solid #5ac4ed;
}
- In questo esercizio puoi dare libero sfogo, ma ti lascio qui la mia personale interpretazione dell’esercizio.
.container {
margin-top: 250px;
}
body{
background-color: #eee;
}
.demo {
background-color: rgb(168, 200, 245);
}
.pagination-outer {
text-align: center;
}
.pagination {
background-color: #fff;
border-radius: 25px !important;
overflow: hidden;
border: none !important;
}
a:focus,
a:active {
outline: none !important;
box-shadow: none !important;
}
.fa {
font-size: 11px ;
vertical-align: middle !important;
color: black;
}
.pagination li.active .fa {
color: #fff !important;
}
.pagination li a.page-link {
color: #505050;
background-color: transparent;
font-size: 17px;
font-weight: 600;
padding: 17px 25px;
border: none;
transition: all 0.3s ease 0s;
}
.fa-home {
transform: scale(1.4, 1.4) ;
}
.pagination li:last-child a.page-link {
border: none;
}
.pagination li.active a.page-link,
.pagination li a.page-link:hover,
.pagination li.active a.page-link:hover {
background-color: transparent;
}
.pagination li a.page-link:after {
content: '';
background-color: #42A5F5 !important;
height: 100%;
width: 100%;
transform: scaleY(0);
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
transition: all 0.3s;
}
.pagination li.active a.page-link:after,
.pagination li a.page-link:hover:after,
.pagination li.active a.page-link:hover:after {
transform: scaleY(1);
border-radius: 25px !important;
}
@media (max-width: 767px) {
.pagination li a.page-link {
padding: 11px 8px !important;
}
.fa{
font-size: 9px !important;
}
li a {
font-size: 12px !important;
}
.page-item+.page-item {
padding-left: 0 !important;
}
}
- Bootstrap utilizza le proprietà CSS “:before” e “:after”. Questi sono pseudo-elementi. “:before” viene utilizzato per inserire del contenuto prima dell’elemento target e “:after” viene utilizzato per inserire lo stesso contenuto dopo l’elemento target. ‘[class*=”span”]’ seleziona qualsiasi elemento con un attributo di classe il cui valore inizia con ‘span’. Ora per posizionare le colonne l’una accanto all’altra, usa “float: left;”.
.row:before,
.row:after {
display: table;
line-height: 0;
content: "";
}
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}
Imparare a utilizzare Bootstrap e conoscere a fondo il linguaggio CSS può dare grandi soddisfazioni a livello lavorativo. Se vuoi imparare o approfondire bootstrap leggi la nosta guida bootstrap in italiano online.
