Negli esempi che abbiamo proposto fin qui, abbiamo sempre utilizzato delle pagine responsive (o, in italiano, adattive) cioè pagine i cui elementi si ridimensionano e ridispongono a seconda delle dimensioni del display del dispositivo su cui sono visualizzati. Molto spesso il layout responsive è proprio quello che occorre, ma ci possono essere situazioni in cui, per una qualche ragione, lo si vuole disabilitare. In questa lezione vedremo come fare.
Per fare ciò, innanzi tutto, dovete eliminare dalla pagina il meta tag viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Fatto questo bisogna ridefinire lo stile per la classe .container che ospita il contenuto della pagina. Ovviamente, non conviene modificare il foglio di stile Bootstrap, piuttosto è meglio crearne uno personale e caricarlo dopo quello di Bootstrap in modo che le sue regole di stile prevalgano in base alla regola che lo stile successivo prevale sul precedente.
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/nonResponsivo.css" rel="stylesheet" media="screen">Le regole di stile da inserire in questo file vanno in due direzioni:
- evitare il ridimensionamento della griglia e di conseguenza il riposizionamento in pila del contenuto delle colonne;
- evitare che la barra di navigazione sia sostituita da un pulsante che attiva gli elementi di navigazione a discesa (toggle della barra di navigazione).
La prima operazione è molto semplice, basta infatti eliminare la proprietà max-width dalla regola per la classe .container e assegnarle invece una larghezza fissa
.container {
max-width: none !important;
width: 970px;
}Ma questo ancora non basta. La definizione delle colonne va cambiata ed è necessario usare le classi "xs" (col-xs-1, col-xs-2, col-xs-3…). Le colonne saranno comunque visualizzate in modo corretto sia sui display di piccole che di grandi dimensioni.
La seconda operazione (evitare che la navbar collassi) è decisamente più complessa. Per farlo dobbiamo aggiungere al nostro foglio di stile una serie di regole finalizzate, di fatto, a bloccare le attività che Bootstrap compie di default quando si trova in presenza di viewport di dimensioni ridotte:
.container .navbar-header,
.container .navbar-collapse {
margin-right: 0;
margin-left: 0;
}
/* Always float the navbar header */
.navbar-header {
float: left;
}
/* Undo the collapsing navbar */
.navbar-collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
.navbar-toggle {
display: none;
}
.navbar-brand {
margin-left: -15px;
}
/* Always apply the floated nav */
.navbar-nav {
float: left;
margin: 0;
}
.navbar-nav > li {
float: left;
}
.navbar-nav > li > a {
padding: 15px;
}
/* Redeclare since we override the float above */
.navbar-nav.navbar-right {
float: right;
}
/* Undo custom dropdowns */
.navbar .open .dropdown-menu {
position: absolute;
float: left;
background-color: #fff;
border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-width: 0 1px 1px;
border-radius: 0 0 4px 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.navbar .open .dropdown-menu > li > a {
color: #333;
}
.navbar .open .dropdown-menu > li > a:hover,
.navbar .open .dropdown-menu > li > a:focus,
.navbar .open .dropdown-menu > .active > a,
.navbar .open .dropdown-menu > .active > a:hover,
.navbar .open .dropdown-menu > .active > a:focus {
color: #fff !important;
background-color: #428bca !important;
}
.navbar .open .dropdown-menu > .disabled > a,
.navbar .open .dropdown-menu > .disabled > a:hover,
.navbar .open .dropdown-menu > .disabled > a:focus {
color: #999 !important;
background-color: transparent !important;
}Una raccomandazione finale: si faccia attenzione a disabilitare il responsive design in quanto, così facendo, si blocca la caratteristica principale del framework ed, in un certo senso, ne viene meno la prinicipale ragione di utilizzo. Se si desidera un sito non responsivo, quindi, l’utilizzo di Bootstrap potrebbe non essere la soluzione che fa al caso nostro.
