English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
In questa sezione, esploreremo le parti chiave della struttura di base di Bootstrap, inclusi i migliori pratiche per rendere lo sviluppo web migliore, più veloce e più robusto.
Bootstrap utilizza alcuni elementi HTML5 e attributi CSS. Per farli funzionare correttamente, è necessario utilizzare il tipo di documento HTML5 (Doctype). Pertanto, includi il seguente segmento di codice all'inizio del progetto Bootstrap.
<!DOCTYPE html> <html> .... </html>
Se non si utilizza il tipo di documento HTML5 (Doctype) all'inizio della pagina web creata con Bootstrap, potrebbe sorgere problemi di visualizzazione不一致i da parte dei browser, anche in alcune situazioni specifiche, il che potrebbe rendere il codice non verificabile secondo lo standard W3C.
Il priorità ai dispositivi mobili è la più significativa novità di Bootstrap 3.
Nei precedenti versioni di Bootstrap (fino a 2.x), era necessario citare manualmente un altro CSS per far sì che l'intero progetto supporti i dispositivi mobili in modo amichevole.
Ora è diverso, il CSS predefinito di Bootstrap 3 supporta già i dispositivi mobili in modo amichevole.
L'obiettivo di progettazione di Bootstrap 3 è il dispositivo mobile in primo piano, seguito dai dispositivi desktop. Questo è un cambiamento molto tempestivo, poiché sempre più utenti utilizzano dispositivi mobili.
Per rendere i siti web sviluppati con Bootstrap amichevoli per i dispositivi mobili, assicurare una disegno appropriato e una scalabilità touch screen, è necessario aggiungere qualcosa nel head della pagina web. etichetta viewport etichetta, come indicato di seguito:}}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width Proprietà controlla la larghezza del dispositivo. Supponiamo che il tuo sito venga visualizzato su dispositivi con diverse risoluzioni di schermo, quindi impostalo su device-width può garantire che venga rappresentato correttamente su diversi dispositivi.
initial-scale=1.0 Assicurarsi che il caricamento della pagina sia rappresentato in proporzioni 1:1, senza alcun zoom.
Nel browser dei dispositivi mobili, impostando etichetta viewport Aggiungere user-scalable=no può disabilitare la sua funzione di zoom (zooming).
Di solito,maximum-scale=1.0 Utilizzato insieme a user-scalable=no. Dopo aver disabilitato la funzione di zoom, l'utente può solo scorrere lo schermo, rendendo il tuo sito più simile a un'app nativa.
Attenzione, questo metodo non è raccomandato per tutti i siti web, ma deve essere deciso in base alla tua situazione!
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<img src="..." alt="immagine reattiva">
Aggiungendo img-responsive La classe rende l'immagine di Bootstrap 3 più amichevole per il layout reattivo.
Ora vediamo quali proprietà CSS contiene questa classe.
Nella seguente codice, è possibile vedereimg-responsive La classe assegna agli immagine max-width: 100%; e height: auto; attributi, permettendo all'immagine di ridimensionarsi proporzionalmente senza superare le dimensioni del genitore.
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}Questo indica che l'immagine correlata viene presentata come block。Quando si imposta l'attributo display dell'elemento su block, viene visualizzato come elemento bloccante.
impostare height:auto，l'altezza degli elementi correlati dipende dal browser.
impostare max-width Riscrive il 100% della larghezza specificata tramite l'attributo width. Questo rende l'immagine più amichevole per il layout reattivo.
If you need to horizontally center images that use the .img-responsive class, use the .center-block class instead of .text-center.
Bootstrap 3 uses body {margin: 0;} to remove the margin from body.
See the following settings for body:
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}The first rule sets the default font style of body to "Helvetica Neue", Helvetica, Arial, sans-serif.
The second rule sets the default font size of the text to 14 pixels.
The third rule sets the default line height to 1.428571429.
The fourth rule sets the default text color to #333333.
The last rule sets the default background color to white.
Use the @font-family-base, @font-size-base, and @line-height-base attributes as typography styles.
The global link color is set through the @link-color attribute.
For the default link styles, the following settings are applied:
a:hover,
a:focus {
color: #2a6496;
text-decoration: underline;
}
a:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}Therefore, when the mouse hovers over a link or a clicked link, the color will be set to #2a6496. At the same time, an underline will appear.
In addition, clicked links will display a thin dashed outline with a color code of #333. Another rule is to set the outline to 5 pixels wide and for webkit-based browsers -webkit-focus-ring-color browser extension. The outline offset is set to -2 pixels.
All of these styles can be found in scaffolding.less.
Bootstrap uses Normalize to establish cross-browser consistency.
Normalize.css is a small CSS file that provides better cross-browser consistency in the default styles of HTML elements.
<div> ... </div>
Bootstrap 3's container class is used to wrap the content on the page. Let's take a look at this .container class.
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}Through the above code, the left and right outer margins (margin-right, margin-left) of the container are left to the browser to decide.
Please note that due to the fixed width of the padding (padding), the container is not nestable by default.
.container:before,
.container:after {
display: table;
content: " ";
}This will generate pseudo-elements. Set display for tablewhich will create an anonymous table-cell and a new block formatting context.:before pseudo-element prevents the collapse of the top margin,:after pseudo-element to clear the float.
If conteneditable The attribute appears in HTML, due to some Opera bugs, a space is created around the above elements. This can be done by using content: " " to fix.
.container:after {
clear: both;
}It creates a pseudo-element and ensures that all containers contain all floating elements.
Bootstrap 3 CSS has a responsive media query that sets a max-width for the container within different media query thresholds to match the grid system.
@media (min-width: 768px) {
.container {
width: 750px;
}Bootstrap works well in the latest desktop and mobile browser systems.
Old browsers may not support it well.
下表为 Bootstrap 支持最新版本的浏览器和平台：
| Chrome | Firefox | IE | Opera | Safari | |
|---|---|---|---|---|---|
| Android | YES | YES | 不适用 | 不适用 | 不适用 |
| iOS | YES | 不适用 | 不适用 | 不适用 | YES |
| Mac OS X | YES | YES | 不适用 | YES | YES |
| Windows | YES | YES | YES* | YES | 不适用 |
* Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 浏览器。