Bootstrp的使用手册及学习笔记.docVIP

Bootstrap的使用手册及学习笔记 Bootstrap是基于HTML5和CSS3开发的用于前端开发的工具包。关于Bootstrap的介绍和下载，大家可以去搜索查看。Bootstrap使用的某些HTML元素和CSS属性需要文档类型为HTML5 的文件类型。因此这一文档类型必须出现在项目的每个页面的开始部分： !DOCTYPE html 2 html lang=en 3 ... 4 /html HTML中定义的所有标题标签, 从h1 到 h6 都是可用的。Bootstrap定义的全局 font-size 是 14px，line-height 是 20px。这些样式应用到了 body 和所有的段落上。另外，对 p (段落)还定义了1/2行高(默认为10px)的底部外边距(margin)属性。 在使用Bootstrap之前必须要将bootstrap.css或者bootstrap.min.css（压缩版）引入到页面中，它定义了Bootstrap的基本样式。如果需要使用Bootstrap提供的组件，要将bootstrap.js或者bootstrap.min.js（压缩版）引入到页面中。因为bootstrap的JS插件需要Jquery的支持，所有在引入bootstrap.js之前必须将Jquery.js也引入到页面上。另外如果你希望你的页面支持响应式布局，必须引入bootstrap-responsive.css或者bootstrap-responsive.min.css（压缩版），它主要提供页面在移动设备上的显示样式支持，需要注意的是bootstrap-responsive.css必须放置在bootstrap.css之后，否则便不具有响应式布局功能。当然在Bootstrap3的版本中，bootstrap.css和bootstrap-responsive.css已经合并了。 一、代码样式 Bootstrap提供了代码样式，用于在页面上展示代码，以此来区分于正文的区别，如果是行内嵌套代码，可以用code标签，但是对于代码中的符号要进行转换（是lt;、是gt;）例如： !--正文中内嵌代码块-- pFor example, codesection/code should be wrapped as inline./p 如果是代码块可以用pre标签，同样的，代码中的要将代码中的尖括号做转换。例如： 1!--.pre-scrollable，其作用是设置max-height为350px，并在垂直方向展示滚动条-- 2 pre class=pre-scrollable 3 4 pSample text here.../p 5 p class=text-muted.../p 6 p class=text-primary.../p 7 p class=text-success.../p 8 p class=text-info.../p 9 p class=text-warning.../p 10 p class=text-danger.../p 11 12 /pre 二、表格 基本的表格样式可以用 table 标签。例如： 1h4正常表格/h4 2 !-- 3 利用.table-bordered为表格和其中的每个单元格增加边框 4 利用.table-striped可以给tbody之内的每一样增加斑马条纹样式 5 利用.table-hover可以让tbody中的每一行响应鼠标悬停状态 6 -- 7 table class=table table-striped table-bordered table-hover 8 tr 9 thFirst Name/th 10 thLast Name/th 11 thUsername/th 12 /tr 13 tr 14 tdMark/td 15 tdOtto/td 16 td@mdo/td 17 /tr 18 tr 19 tdJacob/td 20 tdThornton/td 21 td@fat/td 22 /tr 23 /table 如果想让表格的内容更紧凑一点可以为表格添加 .table-condensed 类，如果想为表格添加颜色可以选择情景类，情景类有： .success 表示成功或积极的行为 .error 表示一个危险或存有潜在危险的行为 .warning 表示警告，可能需要注意 .info 作为一个默认样式的一个替代样式 例如： 1!--利用.table-condensed可以让表格更加紧凑，单元格中的内部（padding）均会减半--