bootstrap框架学习笔记

朱雀 2022-09-18 14:56 242阅读 0赞

一.  在.spanN(N为1－12的整数)的标签内加.offsetN(N为1－12的整数)可以使标签左边距(margin-left)增加 .spanN(N为1－12的整数)的距离。  
  
二.  .row以不同的固定宽度定位，而.row-fluid以百分比定位。  
  
三.  .muted可以使标签背景颜色为灰色（\#999999）。  
  
  
四.  文本可以添加以下class改变样式：

<table style=""> 
 <tbody style="word-wrap:break-word"> 
 <tr style="word-wrap:break-word; margin:0px; padding:0px"> 
 <td style="word-wrap:break-word; margin:0px; padding:4px; font-family:verdana,'Microsoft YaHei',Tahoma,sans-serif; border:1px solid rgb(227,237,245); overflow:hidden"> .text-left</td> 
 <td style="word-wrap:break-word; margin:0px; padding:4px; font-family:verdana,'Microsoft YaHei',Tahoma,sans-serif; border:1px solid rgb(227,237,245); overflow:hidden"> 左对齐</td> 
 </tr> 
 <tr style="word-wrap:break-word; margin:0px; padding:0px"> 
 <td style="word-wrap:break-word; margin:0px; padding:4px; font-family:verdana,'Microsoft YaHei',Tahoma,sans-serif; border:1px solid rgb(227,237,245); overflow:hidden"> .text-center</td> 
 <td style="word-wrap:break-word; margin:0px; padding:4px; font-family:verdana,'Microsoft YaHei',Tahoma,sans-serif; border:1px solid rgb(227,237,245); overflow:hidden"> 中对齐</td> 
 </tr> 
 <tr style="word-wrap:break-word; margin:0px; padding:0px"> 
 <td style="word-wrap:break-word; margin:0px; padding:4px; font-family:verdana,'Microsoft YaHei',Tahoma,sans-serif; border:1px solid rgb(227,237,245); overflow:hidden"> .text-right</td> 
 <td style="word-wrap:break-word; margin:0px; padding:4px; font-family:verdana,'Microsoft YaHei',Tahoma,sans-serif; border:1px solid rgb(227,237,245); overflow:hidden"> 右对齐</td> 
 </tr> 
 <tr style="word-wrap:break-word; margin:0px; padding:0px"> 
 <td style="word-wrap:break-word; margin:0px; padding:4px; font-family:verdana,'Microsoft YaHei',Tahoma,sans-serif; border:1px solid rgb(227,237,245); overflow:hidden"> .text-warning</td> 
 <td style="word-wrap:break-word; margin:0px; padding:4px; font-family:verdana,'Microsoft YaHei',Tahoma,sans-serif; border:1px solid rgb(227,237,245); overflow:hidden"> warning字体颜色</td> 
 </tr> 
 <tr style="word-wrap:break-word; margin:0px; padding:0px"> 
 <td style="word-wrap:break-word; margin:0px; padding:4px; font-family:verdana,'Microsoft YaHei',Tahoma,sans-serif; border:1px solid rgb(227,237,245); overflow:hidden"> .text-error</td> 
 <td style="word-wrap:break-word; margin:0px; padding:4px; font-family:verdana,'Microsoft YaHei',Tahoma,sans-serif; border:1px solid rgb(227,237,245); overflow:hidden"> error字体颜色</td> 
 </tr> 
 <tr style="word-wrap:break-word; margin:0px; padding:0px"> 
 <td style="word-wrap:break-word; margin:0px; padding:4px; font-family:verdana,'Microsoft YaHei',Tahoma,sans-serif; border:1px solid rgb(227,237,245); overflow:hidden"> .text-info</td> 
 <td style="word-wrap:break-word; margin:0px; padding:4px; font-family:verdana,'Microsoft YaHei',Tahoma,sans-serif; border:1px solid rgb(227,237,245); overflow:hidden"> info字体颜色</td> 
 </tr> 
 <tr style="word-wrap:break-word; margin:0px; padding:0px"> 
 <td style="word-wrap:break-word; margin:0px; padding:4px; font-family:verdana,'Microsoft YaHei',Tahoma,sans-serif; border:1px solid rgb(227,237,245); overflow:hidden"> .text-success</td> 
 <td style="word-wrap:break-word; margin:0px; padding:4px; font-family:verdana,'Microsoft YaHei',Tahoma,sans-serif; border:1px solid rgb(227,237,245); overflow:hidden"> success字体颜色</td> 
 </tr> 
 </tbody> 
</table>

