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>标签，但是对于代码中的符号要进行转换（<是<、>是>）例如：
<!--正文中内嵌代码块--> <p>For example, <code><section></code> should be wrapped as inline.</p> |
如果是代码块可以用<pre>标签，同样的，代码中的要将代码中的尖括号做转换。例如：
1<!--.pre-scrollable，其作用是设置max-height为350px，并在垂直方向展示滚动条--> 2 <pre class="pre-scrollable"> 3 4 <p>Sample </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> 标签。例如：
1<h4>正常表格</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 <th>First Name</th> 10 <th>Last Name</th> 11 <th>Username</th> 12 </tr> 13 <tr> 14 <td>Mark</td> 15 <td>Otto</td> 16 <td>@mdo</td> 17 </tr> 18 <tr> 19 <td>Jacob</td> 20 <td>Thornton</td> 21 <td>@fat</td> 22 </tr> 23 </table> |
如果想让表格的内容更紧凑一点可以为表格添加 .table-condensed 类，如果想为表格添加颜可以选择情景类，情景类有：
.success | 表示成功或积极的行为 |
.error | 表示一个危险或存有潜在危险的行为 |
.warning | 表示警告，可能需要注意 |
.info | cssclass属性作为一个默认样式的一个替代样式 |
例如：
1<!--利用.table-condensed可以让表格更加紧凑，单元格中的内部（padding）均会减半--> 2 <table class="table table-condensed"> 3 <tr> 4 <th>First Name</th> 5 <th>Last Name</th> 6 <th>Username</th> 7 </tr> 8 <tr class="warning"> 9 <td>Mark</td> 10 <td>Otto</td> 11 <td>@mdo</td> 12 </tr> 13 <tr class="error"> 14 <td>Jacob</td> 15 <td>Thornton</td> 16 <td>@fat</td> 17 </tr> 18 <tr class="info"> 19 <td>Larry</td> 20 <td>the Bird</td> 21 <td>@twitter</td> 22 </tr> 23 </table> |
三、表单
基本的表单可以用<form>标签，只要定义了<form>标签，标签里面的每个单独的表单控件都已经被赋予了样式。默认是堆叠、label左侧对齐并在控件之上。例如：
1<form> 2 <fieldset> 3 <legend>普通表单</legend> 4 <label>Label name</label> 5 <input type="text" placeholder="Type something…"> 6 <span class="help-block">Example block-level help text here.</span> 7 <label class="checkbox"> 8 <input type="checkbox"> Check me out 9 </label> 10 <button type="submit" class="btn">Submit</button> 11 </fieldset> 12</form> |
另外，Bootstrap包含3个可选的常用表单布局，分别是搜索表单，行内表单，水平表单，例如：
1<legend>搜索表单</legend> 2<!--为表单增加.form-search类，并为<input>增加.search-query类，可将输入框变成圆角状--> 3 <form class="form-search"> 4 <input type="text" class="input-medium search-query" placeholder="Type something…"> 5 <button type="submit" class="btn">Search</button> 6 </form> 1<legend>行内表单</legend> 2<!--为表单增加.form-inline类， 结果是一个压缩型排列的表单，其中label左侧对齐、控件为inline-block类型。--> 3 <form class="form-inline"> 4 <input type="text" class="input-small" placeholder="Email"> 5 <input type="password" class="input-small" placeholder="Password"> 6 <label class="checkbox"> 7 <input type="checkbox"> Remember me 8 </label> 9 <button type="submit" class="btn">Sign in</button> 10 </form> 1 <legend>水平表单</legend> 2 <!-- 3为表单添加.form-horizontal类 4将label和控件包裹在.control-group中 5为label添加.control-label类 6将任何相关的控件包裹在.controls中，以确保最佳的对齐 7 --> 8 <form class="form-horizontal"> 9 <div class="control-group"> 10 <label class="control-label" for="inputEmail">Email</label> 11 <div class="controls"> 12 <input type="text" id="inputEmail" placeholder="Email"> 13 </div> 14 </div> 15 <div class="control-group"> 16 <label class="control-label" for="inputPassword">Password</label> 17 <div class="controls"> 18 <input type="password" id="inputPassword" placeholder="Password"> 19 </div> 20 </div> 21 <div class="control-group"> 22 <div class="controls"> 23 <label class="checkbox"> 24 <input type="checkbox"> Remember me 25 </label> 26 <button type="submit" class="btn">Sign in</button> 27 </div> 28 </div> 29 </form> |
四、按钮
任何赋予.btn类的页面元素都会显示按钮样式。不过，通常是用于更好的表现<a>和 <button>页面元素。
按钮 | class="" | 描述 |
默认 | btn | 带渐变的标准灰按钮 |
btn btn-primary | 提供额外的视觉感, 可在一系列的按钮中指出主要操作 | |
btn btn-info | 默认样式的替代样式 | |
btn btn-success | 表示成功或积极的动作 | |
btn btn-warning | 提醒应该谨慎采取这个动作 | |
btn btn-danger | 表示这个动作危险或存在危险 | |
btn btn-inverse | 备用的暗灰按钮，不依赖于语义和用途 | |
链接 | btn btn-link | 简化一个按钮, 使它看起来像一个链接，同时保持按钮的行为 |
如果想更改按钮的大小，可以在class类中添加 .btn-large 、.btn-small 或 .btn-mini即可改变按钮大小，通过由Glyphicons提供图片，可以给每个按钮设置一个小图标，使用时，每个图标都需要依附于一个<i>标签，并且赋予一个唯一的类（class），默认是深灰，也可以使用反（白）样式的图标，只需增加一个额外的类 .icon-white 。例如：
<!--.btn-primary可以将按钮的颜变蓝，.btn-large可以设置按钮的大小，对应的还有.btn-small.btn-mini 要想给按钮加上小图标可以使用<i>标签 --> <div > <a class="btn btn-primary btn-large" href=""><i class="icon-comment icon-white"></i> 查看评论</a> </div> <div > <button class="btn" type="submit"><i class="icon-shopping-cart"></i>结账</a> </div> <div > <input class="btn" type="button" value="设置"> </div> <!--通过给按钮添加.btn-block可以使其充满父节点100%的宽度，而且按钮也变为了块级（block）元素--> <button type="button" class="btn btn-primary btn-lg btn-block " disabled="disabled">Block level button</button> <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button> |
五、下拉菜单按钮
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论