Bab 4: Borang BootStrap dan kemahiran images_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.

Mata pembelajaran:

1. Borang
2. Gambar

Dalam pelajaran ini, kita akan mempelajari terutamanya tentang bentuk Bootstrap dan fungsi imej, serta memaparkan pelbagai kesan kaya melalui definisi CSS terbina dalam.

1. Borang

Bootstrap menyediakan beberapa gaya bentuk yang kaya untuk digunakan oleh pembangun.

1. Format asas

//实现基本的表单样式
<form>
　　<div class="form-group">
　　　　<label>电子邮件</label>
　　　　<input type="email" class="form-control" placeholder="请输入您的电子邮件">
　　</div>
　　<div class="form-group">
　　　　<label>密码</label>
　　　　<input type="password" class="form-control" placeholder="请输入您的密码">
　　</div>
</form> 

Nota: Hanya apabila jenis kotak input ditetapkan dengan betul boleh diberikan gaya yang betul. Kawalan kotak input yang disokong termasuk: teks, kata laluan, masa tarikh, tarikh-tempatan, tarikh, bulan, masa, minggu, nombor, e-mel, url, carian, telefon dan warna.

2. Borang sebaris

//让表单左对齐浮动，并表现为 inline-block 内联块结构
<form class="form-inline"> 

Nota: Apabila kurang daripada 768px, gaya eksklusif akan dipulihkan

3. Gabungan borang

//前后增加片段
<div class="input-group">
　　<div class="input-group-addon">￥</div>
　　<input type="text" class="form-control">
　　<div class="input-group-addon">.00</div>
</div> 

4. Susunan mendatar

//让表单内的元素保持水平排列
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">电子邮件</label>
<div class="col-sm-10">
<input type="email" class="form-control" placeholder="请输入您的电子邮件">
</div>
</div>
</form>

Nota: Sistem grid col-sm digunakan di sini, yang akan diterangkan dalam bab berikut, dan label kawalan bermaksud penyegerakan dengan gaya elemen induk.

5. Kotak semak dan butang radio

//设置复选框，在一行
<div class="checkbox">
<label> <input type="checkbox">体育
</label>
</div>
<div class="checkbox">
<label> <input type="checkbox">音乐
</label>
</div> 
//设置禁用的复选框
<div class="checkbox disabled">
<label> <input type="checkbox" disabled>音乐
</label>
</div> 
//设置内联一行显示的复选框
<label class="checkbox-inline"> <input type="checkbox">体育</label>
<label class="checkbox-inline disabled"> <input type="checkbox" disabled>音乐</label> 
//设置单选框
<div class="radio disabled">
<label> <input type="radio" name="sex" disabled>男</label>
</div> 

6. Senarai jatuh turun

//设置下拉列表
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select> 

7. Status pengesahan

//设置为错误状态
<div class="form-group has-error"> 

Nota: Terdapat status lain seperti berikut:

　　样式说明
　　has-error错误状态
　　has-success成功状态
　　has-warning警告状态
//label 标签同步相应状态
<label class="control-label">Input with success</label> 

8. Tambahkan ikon tambahan

//文本框右侧内置文本图标
<div class="form-group has-feedback">
<label>电子邮件</label>
<input type="email" class="form-control">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div> 

Nota: Selain glyphicon-ok, terdapat beberapa lagi dalam jadual berikut:

　样式说明
　　glyphicon-ok成功状态
　　glyphicon-warning-sign警告状态
　　glyphicon-remove错误状态

9. Saiz kawalan

//从大到小
<input type="password" class="form-control input-lg">
<input type="password" class="form-control">
<input type="password" class="form-control input-sm"> 

Nota: Anda juga boleh menetapkan elemen induk form-group-lg dan form-group-sm untuk dilaraskan.

2. Gambar

Bootstrap menyediakan beberapa gaya imej yang kaya untuk digunakan oleh pembangun.

1. Bentuk gambar

//三种形状
<img class="img-rounded lazy"  src="/static/imghwm/default1.png"  data-src="img/pic.png"  alt="图片">
<img class="img-circle lazy"  src="/static/imghwm/default1.png"  data-src="img/pic.png"  alt="图片">
<img class="img-thumbnail lazy"  src="/static/imghwm/default1.png"  data-src="img/pic.png"  alt="图片"> 
//响应式图片
<img class="img-responsive lazy"  src="/static/imghwm/default1.png"  data-src="img/pic.png"  alt="图片">

Di atas ialah kandungan borang dan gambar Bootstrap yang berkaitan yang diperkenalkan oleh editor kepada anda. Saya harap ia akan membantu anda!