Bab 10: Lakaran kecil pengepala skrin gergasi dan komponen kotak amaran_kemahiran javascript

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.

//在固定的范围内，有圆角
<div class="container">
<div class="jumbotron">
<h2 id="网站标题">网站标题</h2>
<p>
这是一个学习性的网站！
</p>
<p>
<a href="#" class="btn btn-default">更多内容</a>
</p>
</div>
</div> 
//100%全屏，没有圆角
<div class="jumbotron">
<div class="container">
<h2 id="网站标题">网站标题</h2>
<p>
这是一个学习性的网站！
</p>
<p>
<a href="#" class="btn btn-default">更多内容</a>
</p>
</div>
</div>

2. Komponen pengepala

//增加一些空间
<div class="page-header">
<h1 id="大标题-small-小标题-small">大标题 <small>小标题</small></h1>
</div> 

3. Komponen lakaran kecil

//缩略图配合响应式
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3 col-sm-4">
<div class="thumbnail">
<img src="/static/imghwm/default1.png"  data-src="img/pic.png"  class="lazy" alt="">
</div>
</div>
<div class="col-xs-6 col-md-3 col-sm-4">
<div class="thumbnail">
<img src="/static/imghwm/default1.png"  data-src="img/pic.png"  class="lazy" alt="">
</div>
</div>
<div class="col-xs-6 col-md-3 col-sm-4">
<div class="thumbnail">
<img src="/static/imghwm/default1.png"  data-src="img/pic.png"  class="lazy" alt="">
</div>
</div>
<div class="col-xs-6 col-md-3 col-sm-4">
<div class="thumbnail">
<img src="/static/imghwm/default1.png"  data-src="img/pic.png"  class="lazy" 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="/static/imghwm/default1.png"  data-src="img/pic.png"  class="lazy" alt="">
<div class="caption">
<h3 id="图文并茂">图文并茂</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="/static/imghwm/default1.png"  data-src="img/pic.png"  class="lazy" alt="">
<div class="caption">
<h3 id="图文并茂">图文并茂</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="/static/imghwm/default1.png"  data-src="img/pic.png"  class="lazy" alt="">
<div class="caption">
<h3 id="图文并茂">图文并茂</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="/static/imghwm/default1.png"  data-src="img/pic.png"  class="lazy" alt="">
<div class="caption">
<h3 id="图文并茂">图文并茂</h3>
<p>
这是一个图片结合文字的缩略图
</p>
<p>
<a href="#" class="btn btn-default">进入</a>
</p>
</div>
</div>
</div>
</div>
</div> 

4. Komponen kotak amaran

Komponen kotak amaran ialah satu set mesej yang dipratentukan.

//基本警告框
<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>&times;</span>
</button>
</div> 
//自动适配的超链接
<div class="alert alert-success">
Bootstrap，请到官网 <a href="#" class="alert-link">下载</a>
</div>

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!