前言:
最近在学习了bootstrap后,立马就使用它重新做了某个项目的页面,不要多想,怎么才学bootstrap!我只是刚参加工作的新手,以前比较喜欢写原生的CSS样式以及JS方法,页面效果的实现,一般一个项目的页面做完需要好几天的时间,改了又改!再加上一些JS效果,功能方法部分也得一周的时间,在使用了boobstrap之后,重新做了页面,只花了两天!好吧,开始我的学习笔记吧。
1. 栅格系统
使用外部div 添加类 container ,在内进行页面的划分,行 .row ,列 col-md-*,页面分成12份,例如:
<div class="container">
<div class="row">
<div class="col-md-4">
<h5>一行四列</h5>
</div>
<div class="col-md-4">
<h5>一行四列</h5>
</div>
<div class="col-md-4">
<h5>一行四列</h5>
</div>
</div>
</div>
当然,我们也可以在列中再划分行,或者列。也就是进行细分,非常方便。
2.部分样式
类 | 描述 |
---|---|
.text-left | 文本居左 |
.text-right | 居右 |
.text-center | 居中 |
.text-lowercase | 文本小写 |
.text-uppercase | 文本大写 |
.text-capitalize | 单词首字母大写 |
.list-unstyled | 去除默认样式 |
.text-inline | 列表项处于一行 |
3.表格
表单元素
<table>
<thead>
<tr>
<th><th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
类 | 描述 |
---|---|
.table | 表格横向分割线 |
.table-striped | 添加斑马条纹线 |
.table-bordered | 添加表格边框 |
.table-hover | 鼠标悬浮样式 |
.active | 添加鼠标悬浮样式 |
.success | 绿色样式 |
.info | 绿色样式 |
.warning | 黄色警示样式 |
.danger | 红色危险样式 |
类 .active .success .info .danger 可应用在提示信息的文本上,还有一个.primary,用做一些按钮组的不同样式
4.表单
<form role="form">
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-8">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-8">
<label>
<input type="checkbox" class="">选购
</label>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-8">
<select class="form-control">
<option value="0"></option>
</select>
</div>
</div>
</form>
类 | 描述 |
---|---|
.form-group | 表单组,获取最佳间距 |
.form-control | 文本框元素的样式类 |
.control-label | label标签样式 |
.form-inline | 所有元素处于同一行,(就不需要划分列了) |
.form-horizontion | 水平表单,(也就是类form-group 中的元素处于同一行) |
说明:.form-control样式使得文本框元素占据一行的剩余空间,所以在单选,复选框时,不要加.form-control ,不然回事选框的文字处于第二行。
表单的信息提示样式,.has-success(绿色文字,边框),.has-error(红色样式),.has-warning(黄色样式)
5.按钮
类 | 描述 |
---|---|
.btn | 按钮基本样式 |
.btn-default | 按钮的默认样式 |
.btn-success | 绿色样式 |
.btn-warning | 黄色样式 |
.btn-danger | 红色样式 |
.btn-block | 设置父元素的100%,拉宽元素 |
.active | 激活样式 |
.disabled | 禁止点击样式 |
6.其他的样式
图片的样式设置:
- .img-rounded 获得圆角图片
- .img-circle 获得圆形图片
- .img-responsive 使得图片响应式,随着父类大小改变
其他页面设计样式:
- .clearfix 清楚浮动
- .pull-left 元素居左
- .pull-right 局右
- .center-block 元素居中
- .show .hide 元素显示,隐藏
好了,这些都是基本的页面结构设计的样式,还需要布局组件,后期在写,更加详细的内容访问菜鸟教程