bootstrap第二天

今天本来想要写栅格系统的，但是感觉还不能写好，所以今天暂时写bootstrap按钮、表格、代码、排版等等。

先来按钮

下面是bootstrap最常见的按钮格式

效果如下图

然后是大中小按钮

效果图

还有独占一行的按钮

效果图

最后<a>和<input>标签也可以设置类似按钮

 

效果图

 代码

第一个就是标题加下滑线效果

class='page-header' 下划线

效果图

小字体标题

效果图

高光变红

效果图

黄色高光

效果图

删除线

效果图

原格式输出

效果图

 黑色高光

效果图

 然后来表格

写表格时记得条件表格table类

通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

代码

效果图

 .table-bordered 类为表格和其中的每个单元格增加边框。

 代码

效果图

.table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。

代码

效果图，鼠标放上去就会动并变色

 通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。

代码

效果图

 可以给每行加个颜色

效果图