Bootstrap, daripada Twitter, pada masa ini merupakan rangka kerja bahagian hadapan yang paling popular. Bootstrap adalah berdasarkan HTML, CSS dan JAVASCRIPT Ia mudah dan fleksibel, menjadikan pembangunan web lebih pantas. Izinkan saya terlebih dahulu memberitahu anda perkara utama pembelajaran.
Mata pembelajaran:
1. Komponen skrin gergasi
2. Komponen pengepala
3. Komponen lakaran kecil
4. Komponen kotak amaran
Dalam pelajaran ini kita akan mengkaji terutamanya empat fungsi komponen Bootstrap: komponen skrin gergasi, komponen pengepala halaman, komponen lakaran kecil dan komponen kotak amaran.
1. Komponen skrin gergasi
Komponen skrin gergasi digunakan terutamanya untuk memaparkan kawasan utama tapak web.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <div class = "container" >
<div class = "jumbotron" >
<h2>网站标题</h2>
<p>
这是一个学习性的网站!
</p>
<p>
<a href= "#" class = "btn btn-default" >更多内容</a>
</p>
</div>
</div>
<div class = "jumbotron" >
<div class = "container" >
<h2>网站标题</h2>
<p>
这是一个学习性的网站!
</p>
<p>
<a href= "#" class = "btn btn-default" >更多内容</a>
</p>
</div>
</div>
|
Salin selepas log masuk
2. Komponen pengepala
1 2 3 4 | <div class = "page-header" >
<h1>大标题 <small>小标题</small></h1>
</div>
|
Salin selepas log masuk
3. Komponen lakaran kecil
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | <div class = "container" >
<div class = "row" >
<div class = "col-xs-6 col-md-3 col-sm-4" >
<div class = "thumbnail" >
<img src= "img/pic.png" alt= "" >
</div>
</div>
<div class = "col-xs-6 col-md-3 col-sm-4" >
<div class = "thumbnail" >
<img src= "img/pic.png" alt= "" >
</div>
</div>
<div class = "col-xs-6 col-md-3 col-sm-4" >
<div class = "thumbnail" >
<img src= "img/pic.png" alt= "" >
</div>
</div>
<div class = "col-xs-6 col-md-3 col-sm-4" >
<div class = "thumbnail" >
<img src= "img/pic.png" alt= "" >
</div>
</div>
</div>
</div>
<div class = "container" >
<div class = "row" >
<div class = "col-xs-6 col-md-3 col-sm-4" >
<div class = "thumbnail" >
<img src= "img/pic.png" alt= "" >
<div class = "caption" >
<h3>图文并茂</h3>
<p>
这是一个图片结合文字的缩略图
</p>
<p>
<a href= "#" class = "btn btn-default" >进入</a>
</p>
</div>
</div>
</div>
<div class = "col-xs-6 col-md-3 col-sm-4" >
<div class = "thumbnail" >
<img src= "img/pic.png" alt= "" >
<div class = "caption" >
<h3>图文并茂</h3>
<p>
这是一个图片结合文字的缩略图
</p>
<p>
<a href= "#" class = "btn btn-default" >进入</a>
</p>
</div>
</div>
</div>
<div class = "col-xs-6 col-md-3 col-sm-4" >
<div class = "thumbnail" >
<img src= "img/pic.png" alt= "" >
<div class = "caption" >
<h3>图文并茂</h3>
<p>
这是一个图片结合文字的缩略图
</p>
<p>
<a href= "#" class = "btn btn-default" >进入</a>
</p>
</div>
</div>
</div>
<div class = "col-xs-6 col-md-3 col-sm-4" >
<div class = "thumbnail" >
<img src= "img/pic.png" alt= "" >
<div class = "caption" >
<h3>图文并茂</h3>
<p>
这是一个图片结合文字的缩略图
</p>
<p>
<a href= "#" class = "btn btn-default" >进入</a>
</p>
</div>
</div>
</div>
</div>
</div>
|
Salin selepas log masuk
4. Komponen kotak amaran
Komponen kotak amaran ialah satu set mesej yang dipratentukan.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <div class = "alert alert-success" >Bootstrap</div>
<div class = "alert alert-info" >Bootstrap</div>
<div class = "alert alert-warning" >Bootstrap</div>
<div class = "alert alert-danger" >Bootstrap</div>
<div class = "alert alert-success" >
Bootstrap
<button type= "button" class = "close" data-dismiss= "alert" >
<span>×</span>
</button>
</div>
<div class = "alert alert-success" >
Bootstrap,请到官网 <a href= "#" class = "alert-link" >下载</a>
</div>
|
Salin selepas log masuk
Kandungan di atas ialah komponen BootStrap yang diperkenalkan oleh editor dalam Bab 10: Gambar Kecil Pengepala Skrin Gergasi dan Komponen Kotak Makluman Saya harap ia akan membantu semua orang!