Tutorial lingkungan instalasi Bootstrap Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari Ambil Bootstrap,Struktur File,Template HTML,contoh,contoh,Bootstrap CDN Direkomendasikan,
Bootstrap sangat mudah untuk menginstal. Bab ini menjelaskan cara men-download dan menginstal Bootstrap, bootstrap membahas struktur file, dan melalui contoh untuk menunjukkan penggunaannya.
Anda dapat memilih dari http://getbootstrap.com/ men-download versi terbaru dari Bootstrap pada. Ketika Anda mengklik link, Anda akan melihat halaman yang ditunjukkan di bawah:
Anda akan melihat dua tombol:
Jika Anda menggunakan kode sumber non-dikompilasi, Anda perlu untuk mengkompilasi file KURANG untuk menghasilkan file CSS dapat digunakan kembali. Untuk mengkompilasi file KURANG, Bootstrap resmi hanya mendukung Recess , yang didasarkan pada Twitter less.js tips CSS.
Dalam rangka untuk lebih memahami dan lebih nyaman untuk digunakan, kita akan menggunakan versi pre-compiled dari Bootstrap di tutorial ini.
Karena file dikompilasi dan dikompresi, dalam fungsi perkembangan terpisah, Anda tidak selalu menyertakan file-file yang terpisah.
Saat penulisan ini, menggunakan versi terbaru (Bootstrap 3).
Ketika Anda men-download versi terkompilasi dari Bootstrap, unzip file ZIP, Anda akan melihat struktur file / direktori berikut:
Seperti ditunjukkan di atas, Anda dapat melihat CSS disusun dan JS (bootstrap. *), Dan disusun CSS dikompresi dan JS (bootstrap.min. *). Juga mengandung Glyphicons font, yang merupakan opsional Bootstrap tema.
Bootstrap jika Anda men-download kode sumber, struktur file adalah sebagai berikut:
Menggunakan template HTML dasar Bootstrap adalah sebagai berikut:
<!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>
Di sini Anda dapat melihat mengandungjquery.js, bootstrap.min.jsdan file yangbootstrap.min.css,digunakan untuk memungkinkan dokumen HTML biasa menjadi menggunakan Bootstrap Template.
Untuk rincian tentang potongan di atas dari setiap elemen akan CSS Bootstrap gambaran bab menjelaskan secara rinci.
Sekarang mari kita coba untuk menggunakan output Bootstrap "Hello, world!":
Contoh situs ini sumber Bootstrap Baidu sumber daya perpustakaan statis digunakan.
Baidu repositori statis layanan CDN, akses ke lebih cepat, akselerasi lebih efektif, kecepatan, dan tidak ada keterbatasan bandwidth, secara permanen gratis, dalam kode sebagai berikut:
<!-- 新 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>