五.  dl可以加.dl-horizontal使dt和dd横排  
  
  
六.  table可以加以下class改变样式

<table style=""> 
 <tbody style="word-wrap:break-word"> 
 <tr style="word-wrap:break-word; margin:0px; padding:0px"> 
 <td style="word-wrap:break-word; margin:0px; padding:4px; font-family:verdana,'Microsoft YaHei',Tahoma,sans-serif; border:1px solid rgb(227,237,245); overflow:hidden"> .table-bordered</td> 
 <td style="word-wrap:break-word; margin:0px; padding:4px; font-family:verdana,'Microsoft YaHei',Tahoma,sans-serif; border:1px solid rgb(227,237,245); overflow:hidden"> 添加边框</td> 
 </tr> 
 <tr style="word-wrap:break-word; margin:0px; padding:0px"> 
 <td style="word-wrap:break-word; margin:0px; padding:4px; font-family:verdana,'Microsoft YaHei',Tahoma,sans-serif; border:1px solid rgb(227,237,245); overflow:hidden"> .table-hover</td> 
 <td style="word-wrap:break-word; margin:0px; padding:4px; font-family:verdana,'Microsoft YaHei',Tahoma,sans-serif; border:1px solid rgb(227,237,245); overflow:hidden"> 悬浮有背景色</td> 
 </tr> 
 <tr style="word-wrap:break-word; margin:0px; padding:0px"> 
 <td style="word-wrap:break-word; margin:0px; padding:4px; font-family:verdana,'Microsoft YaHei',Tahoma,sans-serif; border:1px solid rgb(227,237,245); overflow:hidden"> .table-striped</td> 
 <td style="word-wrap:break-word; margin:0px; padding:4px; font-family:verdana,'Microsoft YaHei',Tahoma,sans-serif; border:1px solid rgb(227,237,245); overflow:hidden"> 隔行有背景色区分</td> 
 </tr> 
 <tr style="word-wrap:break-word; margin:0px; padding:0px"> 
 <td style="word-wrap:break-word; margin:0px; padding:4px; font-family:verdana,'Microsoft YaHei',Tahoma,sans-serif; border:1px solid rgb(227,237,245); overflow:hidden"> .table-condensed</td> 
 <td style="word-wrap:break-word; margin:0px; padding:4px; font-family:verdana,'Microsoft YaHei',Tahoma,sans-serif; border:1px solid rgb(227,237,245); overflow:hidden"> 缩小行距</td> 
 </tr> 
 </tbody> 
</table>

七.  checkbox和radio可以加.inline使其在一行内显示，效果如下：  
![234802m2z3knlnhah3pd5q.png][]

八.  form加.form-inline可以使元素行内对齐

九.  .controls也可以加.controls-row达到跟.row一样的效果

![235120rrmocozm0qigrwy7.png][]

10.  button也有事件的

![235228xxk27fxl1jh36fqi.png][]

11.  button式的多选和单选写法

![235402y5n46kb8zg5a04nv.png][]

效果如下：

![235403l5m5aiy6dh122zly.png][]

12.　label的颜色

![235521e113pmvrs1t9pwwu.png][]

13.  badge的样式

![235630p33v5m8arik3gi3u.png][]

14.  滚动滚动条的时候，导航对应变化的写法

![235815scazh9qq1cla0plv.png][]

[234802m2z3knlnhah3pd5q.png]: http://www.w3cfuns.com/data/attachment/album/201311/26/234802m2z3knlnhah3pd5q.png
[235120rrmocozm0qigrwy7.png]: http://www.w3cfuns.com/data/attachment/album/201311/26/235120rrmocozm0qigrwy7.png
[235228xxk27fxl1jh36fqi.png]: http://www.w3cfuns.com/data/attachment/album/201311/26/235228xxk27fxl1jh36fqi.png
[235402y5n46kb8zg5a04nv.png]: http://www.w3cfuns.com/data/attachment/album/201311/26/235402y5n46kb8zg5a04nv.png
[235403l5m5aiy6dh122zly.png]: http://www.w3cfuns.com/data/attachment/album/201311/26/235403l5m5aiy6dh122zly.png
[235521e113pmvrs1t9pwwu.png]: http://www.w3cfuns.com/data/attachment/album/201311/26/235521e113pmvrs1t9pwwu.png
[235630p33v5m8arik3gi3u.png]: http://www.w3cfuns.com/data/attachment/album/201311/26/235630p33v5m8arik3gi3u.png
[235815scazh9qq1cla0plv.png]: http://www.w3cfuns.com/data/attachment/album/201311/26/235815scazh9qq1cla0plv.png