Bootstrap css的定义

学习bootstrap的最好方法就是实际的去实现需要的效果，但是css定义是非常复杂的，有几点需要注意：

1.CSS的优先级：

CSS的定义是可以累加覆盖的，所以其优先级非常重要。

CSS一般会放置在三个地方：

1）外部文件：即css文件
2）本文件定义：即html文件中的定义，大致类似

<style type=”text/css”>

body {

background-color: #FFFFFF;

}

body, td, th {

color: #999999;

}

</style>

3）所在标签的style定义，

如<div style=’height:3em;background-color:#fff’></div>

优先级是3)>2)>1）

如果是在同一优先级的情况下，有两种情况需要注意

1）定义的越准确，最终就会使用哪个定义，如

<div class=’test1 test2′></div>

如果同一级别有两个定义

.test1{}

div.test1{}

会采用后者，前者被覆盖

2）同一级别，优先级相同的情况下，看书写的先后顺序，

如上面test1 test2，如果定义了同一种颜色，如果在文件中哪个定义越靠后，最终选择的原色就是哪一种，如

.test2{}

.test1{}

这种情况下，使用的类test1的颜色，所以最终的效果和<div>中的class书写的先后顺序无关，这一点通常不重要，但有时候需要注意。

2.调试工具

目前来说，所有的浏览器都支持F12调试，IE、Chrome、Firefox、Opera都支持，比较常用的是Firefox的Firebug插件，当然其他浏览器也支持类似的功能，Firebug的亮点是有一个点选的功能，可以直接看到页面元素的大小，IE不仅仅支持显示元素的边框边距，还支持显示元素的偏移，这有时候也非常有用。它们都支持右键“审查元素”，可以得到元素的对应的html信息，这些信息是都动态的，js或鼠标事件都会直接反映在这些工具里，这一点对于js和ajax调试非常重要，因为右键显示源代码不会显示这些改变。

常见的有以下几种：

1）布局：主要是用div将页面分成几块，常见的方式如下

<div class=’row’>

<div class=’col-md-4′></div>

<div class=’col-md-4′></div>

<div class=’col-md-4′></div>

</div>

bootstrap将页面分为12个部分，支持各种屏幕大小，通过嵌套这种格式，就可以支持大多数的显示要求。

2）表格

<table class=’table table-bordered’>

<thead>

<tr>

<td></td><td></td><td></td><td></td>

</tr>

</thead>

<tbody>

<tr>

<td></td><td></td><td></td><td></td>

</tr>

</tbody>

</table>

bootstrap提供了很多样式，不过表格相对来说，非常简单，可以自己定义一些css来美化一下

3）表单

<div class=”row”>

<div class=”col-md-offset-4″>

<form class=”form-horizontal” role=”form”>

<div class=”form-group”>

<label for=”inputtext” class=”col-md-2 control-label”>文本框：</label>

<div class=”col-md-3″>

<input type=”text” class=”form-control input-lg” id=”inputtext” placeholder=”请输入文本文字”>

</div>

</div>

<div class=”form-group”>

<label for=”inputtext” class=”col-md-2 control-label”>文本域：</label>

<div class=”col-md-4″>

<textarea class=”form-control” rows=”3″ placeholder=”在这里说点什么吧！”></textarea>

</div>

</div>

<div class=”form-group”>

<label for=”inputtext” class=”col-md-2 control-label”>单选框：</label>

<div class=”col-md-3″>

<label class=”radio-inline”>

<input type=”radio” name=”inlineRadioOptions” id=”inlineRadio1″ value=”option1″>

男 </label>

<label class=”radio-inline”>

<input type=”radio” name=”inlineRadioOptions” id=”inlineRadio2″ value=”option2″>

女 </label>

<label class=”radio-inline”>

<input type=”radio” name=”inlineRadioOptions” id=”inlineRadio3″ value=”option3″>

保密 </label>

</div>

</div>

<div class=”form-group”>

<label for=”inputtext” class=”col-md-2 control-label”>复选框：</label>

<div class=”col-md-4″>

<label class=”checkbox-inline”>

<input type=”checkbox” id=”inlineCheckbox1″ value=”option1″>

复选框一 </label>

<label class=”checkbox-inline”>

<input type=”checkbox” id=”inlineCheckbox2″ value=”option2″>

复选框二 </label>

<label class=”checkbox-inline”>

<input type=”checkbox” id=”inlineCheckbox3″ value=”option3″>

复选框三 </label>

</div>

</div>

<div class=”form-group”>

<label for=”inputtext” class=”col-md-2 control-label”>选择框：</label>

<div class=”col-md-2″>

<select class=”form-control”>

<option>第一个选择</option>

<option>第二个选择</option>

<option>第三个选择</option>

<option>第四个选择</option>

<option>第五个选择</option>

</select>

</div>

</div>

<div class=”form-group”>

<label for=”inputtext” class=”col-md-2 control-label”>上传文件：</label>

<div class=”col-md-3″>

<input type=”file” name=”upload_file”>

</div>

</div>

<div class=”form-group”>

<div class=”col-md-3 col-md-offset-2″>

<button name=”submit” class=”btn btn-success btn-radius form-control”>提交</button>

</div>

</div>

</form>

</div>

</div>

上面大致包含了一些常见的组件，form组件必须用form标签包含，每一个表单组件用<div class=’form-group’></div>来包含，常见的组件样式是form-control，这个样式将组件拉伸到父标签大小，即width:100%，相对来说表单也挺简单的，可以选择一些提供的样式看看效果。

4）导航

<nav class=”navbar navbar-inverse” role=”navigation” >

<div class=”container” >

<ul class=”nav navbar-nav navbar-right” >

<li><a href=”#”>Home</a></li>

<li><a href=”#”>Service</a></li>

<li><a href=”#”>Customer</a></li>

<li><a href=”#”>Shopping</a></li>

</ul>

</div>

</nav>

导航使用标准的格式就可以了，如果需要修改颜色、字体，需要在自己的css文件中，增加对应类的信息，修改背景色和字体。

5）菜单

菜单的实现有很多种，其实就是在导航基础上，在<li></li>增加<ul><li>….</li></ul>的内容，需要注意的是，bootstrap默认提供的菜单是需要点击才能出现下拉菜单，如果需要更好的体验，如鼠标悬浮就出现菜单，需要寻找一些插件，如果需要修改颜色，需要修改对应的css样式，这里需要注意，不同的插件支持的类不一样，可以通过调试工具找到相应的类，修改其样式。

6）手风琴

手风琴，其实就是左侧导航菜单的意思，bootstrap默认提供的就可以用了，也可以寻找一些插件更好的实现。

bootstrap的基本使用是非常简单的，但是往往会发现某些效果系统没有提供，如日期选择框、弹出窗口等，这些需要去寻找相应的插件来实现，如datepicker是较好的日期控件，弹出窗口就更多了，需要插件的时候往往需要动态效果的时候，往往要借助jquery插件，可以通过搜索引擎或者到 http://www.jqueryscript.net/ 去寻找相应的插件，来完成你的任务。

如果插件不能满足你的需求，就需要自己写css或者js了，js一般来说都会使用常见的JQuery库，其他的JS库我还没有用过。JQuery有编程经验的话，还是比较容易的，如果要自己写JQuery扩展就稍微难一些了，因为javascript和通常的语言差别较大，需要一段时间学习才行。

CSS的学习并不难，难在选择合适的字体、颜色和效果，这都需要一点点的去尝试。