首页 > 代码库 > Bootstrap笔记合集
Bootstrap笔记合集
一、
为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：
? .text-left：左对齐
? .text-center：居中对齐
? .text-right：右对齐
? .text-justify：两端对齐
用法：
<p class="text-left">我居左</p>
<p class="text-center">我居中</p>
<p class="text-right">我居右</p>
<p class="text-justify">我两端对齐</p>
二、水平定义列表就像内联列表一样，Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。类似于ul li 中的float！
三、在Bootstrap主要提供了三种代码风格：
1、使用<code></code>来显示单行内联代码
2、使用<pre></pre>来显示多行块代码
3、使用<kbd></kbd>来显示用户输入代码
在使用代码时，用户可以根据具体的需求来使用不同的类型：
1、<code>：一般是针对于单个单词或单个句子的代码
2、<pre>：一般是针对于多行代码（也就是成块的代码）
3、<kbd>:一般是表示用户要通过键盘输入的内容
注意：不管使用哪种代码风格，在代码中碰到小于号（<）要使用硬编码“<”来替代，大于号(>)使用“>”来替代。而且对于<pre>代码块风格，标签前面留多少个空格，在显示效果中就会留多少个空格。
code风格
<div>Bootstrap的代码风格有三种： <code><code></code> <code><pre></code> <code><kbd></code></div>
pre风格
<div><pre><ul><li>...</li><li>...</li><li>...</li></ul></pre></div>
kbd风格
<div>请输入<kbd>ctrl+c</kbd>来复制代码，然后使用<kbd>ctrl+v</kbd>来粘贴代码</div>
四、正如前面所示，<pre>元素一般用于显示大块的代码，并保证原有格式不变。但有时候代码太多，而且不想让其占有太大的页面篇幅，就想控制代码块的大小。
Bootstrap也考虑到这一点，你只需要在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。
五、bootstrap中的表格样式
? .table：基础表格
? .table-striped：斑马线表格
? .table-bordered：带边框的表格
? .table-hover：鼠标悬停高亮的表格
? .table-condensed：紧凑型表格
? .table-responsive：响应式表格
响应式表格：随着各种手持设备的出现，要想让你的Web页面适合千罗万像的设备浏览，响应式设计的呼声越来越高。在Bootstrap中也为表格提供了响应式的效果，将其称为响应式表格。
Bootstrap提供了一个容器，并且此容器设置类名“.table-responsive”,此容器就具有响应式效果，然后将<table class="table">置于这个容器当中，这样表格也就具有响应式效果。
Bootstrap中响应式表格效果表现为：当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。在响应式表格中一定要在外层加一个div容器来包裹住内部的表格，用来实现响应式。所有表格示例如下：
附上代码：
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>基础表格</title><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></head><body><h1>基础表格</h1><table class="table"><thead><tr><th>表格标题</th><th>表格标题</th><th>表格标题</th></tr></thead><tbody><tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr><tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr></tbody></table><h1>斑马线表格</h1><table class="table table-striped"><thead><tr><th>表格标题</th><th>表格标题</th><th>表格标题</th></tr></thead><tbody><tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr><tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr><tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr><tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr></tbody></table><h1>带边框的表格</h1><table class="table table-bordered"><thead><tr><th>表格标题</th><th>表格标题</th><th>表格标题</th></tr></thead><tbody><tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr><tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr><tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr><tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr></tbody></table><h1>鼠标悬浮高亮的表格</h1><table class="table table-striped table-bordered table-hover"><thead><tr><th>表格标题</th><th>表格标题</th><th>表格标题</th></tr></thead><tbody><tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr><tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr><tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr><tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr></tbody></table><h1>紧凑型表格</h1><table class="table table-condensed"><thead><tr><th>表格标题</th><th>表格标题</th><th>表格标题</th></tr></thead><tbody><tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr><tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr><tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr><tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr></tbody></table><h1>响应式表格</h1><div class="table-responsive"><table class="table table-bordered"><thead><tr><th>表格标题</th><th>表格标题</th><th>表格标题</th></tr></thead><tbody><tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr><tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr><tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr><tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr></tbody></table></div></body></html>
五、Bootstrap还为表格的行元素<tr>提供了五种不同的类名，每种类名控制了行的不同背景颜色，具体说明如下表所示：
慕课网链接：http://www.imooc.com/code/2294
六、Bootstrap框架默认的表单是垂直显示风格，但很多时候我们需要的水平表单风格（标签居左，表单控件居右）见下图。
在Bootstrap框架中要实现水平表单效果，必须满足以下两个条件：
1、在<form>元素是使用类名“form-horizontal”。
2、配合Bootstrap框架的网格系统。（网格布局会在以后的章节中详细讲解）
在<form>元素上使用类名“form-horizontal”主要有以下几个作用：
1、设置表单控件padding和margin值。
2、改变“form-group”的表现形式，类似于网格系统的“row”。
代码如下：
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>水平表单</title><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></head><body><form class="form-horizontal" role="form"><div class="form-group"><label for="inputEmail3" class="col-sm-2 control-label">邮箱</label><div class="col-sm-10"><input type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址"></div></div><div class="form-group"><label for="inputPassword3" class="col-sm-2 control-label">密码</label><div class="col-sm-10"><input type="password" class="form-control" id="inputPassword3" placeholder="请输入您的邮箱密码"></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><div class="checkbox"><label><input type="checkbox"> 记住密码</label></div></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-default">进入邮箱</button></div></div></form></body></html>
七、
表单控件(复选框checkbox和单选择按钮radio)
<form role="form"><div class="checkbox"><label><input type="checkbox" value="">记住密码</label></div><div class="radio"><label><input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>喜欢</label></div><div class="radio"><label><input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">不喜欢</label></div></form>
八、
<input class="form-control" type="text" placeholder="表单已禁用，不能输入" disabled>
九、
<form role="form"><div class="form-group has-success"> <label class="control-label" for="inputSuccess1">成功状态</label> <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" ></div><div class="form-group has-warning"> <label class="control-label" for="inputWarning1">警告状态</label> <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态"></div><div class="form-group has-error"> <label class="control-label" for="inputError1">错误状态</label> <input type="text" class="form-control" id="inputError1" placeholder="错误状态"></div></form>
十、按钮代码：<button class="btn" type="button">基础按钮.btn</button> <button class="btn btn-default" type="button">默认按钮.btn-default</button> <button class="btn btn-primary" type="button">主要按钮.btn-primary</button> <button class="btn btn-success" type="button">成功按钮.btn-success</button> <button class="btn btn-info" type="button">信息按钮.btn-info</button> <button class="btn btn-warning" type="button">警告按钮.btn-warning</button> <button class="btn btn-danger" type="button">危险按钮.btn-danger</button> <button class="btn btn-link" type="button">链接按钮.btn-link</button>
十一、一般制作按钮除了使用<button>标签元素之外，还可以使用<input type="submit">和<a>标签等。同样，
在Bootstrap框架中制作按钮时，除了刚才所说的这些标签元素之外，还可以使用在其他的标签元素上，
唯一需要注意的是，要在制作按钮的标签元素上添加类名“btn”。如果不添加是不会有任何按钮效果。
<button class="btn btn-default" type="button">button标签按钮</button><input type="submit" class="btn btn-default" value="input标签按钮"/><a href="##" class="btn btn-default">a标签按钮</a><span class="btn btn-default">span标签按钮</span><div class="btn btn-default">div标签按钮</div>
<button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button> <button class="btn btn-primary" type="button">正常按钮</button><button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button><button class="btn btn-primary btn-xs" type="button">超小按钮</button>
十二、Bootstrap框架中提供了一个类名“btn-block”。按钮使用这个类名就可以让按钮充满整个容器，并且这个按钮不会有任何的padding和margin值。在实际当中，常把这种按钮称为块状按钮。
十三、
1、img-responsive：响应式图片，主要针对于响应式设计
2、img-rounded：圆角图片
3、img-circle：圆形图片
4、img-thumbnail：缩略图片
使用方法：
使用方法非常简单，只需要在<img>标签上添加对应的类名，如下代码：
<img alt="140x140" src="http://placehold.it/140x140"><img class="img-rounded" alt="140x140" src="http://placehold.it/140x140"><img class="img-circle" alt="140x140" src="http://placehold.it/140x140"><img class="img-thumbnail" alt="140x140" src="http://placehold.it/140x140"><img class="img-responsive" alt="140x140" src="http://placehold.it/140x140"><button class="btn btn-primary btn-lg btn-block" type="button">大型按钮.btn-lg</button> <button class="btn btn-primary btn-block" type="button">正常按钮</button><button class="btn btn-primary btn-sm btn-block" type="button">小型按钮.btn-sm</button><button class="btn btn-primary btn-xs btn-block" type="button">超小型按钮.btn-xs</button>
二十四、
200个icon：
这里说的图标就是Web制作中常看到的小icon图标，可以说这些小icon图标是一个优秀Web中不可缺少的一部分，起到画龙点睛的效果。在Bootstrap框架中也为大家提供了近200个不同的icon图片，而这些图标都是使用CSS3的@font-face属性配合字体来实现的icon效果。
二十五、bootstrap导航栏的内容
<!-- 按照顺序对应上面的图依次排列下来的代码 -->
<!-- 基础导航 通过加上nav-tabs --><ul class="nav nav-tabs"> <li><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li><a href="##">Responsive</a></li></ul><!-- 自适应导航 --><ul class="nav nav-tabs nav-justified"> <li class="active"><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li><a href="##">Responsive</a></li></ul><br/><!-- 嵌套的导航栏 --><ul class="nav nav-pills"> <li class="active"><a href="##">首页</a></li> <li class="dropdown"> <a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="##">CSS3</a></li> … </ul> </li> <li><a href="##">关于我们</a></li></ul><!-- 多级导航 如果需要置顶到顶部就是要在第一个dic里面的class中加入 navbar-fixed-top --><div class="navbar "><div class="navbar-inner"><div class="container-fluid"><a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a><a href="#" class="brand">Project name</a><div class="nav-collapse"><ul class="nav"><li class="active"><a href="#">Home</a></li><li><a href="#">Link</a></li><li><a href="#">Link</a></li><li><a href="#">Link</a></li><li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<b class="caret"></b></a><ul class="dropdown-menu"><li class="dropdown-submenu"><a href="#">More options</a><ul class="dropdown-menu"><li><a href="#">Second level link</a></li><li><a href="#">Second level link</a></li><li><a href="#">Second level link</a></li><li><a href="#">Second level link</a></li><li class="dropdown-submenu"><a href="#">Second level link</a><ul class="dropdown-menu"><li><a href="#">3333333333</a></li></ul></li></ul></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li class="divider"></li><li class="nav-header">Nav header</li><li><a href="#">Separated link</a></li><li><a href="#">One more separated link</a></li></ul></li></ul><form action="" class="navbar-search pull-left"><input type="text" placeholder="Search" class="search-query span2"></form><ul class="nav pull-right"><li><a href="#">Link</a></li><li class="divider-vertical"></li><li class="dropdown"><a class="#" href="#">Menu</a></li></ul></div><!-- /.nav-collapse --></div></div></div><hr /><ul class="nav nav-pills"><li class="active"><a href="#">Regular link</a></li><li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown<b class="caret"></b></a><ul class="dropdown-menu" id="menu1"><li class="dropdown-submenu"><a href="#">More options</a><ul class="dropdown-menu"><li><a href="#">Second level link</a></li><li><a href="#">Second level link</a></li><li><a href="#">Second level link</a></li><li><a href="#">Second level link</a></li><li><a href="#">Second level link</a></li></ul></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li class="divider"></li><li><a href="#">Separated link</a></li></ul></li><li class="dropdown"><a href="#">Menu</a></li><li class="dropdown"><a href="#">Menu</a></li></ul>
Bootstrap笔记合集
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。