Il miglior tutorial ambiente di installazione Bootstrap Nel 2024, in questo tutorial puoi imparare Scarica Bootstrap,Struttura del file,Modelli HTML,Esempi,Esempi,Bootstrap CDN consigliato,
Bootstrap è molto facile da installare. Questo capitolo spiega come scaricare e installare Bootstrap, Bootstrap discutere struttura dei file, e un esempio per dimostrare il suo utilizzo.
È possibile scegliere tra http://getbootstrap.com/ scaricare l'ultima versione di Bootstrap su. Quando si fa clic sul collegamento, si vedrà la pagina mostrata di seguito:
Vedrete due pulsanti:
Se si utilizza un codice sorgente non compilato, è necessario compilare i file MENO per generare file CSS riutilizzabile. Per compilare i file MENO, Bootstrap supporta ufficialmente solo Recess , che si basa su Twitter less.js di consigli CSS.
Al fine di comprendere meglio e più comodo da usare, useremo la versione pre-compilata di Bootstrap in questo tutorial.
Dal momento che il file viene compilato e compresso, in una funzione sviluppo separato, non sempre includere questi file separati.
Momento in cui scriviamo, utilizzando la versione più recente (Bootstrap 3).
Quando si scarica una versione compilata di Bootstrap, decomprimere il file ZIP, si vedrà la seguente struttura di file / directory:
Come indicato in precedenza, è possibile vedere il CSS e JS compilato (bootstrap. *), E CSS compressa compilato e JS (bootstrap.min. *). Contiene anche carattere Glyphicons, che è un tema Bootstrap opzionale.
Bootstrap se si scarica il codice sorgente, la struttura del file è il seguente:
Utilizzo di un modello HTML di base Bootstrap è il seguente:
<!DOCTYPE html> <html> <head> <title>Bootstrap 模板</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 引入 Bootstrap --> <link href="http://cdn.static.w3write.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 --> <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) --> <script src="https://code.jquery.com/jquery.js"></script> <!-- 包括所有已编译的插件 --> <script src="js/bootstrap.min.js"></script> </body> </html>
Qui potete vedere contienejquery.js, bootstrap.min.jse file dibootstrap.min.css,utilizzati per consentire a un documento HTML regolare in utilizzando il modello Bootstrap.
Per i dettagli sul frammento di sopra di ogni elemento sarà Bootstrap CSS panoramica capitoli spiegano nel dettaglio.
Ora cerchiamo di utilizzare l'uscita Bootstrap "Ciao, mondo!":
Esempi di questo sito è utilizzato risorse Bootstrap Baidu libreria di risorse statica.
Baidu repository statica di servizi CDN, l'accesso a più veloce, accelerazione più efficace, velocità, e senza limitazioni di banda, permanentemente libera, in codice come segue:
<!-- 新 Bootstrap 核心 CSS 文件 --> <link href="http://cdn.static.w3write.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- 可选的Bootstrap主题文件(一般不使用) --> <script src="http://cdn.static.w3write.com/libs/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="http://cdn.static.w3write.com/libs/jquery/2.1.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="http://cdn.static.w3write.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>