关键词：
Bootstrap是Twitter推出的一个由动态CSS语言Less写成的开源CSS/HTML框架(同时提供Sass 移植版代码)。Bootstrap提供了全面的基本及组件样式并自带了13个jQuery插件（模态对话框、标签页、滚动条、弹出框等），可满足常用开发需要，而且还根据需要定制。另外，Bootstrap提供了优雅的HTML和CSS规范，使用者也可以参考学习。本文作者(jawidx)仅在结构层面对Bootstrap进行介绍。工具/原料
Bootstrap
全局样式
1
Bootstrap 中用到一些 HTML元素和CSS属性需要将页面设置为 HTML5 文档类型，即在页面顶部添加“<!DOCTYPE html>”
2
布局容器：Bootstrap 需要为页面内容和栅格系统包裹一个 .container或container-fluid（占据全部视口viewport的容器）容器。
3
栅格系统，Bootstrap 提供了一套最多12列的流式栅格系统，通过 .row表示行 和 .col-xs-4 这种表示宽度的列快速创建栅格布局。
4
Bootstrap 排版、链接样式设置了基本的全局样式。
font-size 设置为 14px，line-height 设置为 1.428。
<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
END
基础样式
1
【排版】，
1. 标题，可以用来.h1 到 .h6 类给内联属性的文本赋予标题样式，标题内通过<small> 标签或带.small 类的元素标记副标题。
主体文本：.lead 类让段落突出显示。
2. 内联文本，使用<mark> 标签表示标注文本，<del>删除，<s>无用，<ins>插入，<u>下划线，<small>小号（父容器字体大小的 85%），<strong>着重，<em>斜体。
3. 文本对齐类，text-left，text-center，text-right，text-justify，text-nowrap
4. 文本大小写类，text-lowercase，text-uppercase，text-capitalize
5. 缩略语类，为 <abbr> 元素设置 title属性并使用.initialism 类让 font-size 变得稍微小些。例：<abbr title="attribute" class="initialism">attr</abbr>
6. 地址，以日常使用的格式呈现，在行结尾加 <br> 保留需要的样式即可。
7. 引用，将 HTML 元素包裹在 <blockquote> 中即可表现为引用样式。对于直接引用，建议用 <p> 标签。
8. 列表，list-unstyled类移除默认 list-style 样式和左侧外边距的一组元素（只针对直接子元素）。list-inline类通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。dl-horizontal类让 <dl> 内的短语及其描述排在一行。
2
【代码】
<code> 标签包裹内联样式的代码片段，
<kbd> 标签标记用户通过键盘输入的内容，
<pre> 展示代码块 。可用pre-scrollable 类设置最高350px带垂直滚动条。
<var> 标签标记变量，
<samp> 标签标记程序输出的内容。
3
【表格】
.table 类指定基本样式，
.table-striped 条纹样式，
.table-bordered 类为边框样式，
.table-hover 类带鼠标悬停样式，
.table-condensed 类紧凑样式。
状态类(行或单元格设置颜色)：active，success，info，warning，info。
将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其
响应式表格: 会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。
4
【表单】
1. 基本实例，所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
不要讲表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。
form-group，input-group，control-group，
2. 内联表单，<form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。
在内联表单中单选/多选框控件的宽度设置为 width: auto;
如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为label 设置 .sr-only 类将其隐藏。
3. 水平排列的表单
通过为表单添加 .form-horizontal 类改变 .form-group 的行为，使其表现为栅格系统中的行（row）
4. 多选和单选框
.radio、.radio-inline、.checkbox、.checkbox-inline 。
5. 静态控件
水平布局的表单中，如需将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static类即可。
6. 控件状态
.disabled类禁用控件，为<fieldset> 设置disabled 时则禁用包含的所有控件。
a标签不受此类影响。
readonly 属性可以禁止用户输入
.has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。
你还可以针对校验状态为输入框添加额外的图标（注意依赖于label标签）。只需设置相应的 .has-feedback 类并添加正确的图标即可。
7. 控件尺寸
通过 .input-lg .input-sm类似的类可以为控件设置高度，通过 .col-lg-* 类似的类可以为控件设置宽度
通过添加 .form-group-lg 或 .form-group-sm 类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。
用栅格系统中的列（column）包裹输入框或其任何父元素，都可很容易的为其设置宽度。
8. 辅助文本
help-block类，针对表单控件的“块（block）”级辅助文本。
5
【按钮】
1. 基本样式，btn、btn-default、btn-primary、btn-success、btn-info、btn-warning、btn-danger、active
2. 展现形式，btn-link、btn-block、close
3. 尺寸样式，.btn-lg、.btn-sm 、.btn-xs 。
可通过 <a>、<button> 或 <input> 元素应用按钮类，但建议用 <button> 元素来获得在各个浏览器上获得相匹配的绘制效果。
6
【图片】
图片形状，img-rounded，img-circle，img-thumbnail，IE8 不支持 CSS3 中的圆角属性。
7
【辅助】
text-muted、text-primary、text-success、text-info、text-warning、text-danger
bg-primary、bg-success、bg-info、bg-warning、bg-danger、
三角符号，caret
浮动
居中
END
组件样式
1
【图标】
200个来自 Glyphicon Halflings 的字体图标，
图标类只能应用在空元素上，且不可与其它组件联合使用。
<span class="glyphicon glyphicon-search"></span>
2
【菜单】
将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里
菜单对齐：默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐
菜单分组：dropdown-header表描述项，.disabled 表禁用项
向上弹出： .dropup 类就能使触发的下拉菜单朝上方打开
3
【按钮组】
按钮组.btn-group，通过.btn-group-* 指定组中按钮尺寸。
按钮栏.btn-toolbar
钮垂直堆叠排列显示btn-group-vertical
两端对齐排列的按钮组btn-group-justified
4
【导航】
标签页.nav-tabs 类依赖 .nav 基类。
胶囊式标签页.nav-pills 类，添加 .nav-stacked 类改为垂直堆叠。
.nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。
navbar navbar-default
对于不包含在 <form> 中的 <button> 元素，加上 .navbar-btn 后，可以让它在导航条里垂直居中。
将表单放置于 .navbar-form 之内可以呈现很好的垂直对齐，
.navbar-text
.navbar-link
.navbar-left 和 .navbar-right 工具类让导航链接、表单、按钮或文本对齐。
.navbar-fixed-top 类可以让导航条固定在顶部
.navbar-fixed-bottom 类可以让导航条固定在底部
.navbar-static-top 类可让导航条随着页面向下滚动而消失。
.navbar-inverse 类可以改变导航条的外观。
breadcrumb 创建带有层次的导航结构（面包屑）。
5
【分页】
pagination，并根据情况对页码使用.disabled 类、 .active 类。
.pagination-lg 或 .pagination-sm 类提供了额外可供选择的尺寸。
pager上一页和下一页的简单翻页。并可通过previous，next类标示。
6
【标签】
label标签基类，可通过label-default, label-primary, label-success, label-info, label-warning, label-danger改变标签的外观。
badge，可以很醒目的展示新的或未读的信息条目。
7
【其它】
缩略图
提示框
进度条
媒体对象等
END
定制样式
1
BootStrap提供了根据自己需要的组件及jquery插件进行定制，使用者也可以直接修改Less源码。
END
总结
1
本篇经验仅从全局简单介绍Bootstrap的内容，细节部分并不具体，Bootstrap的使用非常灵活，可以对各种组件进行合并使用（如：为标签页项 添加带下拉菜单），建议使用过程中实时参考官方文档，官方文档有更详细的下载及使用说明，针对具体样式有直观样例，而且有丰富的主题案例。 参考技术A /********************
* 取窗口滚动条高度
******************/
function getScrollTop()
var scrollTop=0;
if(document.documentElement&&document.documentElement.scrollTop)
scrollTop=document.documentElement.scrollTop;
else if(document.body)
scrollTop=document.body.scrollTop;
return scrollTop;
如何能快速知道当前网页滚动条的高度？有工具吗？
快速知道当前网页滚动条的高度：用jquery可以很方便获得你要的数据。获取浏览器显示区域的高度：$(window).height();获取浏览器显示区域的宽度：$(window).width();获取页面的文档高度：$(document).height();获取页面的文档宽度：$(document)... 查看详情
js或者jquery如何取得横向和纵向滚动条的最大可以滚动的值？
如题，如何获取界面滚动条最大可以滚动的值？需要准备的材料分别有：电脑、html编辑器、浏览器。1、首先，打开html编辑器，新建html文件，例如：index.html，并引入jquery。2、在index.html中的<script>标签，输入jquery代码：$('... 查看详情
如何检测 Bootstrap 模态滚动条的位置？
】如何检测Bootstrap模态滚动条的位置？【英文标题】：HowtodetectpositionoftheBootstrapmodalscrollbar?【发布时间】：2017-03-2223:48:20【问题描述】：我正在使用JQuery和Bootstrap，并且我正在使用ajax请求加载模式，因此内容将在模式内动态加... 查看详情
jquery如何获取元素的滚动条高度等实现代码
参考技术A主要功能：获取浏览器显示区域（可视区域）的高度：$(window).height();获取浏览器显示区域（可视区域）的宽度：$(window).width();获取页面的文档高度$(document).height();获取页面的文档宽度：$(document).width();浏览器当前窗口... 查看详情
设置滚动条的滚动高度，定位滚动条的位置
设置位置：使用 document.body.scrollTop=400;document.documentElement.scrollTop//（chrome浏览器不支持，使用document.body.scrollTop ）获取滚动条的高度就用两者的和scrollHeight= document.documentElement.scrollTop+ doc 查看详情
js获取浏览器宽度高度（整理）(代码片段)
在获取浏览器宽度的时候，许多时候需要考虑滚动条的存在。一般情况作为前端获取浏览器宽度，主要是指获取body的宽度，可操作的可视范围宽度。一、使用JQuery获取浏览器宽度重点，jquery获取的宽度=浏览器的可视宽度-滚动条... 查看详情
如何获取浏览器的滚动条大小？
】如何获取浏览器的滚动条大小？【英文标题】：HowcanIgetthebrowser\'sscrollbarsizes?【发布时间】：2010-11-0211:36:27【问题描述】：如何在JavaScript中确定水平滚动条的高度或垂直滚动条的宽度？【问题讨论】：这里是来自JQueryDimens... 查看详情
Bootstrap 下拉菜单：删除滚动条
】Bootstrap下拉菜单：删除滚动条【英文标题】：BootstrapDropDownMenu:RemoveScrollbar【发布时间】：2015-09-2606:24:41【问题描述】：我正在关注GitHub-Repo。当窗口宽度减小时，导航栏折叠并变为带有滚动条的下拉菜单（用于宽度和高度）。... 查看详情
如何在winforms文本框中获取默认垂直滚动条的位置
】如何在winforms文本框中获取默认垂直滚动条的位置【英文标题】：Howtogetthepositionofthedefaultverticalscrollbarinwinformstextbox【发布时间】：2021-11-2417:14:55【问题描述】：我需要在winforms文本框中获取默认垂直滚动条的位置。到目前为止... 查看详情
Bootstrap：如何禁用垂直滚动条？
】Bootstrap：如何禁用垂直滚动条？【英文标题】：Bootstrap:howtodisableverticalscrollbar?【发布时间】：2013-07-1714:11:17【问题描述】：当我的模态弹出窗口打开时，它会在浏览器窗口的右侧添加一个垂直滚动条。我该如何禁用它？我认... 查看详情
不带固定高度的滚动条/带滚动条的动态高度
】不带固定高度的滚动条/带滚动条的动态高度【英文标题】：Scrollbarwithoutfixedheight/Dynamicheightwithscrollbar【发布时间】：2012-06-1409:36:40【问题描述】：我有这个HTML结构：<divid="body"><divid="head"><p>Dynamicheightwithoutscrollbar&... 查看详情
HTML 水平滚动条的高度是多少？
】HTML水平滚动条的高度是多少？【英文标题】：HTMLWhatistheheightofahorizontalscrollbar?【发布时间】：2010-10-0205:14:04【问题描述】：对于叠加层，我需要知道垂直滚动条的高度。我能做些什么来获得这个价值？FireFox和InternetExplorer的高... 查看详情
关于滚动条的操作(代码片段)
...：https://www.cnblogs.com/wangtian0711/p/7027853.html clientWidth：获取对象的内容可视区域的宽度，即clientWidth=width+padding，不包括滚动条。clientHeight：获取对象的内容可视区域的高度，即clientHeight=height+padding，不包括滚动条。scrollWidth：... 查看详情
JScrollPane 中的 JTable：禁用滚动条的最佳高度
】JScrollPane中的JTable：禁用滚动条的最佳高度【英文标题】：JTableinsideJScrollPane:bestheighttodisablescrollbars【发布时间】：2012-12-0721:49:22【问题描述】：我正在使用以下代码在JScrollPane内创建JTable以显示列标题JTablewon\'tshowcolumnheadersStri... 查看详情
为没有滚动条的 100% 高度网格设置边距或填充 [重复]
】为没有滚动条的100%高度网格设置边距或填充[重复]【英文标题】：settingamarginorpaddingfora100%heightgridwithoutscrollbars[duplicate]【发布时间】：2021-08-3021:05:17【问题描述】：我有一个网格布局。我想在它周围添加一个5px的边距，但这样... 查看详情
如何让bootstrap表格自动出现水平滚动条
如何让bootstrap表格自动出现水平滚动条我没试过不知道有没有用，你审查元素找到该下拉列表的标签，如果是div，可以加style="overflow:scroll"，试试看。？我刚试了下，可以。应该可以找到这个吧，然后加样式。<ulclass="dropdown-men... 查看详情
bootstrap滚动监听
滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加 .active class。<!DOCTYPEhtml><html><head><metach... 查看详情
根据滚动条的高度来做相应的动作
<scripttype="text/javascript"> jQuery(document).scroll(function(){ varscreens=jQuery(document).scrollTop(); if(screens>800){ jQuery(‘#xiangqingye_ce_img_hide‘).show(); }else{ jQuery 查看详情