bootstrap的学习

bootstrap的特性

1、响应式设计

2、栅格布局

3、完整的类库

4、jquery插件

5、不同的使用场景

全局样式    

      一、  传统开发过程中的问题  

　　　　　　（1）重复 复杂  无意义的命名

　　　　　　（2）结构冗余  胡乱嵌套

       二、 bootstrap全局样式的特点

                    （1）代码整洁

　　　　　　（2）风格统一

　　　　　　（3）美观易用

bootstrap的排版---对齐  

　　.text-left         　　　　   .text-center    　　　　　　   .text-right

bootstrap的排版---大小写

       .text-lowercase　　　　.text-uppercase　　　　　　.text-capitalize

bootstrap的表格

　　带边框的表格 .table-bordered 　　条纹状表格 .table-striped　　　　悬停变色  .table-hover　　　　紧凑风格  .table-condensed

bootstrap的表单

bootstrap给HTML大部分表单都设置了默认样式，我们可以给表单增加相应类名，表单的水平排列，个性化定制。

<form class="inline">

<div class="form-group">

<lable for=" ">这是一个输入框：</lable>

<input  type="text" class="form-control" placeholder="这是一个输入框"></div>

<div class="form-group">

<lable for=" "> 这是一个输入框</lable>

<select name=" " id=" ">

<option value=" ">北京</option>

<option value=" ">上海</option>

<option value=" ">广州</option>

<option value=" ">沈阳</option>

<option value=" ">大连</option></select></div>

<div class="form-group">

<lable for=" ">这是一个输入框：</lable>

<textarea class="form-control" name=" " id=" " cols="30" rows="10"></textarea></div>

</form>