bootstrap 框架简要复习——全局Css样式

前提:您已经引用了bootstrap.css文件在项目中

1、页面布局
本人亲身经历要是死磕就是非要自己写出一个页面来最后会死的很惨哈哈!
其实框架给出了就这么几个类就可以完成大致的布局:
代码:

 
第一部分
第二部分
第三部分

.container 类 (为第一级div设置) 可以理解为它就是一个“大容器”

.row类 (为第二级div设置) 容器中可以有很多“行” “装”内容

一般.row 下面的页面设计个人比较喜欢用栅格布局,.col-lg-*之类的类去搭配使用。

2、无序列表:
如果你还在用浮动来解决无序列表的行内显示问题那几就Out了哈哈!
请使用 . list-inline 类在ul标签中,列表立马就会乖乖的排成一行并清除黑色小圆点。
代码:

     
  • 列1
  • 列2
  • 列3
  • 列4
  • 列5

3、table表格样式:
对于表格样式之前我可以说是好像熟悉又貌似不熟悉,总是因为写样式所烦恼直到发现这些类:.table .table-bordered .table-striped 等。什么表格边框啊、隔行换色都在这里面有写好的呢。
代码:

  

4、表单中的单选和复选框的布局
要是没有接触过这些类,搭页面还不知道要浪费多少时间呢!
用 .checkbox-inline 类 或 .radio-inline 类可以使控件排在一行

5、图片形状
图片形状:. img-rounded:圆角 .img-circle:圆形 .img-thumbnail:带边框

说明:本次复习是为了熟悉这个框架的使用,所写的内容仅仅是个人经过理解后做出的小结,更多内容请前往 bootstrap中文网 。

你可能感兴趣的:(前端框架)