jQuery 模态窗口插件帮助网站开发人员显示网页中的特定内容，让用户聚焦到这个地方。模态窗口是嵌入到当前网页中，不用重定向到新网页的弹出窗口。这种技术可以用在图像画廊，电子商务网站，登陆框，电子邮件注册，表单等场合。jQuery Modal（模态窗口）插件可以让用户专注于内容。
　　在这篇文章中，我们收集了15款最好的
模态窗口插件，将帮助你在你的
应用中实现模式窗口。如果你知道任何其它的 jQuery 模态插件，不要忘记在下面发表评论，我们将非常乐意倾听您的意见。
您可能感兴趣的相关文章
Remodal 是一个扁平化，响应式，轻量，快速，容易定制的模态窗口插件。使用声明式状态符号和哈希（Hash）跟踪。所有现代的浏览器都支持。您可以轻松地定义为模态窗口定义背景容器（如模糊效果）。
Pop Easy 这款&&插件用于快速创建定制的模态窗口，非常轻量，支持显示任何的&&元素，包括视频。默认的模态窗口有一个好看的界面，你可以根据需要自己修改。
jQuery Popdown Plugin
这是一个简单的模态弹出框插件。在后台加载完
之后，会从从浏览器窗口顶部弹出。是加载网页表单，内容，用户的反馈信息，多媒体和其他任何风格的内容的简单方法。
jQUery Custombox
Custombox 是基于 CSS3 过渡功能实现的&&模式窗口插件。有许多效果，如淡入，滑动，模糊，翻转，旋转等等很多效果。
Simple Modal
Simple Modal 是一个用来创建模式窗口的小插件。它可以被用来显示提示框或确认框，只需要几行代码。
Boxer 是一个用来实现灯箱式模态的图片展示的快速和简单的方法，可以使用内嵌的内容或 iframe 内容。
jQuery Fluxo Modal
jQuery.fluxoModal 这款
插件用于实现类似于 Lightgox 的效果。它可以突出显示任何类型的 HTML 元素，使用 HTML5 画布，CSS3 动画实现模糊背景效果，在低版本的 IE 浏览器优雅降级。
Reveal 是一款很棒的
模态弹出窗口插件，因为它很容易实现，兼容现代浏览器。设置 Reveal 模态弹出只需要三个简单的步骤。
jQuery SuperBox
jQuery Superbox！是另外一款 &弹窗插件，它允许你显示窗口的灯箱效果，可以显示图片，图片画廊，外部页面，一个页面元素，甚至 Ajax 加载内容。
Bootstrap Image Gallery
Bootstrap Image Gallery 支持和触摸，响应式的，可定制的图像和视频画廊。它使用
框架的模态对话框显示图像和视频，支持鼠标和键盘导航，过渡效果，支持全屏和点播内容。
Magnific Popup
Magnific Popup&是一个免费的响应式的
灯箱插件，专注于性能，为用户在任何设备提供最佳体验。多数灯箱插件需要您通过 JS 选项来定义它的大小，这款插件不需要，你可以使用相对单位（比如 em）或者借助 CSS 媒体查询。
Avgrund.js
Avgrund.js 这款&&插件用于模态框和弹出窗口。它使用有趣的技术在弹出窗口和页面之间显示深度，充满立体感。适用于所有的现代浏览器，并优雅地降级支持那些不支持 CSS 过渡和转换的浏览器。
Lean Modal
LeanModal 是一个简单的&&插件，用于实现模态窗口。它是专为小的对话框，提示和面板等需要使用模式窗口的场合打造的。专门用来处理隐藏的内容，并且不应用任何样式给目标元素。
The Modal 这款&&插件用来实现类似 Facebook 和 vk.com 的照片模态的模态框。您可以通过使用自定义数据填充它，按你想要的方式，支持 ESC 键关闭（默认启用）。
ModalBox.js
modalBox.js 是一款轻量的模态窗口插件，只有最常用的功能和选项。它的整体大小大约为5.3kb的（压缩后2.5kb）。您可以根据您的需要轻松地扩展它。
您可能感兴趣的相关文章
英文链接：
编译来源：
阅读(...) 评论()如何使用vue.js构造modal(弹窗)组件?
按照示例使用ponent 构造一个modal组件,包括模版,还有一些方法但只能在父层模版里预先加上&modal&&/modal&标签,才能正确渲染如果是动态添加&modal&标签是没有效果问题就是,构造一个modal组件,如何在需要的时候动态异步的插入到dom里
按投票排序
为什么一定要异步插入？其实以前也有一些用户跟我纠结过这个问题，他们觉得一定要在需要的时候创建这个组件才是符合他们思维的做法。在我看来，这是没有理解『状态驱动的界面』的一种表现。传统的命令式 (Imperative) 的思维写出来的代码：$('.open-modal').on('click', function () {
var modal = new Modal()
modal.$appendTo('body')
modal.open()
// 在 modal 内部还要处理关闭、销毁自身的逻辑
状态驱动的思维写出来的代码：this.showModal = true
this.showModal = false
哪个干净，哪个容易理解、容易测试、容易维护？从模板的角度来看：在父模板里直接写入 &modal& 标签，那么这个 modal 渲染的位置是清晰明确的，你看一眼父模板就知道，哦，这里可能会有个 modal，也就是说，你的模板描述了最终可能渲染出来的 DOM 结构。但命令式思维下异步添加的 modal，你看模板的时候是根本看不见的，你的模板和最终的 DOM 结构没有可靠的映射关系，因为你完全可能随手把 modal 插到任何地方。你觉得这两者哪个更容易维护？题主可能会觉得总是渲染 &modal& 不太效率。官网示例里面的 modal 用的是 v-show，换成 v-if 就好了。v-if 和 v-show 的区别在于 v-if 是真正的 conditional rendering，如果初始状态是 false，它什么都不会干。另外一个情况是，我们可能需要在一个嵌套了很多层的子组件里面触发 modal。这种情况下，你应该把 modal 放在根组件里面，然后从子组件触发一个事件上去。最后我得说，其实『状态驱动』才是 Vue 的精髓所在。
最近也遇到需要实现modal，我把modal做成了一个组件（希望尤大大不要看到，我这多此一举了，放在根组件就行了），放在app中，其他组件需要弹窗的时候向app组件派发消息，app接收到之后的广播消息，modal监听到之后就将他的show属性设置为true就触发了。 self.$dispatch('toModal', {
word:"取消成功！",
subword:'我们将会在2个工作日内退还到您的支付账户',
todo:function(){}
export default {
show: false,
word: "important",
subword:"discription",
todo: function(){}
confirm:function(){
this.todo();
this.show = false;
this.todo = function(){};
close:function(){
this.show = false;
ready () {
this.$on("Modal", function(modal) {
this.show =
this.word = modal.word;
this.subword = modal.subword;
this.todo = modal.todo;
&template&
&div v-show="show" class="modal-bg"&
&div class="modal-box"&
&button @click="close" class="modal-close"&&span class="icon-remove-sign"&&/span&&/button&
&div class="modal-word"&&h4&{{word}}&/h4&&p&{{subword}}&/p&&/div&
&div class="modal-btn"&&button @click="confirm" class="c-block-btn"&确定&/button&&/div&
&/template&
已有帐号？
无法登录？
社交帐号登录起步 & Bootstrap
Bootstrap提供了几种可以帮你快速上手的方式，每种方式针对具有不同技能等级的开发者和不同的使用场景。继续阅读下面的内容，看看哪种方式适合你的需求吧。
编译后的CSS、JS和字体文件
获取Bootstrap最快速的方式就是下载经过编译和压缩的CSS、JavaScript文件，另外还包含字体文件。但是不包含文档和源码文件。
额外的下载渠道
从GitHub可以直接下载到Bootstrap最新版本的LESS和JavaScript源码。
访问我们的Github源码库，你可以克隆整个项目，或者fork整个项目到你自己的账号。
通过工具安装
通过可以安装并管理Bootstrap的样式、JavaScript文件和文档。
bash$ bower install bootstrap
使用国外的CDN加速服务
为Bootstrap免费提供了CDN加速服务。使用提供的链接即可引入Bootstrap文件。
&!-- 最新 Bootstrap 核心 CSS 文件 --&
&link rel=&stylesheet& href=&///bootstrap/3.0.3/css/bootstrap.min.css&&
&!-- 可选的Bootstrap主题文件（一般不用引入） --&
&link rel=&stylesheet& href=&///bootstrap/3.0.3/css/bootstrap-theme.min.css&&
&!-- 最新的 Bootstrap 核心 JavaScript 文件 --&
&script src=&///bootstrap/3.0.3/js/bootstrap.min.js&&&/script&
编译Bootstrap的LESS源码文件
如果你下载的是源码文件，那就需要将Bootstrap的LESS源码编译为可以使用的CSS代码，目前，Bootstrap官方仅支持编译工具，这是Twitter提供的基于构建的编译、代码检测工具。
Bootstrap提供了两种形式的压缩包，在下载下来的压缩包内可以看到以下目录和文件，这些文件按照类别放到了不同的目录内，并且提供了压缩与未压缩两种版本。
Bootstrap依赖jQuery
请注意，所有 JavaScript 插件都依赖 jQuery，因此jQuery必须在Bootstrap之前引入， 就像在 中所展示的一样。 中列出了Bootstrap所支持的jQuery版本。
预编译Bootstrap版本
下载压缩包之后，将其解压缩到任意目录即可看到以下目录结构：
bootstrap/
├── css/
├── bootstrap.css
├── bootstrap.min.css
├── bootstrap-theme.css
└── bootstrap-theme.min.css
├── js/
├── bootstrap.js
└── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff
这是最基本的Bootstrap组织形式：未压缩版的文件可以在任意web项目中直接使用。我们提供了压缩(bootstrap.min.*)与未压缩 (bootstrap.*)的CSS和JS文件。字体图标文件来自于Glyphicons。
Bootstrap 源码
Bootstrap源码包含了预先编译的CSS、JavaScript和图标字体文件，并且还有LESS、JavaScript和文档的源码。具体来说，主要文件组织结构如下：
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
├── css/
├── js/
└── fonts/
├── docs-assets/
├── examples/
└── *.html
less/、js/ 和 fonts/ 分别包含了CSS、JS和字体图标的源码。dist/ 目录包含了上面所说的预编译Bootstrap包内的所有文件。docs-assets/、examples/ 和所有 *.html 文件是文档的源码文件。除了前面提到的这些文件，还包含package定义文件、许可证文件等。
使用以下给出的这份超级简单的HTML模版，或者修改。我们强烈建议你对这些案例按照自己的需求进行修改，而不要简单的复制、粘贴。
拷贝并粘贴下面给出的HTML代码，这就是一个最简单的Bootstrap页面了。
&!DOCTYPE html&
&title&Bootstrap 101 Template&/title&
&meta name=&viewport& content=&width=device-width, initial-scale=1.0&&
&!-- Bootstrap --&
&link rel=&stylesheet& href=&/twitter-bootstrap/3.0.3/css/bootstrap.min.css&&
&!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --&
&!-- WARNING: Respond.js doesn't work if you view the page via file:// --&
&!--[if lt IE 9]&
&script src=&/html5shiv/3.7.0/html5shiv.min.js&&&/script&
&script src=&/respond.js/1.3.0/respond.min.js&&&/script&
&![endif]--&
&h1&Hello, world!&/h1&
&!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&
&script src=&/jquery/1.10.2/jquery.min.js&&&/script&
&!-- Include all compiled plugins (below), or include individual files as needed --&
&script src=&/twitter-bootstrap/3.0.3/js/bootstrap.min.js&&&/script&
下面这些案例都是基于上面给出的基本模版并结合Bootstrap组件制作的。后续我们还会讲解如何定制这些组件。
只有一些最基本的东西：引入了未压缩版的CSS和JavaScript文件，页面只有一个container容器。
多个栅格系统布局的案例展示。
Build around the jumbotron with a navbar and some basic grid columns.
Narrow jumbotron
Build a more custom page by narrowing the default container and jumbotron.
Super basic template that includes the navbar along with some additional content.
置于页面顶部的导航条
Super basic template with a static top navbar along with some additional content.
固定位置的导航条
Super basic template with a fixed top navbar along with some additional content.
基本的登录页面，使用到了自定义的表单布局和设计。
页脚固定在底部
将固定高度的页脚钉在页面可视区域的最下方。
Sticky footer with navbar
Attach a footer to the bottom of the viewport with a fixed navbar at the top.
两端对齐的导航条
Create a custom navbar with justified links. Heads up!
Build a toggleable off-canvas navigation menu for use with Bootstrap.
定制了导航条和轮播组件，并添加了一些自定义的新组件。
非响应式的Bootstrap
按照我们给出的可以很容易禁用Bootstrap的响应式特性。
Bootstrap主题
页面额外加载了一套Bootstrap主题，加强了页面的视觉效果
Bootstrap会自动帮你针对不同的屏幕尺寸调整你的页面，使其在个尺寸屏幕上表现良好。下面我们列出了如何禁用这一特性，就像这个页面一样：。
禁用响应式布局的步骤
移除提到的（或者不要添加）viewport &meta&。
通过为.container设置一个width值从而覆盖框架的默认width设置，例如width: 970px !。请确保这些设置全部放在默认的Bootstrap CSS后面。注意，你也可以略去!important 。
如果使用了导航条，需要移除所有导航条的折叠和展开行为。
对于栅格布局，额外增加.col-xs-* classe或替换掉.col-md-*和.col-lg-*。不要担心，针对超小屏幕设备的栅格系统能够在所有分辨率的环境下展开。
针对IE8需要额外引入Respond.js文件 （由于仍然有媒体查询代码，因此还需要做处理）。这样就禁用了Bootstrap对小屏幕设备的响应式支持。
禁用响应式特性的Bootstrap模版
我们已经按照上面的步骤制作了一份案例。仔细阅读其源码并对照上面的步骤实践一下吧。
Bootstrap 3并不向后兼容Bootstrap v2.x。下面章节列出的内容可以作为从v2.x升级到v3.0的通用指南。如果需要更多信息，可以查看这篇官方博文。
class的主要变化
表格中列出了v2.x 和 v3.0之间样式表的变更。
Bootstrap 2.x
Bootstrap 3.0
.container-fluid
.container
.row-fluid
.col-md-offset-*
.navbar-brand
.nav-collapse
.navbar-collapse
.nav-toggle
.navbar-toggle
.btn-navbar
.navbar-btn
.hero-unit
.jumbotron
.glyphicon .glyphicon-*
.btn .btn-default
.btn-small
.btn-large
.alert-error
.alert-danger
.visible-phone
.visible-xs
.visible-tablet
.visible-sm
.visible-desktop
Split into .visible-md .visible-lg
.hidden-phone
.hidden-xs
.hidden-tablet
.hidden-sm
.hidden-desktop
Split into .hidden-md .hidden-lg
.input-small
.input-large
.control-group
.form-group
.control-group.warning .control-group.error .control-group.success
.form-group.has-*
.checkbox.inline .radio.inline
.checkbox-inline .radio-inline
.input-prepend .input-append
.input-group
.input-group-addon
.img-polaroid
.img-thumbnail
ul.unstyled
.list-unstyled
.list-inline
.text-muted
.label .label-default
.label-important
.label-danger
.text-error
.text-danger
.table .error
.table .danger
.progress-bar
.progress-bar-*
.accordion
.panel-group
.accordion-group
.panel .panel-default
.accordion-heading
.panel-heading
.accordion-body
.panel-collapse
.accordion-inner
.panel-body
我们新增了一些页面元素，同时也对一些原有的元素进行了修改。下面列出了新增或更新之后的样式表。
.panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
List groups
.list-group .list-group-item .list-group-item-text .list-group-item-heading
Glyphicons
.glyphicon
.jumbotron
Extra small grid (&768px)
Small grid (&768px)
Medium grid (&992px)
Large grid (&1200px)
Responsive utility classes (&1200px)
.visible-lg .hidden-lg
.col-sm-offset-* .col-md-offset-* .col-lg-offset-*
.col-sm-push-* .col-md-push-* .col-lg-push-*
.col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Input groups
.input-group .input-group-addon .input-group-btn
Form controls
.form-control .form-group
Button group sizes
.btn-group-xs .btn-group-sm .btn-group-lg
Navbar text
.navbar-text
Navbar header
.navbar-header
Justified tabs / pills
.nav-justified
Responsive images
.img-responsive
Contextual table rows
.success .danger .warning .active
Contextual panels
.panel-success .panel-danger .panel-warning .panel-info
.modal-dialog .modal-content
Thumbnail image
.img-thumbnail
Well sizes
.well-sm .well-lg
Alert links
.alert-link
被移除的class
以下列出的页面元素已经在v3.0版本中被去除或修改。
从2.x版本中去除
3.0版本中对应的元素
Form actions
.form-actions
Search form
.form-search
Form group with info
Fluid container
.container-fluid
.container (no more fixed grid)
.row-fluid
.row (no more fixed grid)
Controls wrapper
Controls row
.controls-row
.row or .form-group
Navbar inner
.navbar-inner
Navbar vertical dividers
.navbar .divider-vertical
Dropdown submenu
.dropdown-submenu
Tab alignments
.tabs-left .tabs-right .tabs-below
.nav-list .nav-header
No direct equivalent, but
are similar.
Other changes in v3.0 are not immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and our mobile first approach. Here's a partial list:
有些v3.0中的多修改并不能从表面直接看到。我们对基本class、关键样式和行为都进行了调整，使其更灵活并且适应移动设备优先这一目标。下面是一个部分列表：
默认情况下，文本类型的表单控件只被赋予了最少的样式。将.form-control class赋予这些控件可以使其具有高亮（在获得焦点时）和圆角样式。
添加了.form-control class的文本表单控件默认预设为100%宽度。用&div class="col-*"&&/div&包裹输入框（input）即可控制其宽度。
.badge不再保留状态相关的class（-success、-primary等）。
.btn必须和 .btn-default一起使用才能获得"默认"样式的按钮。
.container和.row目前是基于百分比定义的宽度。
默认情况下，图片不具有由响应式特性，需要使用.img-responsive才能让&img&实现响应式可变大小。
图标，.glyphicon，演变为字体图标。每个图标都需要一个基本class和一个代表特定图标的class（例如， .glyphicon .glyphicon-asterisk）
与输入组件被移除，建议使用组件。
模态框组件的HTML结构发生了很大的改变。.modal-header、.modal-body和.modal-footer部分目前包含在了.modal-content和.modal-dialog中，为的是增强移动设备上的样式和行为特性。
The HTML loaded by the remote modal option is now injected into the .modal instead of into the .modal-body. This allows you to also easily vary the header and footer of the modal, not just the modal body.
JavaScript事件目前全部都应用了命名空间。例如，模态框的"show"事件的名称为'show.bs.modal'。标签页组件的"shown"事件名称为'shown.bs.tab'，还有很多其它事件名称也是类似。
可以在社区网站获取更多升级至v3.0的信息和代码示例。
Bootstrap的目标是在最新的桌面和移动浏览器上有最佳的表现，也就是说，在较老旧的浏览器上可能会导致某些组件表现出的样式有些不同，但是功能是完整的。
被支持的浏览器
特别注意，我们坚决支持这些浏览器的最新版本：
Chrome (Mac、Windows、iOS和Android)
Safari (只支持Mac和iOS版，Windows版已经基本死掉了)
Firefox (Mac、Windows)
Internet Explorer
Opera (Mac、Windows)
Bootstrap在Chromium、Linux版Chrome、Linux版Firefox和Internet Explorer 7上的表现也是很不错的，虽然我们不对其进行官方支持。
Internet Explorer 8 和 9
Internet Explorer 8 和 9 是被支持的，然而，你要知道，很多CSS3属性和HTML5元素 -- 例如，圆角矩形和投影 -- 是肯定不被支持的。另外，Internet Explorer 8 需要配合才能实现对媒体查询（media query）的支持。
Internet Explorer 8
Internet Explorer 9
border-radius
box-shadow
支持，需带 -ms 前缀
transition
placeholder
请参考以获取详细的CSS3和HTML5特性在各个浏览器上的支持情况。
Internet Explorer 8 和 Respond.js
在开发环境和生产（线上）环境需要支持 Internet Explorer 8 时，请务必注意下面给出的警告。
Respond.js 和 跨域（cross-domain） CSS 的问题
如果 Respond.js 和 CSS 文件被放在不同的域名或子域名下面（例如，使用CDN）时需要一些额外的设置。请参考
获取详细信息。
Respond.js 和 file://
由于浏览器的安全规则问题，Respond.js 不能通过 file:// 协议（打开本地HTML文件所用的协议）访问的页面上发挥正常的功能。如果需要测试IE8下面的响应式特性，必须用http服务器（例如apache、nginx）托管HTML页面才可以。请参考
获取更多信息。
Respond.js 和@import
Respond.js 不支持通过 @import 引入的CSS文件。例如，Drupal 一般被配置为通过 @import 引入CSS文件，Respond.js对其将无法起到作用。 请参考获取更多信息。
Internet Explorer 8 与 box-sizing
IE8不能完全支持box-sizing: border-与min-width、max-width、min-height或max-height一同使用。由于此原因，从Bootstrap v3.0.1版本开始，我们不再为.container使用max-width。
IE兼容模式
Bootstrap不支持IE的兼容模式。为了让IE浏览器运行最新的渲染模式，建议将此 &meta& 标签加入到你的页面中：
&meta http-equiv=&X-UA-Compatible& content=&IE=edge&&
此标签被加入到所有文档页面和案例页面中，以确保在每个被支持的IE浏览器中保持最好的页面展现效果。
Windows 8 中的 Internet Explorer 10 和 Windows Phone 8
Internet Explorer 10并没有将屏幕的宽度和视口（viewport）的宽度区别开，这就导致Bootstrap中的媒体查询并不能很好的发挥作用。为了解决这个问题，你可以引入下面列出的这段CSS暂时修复此问题：
@-ms-viewport
然而，这样做会导致Windows Phone 8 设备按照桌面浏览器的方式呈现页面，而不是较窄的"手机"呈现方式。为了解决这个问题，还需要加入以下CSS和JavaScript代码，直到微软修复此问题。
@-webkit-viewport
@-moz-viewport
@-ms-viewport
@-o-viewport
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement("style")
msViewportStyle.appendChild(
document.createTextNode(
"@-ms-viewport{width:auto!important}"
document.getElementsByTagName("head")[0].appendChild(msViewportStyle)
请查看以了解更多信息。
作为提醒，我们将其加入到Bootstrap文档中作为一个案例。
从OS X版Safari v6.1和iOS v7.0.1版Safari开始，Safari浏览器所包含的绘制引擎对于处理.col-*-1所对应的很长的百分比小数存在bug。也就是说，如果你在一行（row）之中定义了12个单独的列（.col-*-1），你就会看到这一行比其他行要短一些。我们目前解决不了这个问题()，但是你可以避免：
为最后一列添加.pull-right，将其暴力向右对齐
手动调整百分比数字，让其针对Safari表现更好（这比第一种方式更困难）
我们将会继续跟踪此问题，如果有更简易的解决方案，我们会更新代码。
模态框和移动设备
超出范围和滚动
&body&元素在iOS和Android上对overflow: hidden的支持很有限。结果就是，在这两种设备上的浏览器中，当你滚动屏幕超过模态框的顶部或底部时， &body&中的内容将开始随着滚动。
还有，如果你正在模态框上面输入内容 -- iOS还有一个绘制上的bug，当触发虚拟键盘之后，其不会更新fixed元素的位置。这里有几种解决方案，包括将fixed元素转变为position: absolute或启动一个定时器手工修正其位置。这些没有加入Bootstrap中，因此，需要由你自己选择最好的解决方案并加入到你的应用中。
浏览器缩放
页面缩放功能不可避免的会将某些组件搞得乱七八糟，不光是Bootstrap，整个互联网上的所有网站都是这样。针对具体问题，我们或许可以修复它（如果有必要的话，请先搜索一下你的问题，看看是否已有解决方案，然后在向我们提交issue）。然而，我们更倾向于忽略这些问题，由于这些问题除了一些hack手段，一般没有直接的解决方案。
虽然我们并不官方支持任何第三方插件，我们还是提供一些建议，帮你避免可能在你的项目中会出现的问题。
Box-sizing
某些第三方软件，包括Google地图和Google定制搜索引擎都会由于* { box-sizing: border- }设置而产生冲突，这一设置使padding不影响页面元素最终宽度的计算。更多信息请参考。
根据不同情况，你可能需要根据情况覆盖（第一种选择）或为所有区域设置（第二种选择）。
/* Box-sizing resets
* 为了避免Bootstrap设置的全局盒模型所带来的影响，可以重置单个页面元素或覆盖整个区域的盒模型。
* 两种选择 - 覆盖单个页面元素和重置整个区域 -
都可以纯CSS或LESS代码实现。
/* Option 1A: 通过CSS覆盖单个页面元素的盒模型 */
.element {
-webkit-box-sizing: content-
-moz-box-sizing: content-
box-sizing: content-
/* Option 1B: 通过使用Bootstrap LESS mixin覆盖单个页面元素的盒模型 */
.element {
.box-sizing(content-box);
/* Option 2A: 通过CSS重置整个区域 */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
-webkit-box-sizing: content-
-moz-box-sizing: content-
box-sizing: content-
/* Option 2B: 通过使用自定义的LESS mixin重置整个区域 */
.reset-box-sizing {
.box-sizing(content-box);
.element {
.reset-box-sizing();
Bootstrap遵循统一的web标准，另外，通过做一些少量的修改，还可以让使用AT的人群访问你的站点。
如果你的导航部分包含很多链接，并且在DOM结构上也是排列在主内容之前，那么建议在紧跟&body&标签之后添加一个Skip to main content的链接。
&a href=&#content& class=&sr-only&&Skip to main content&/a&
&div class=&container& id=&content&&
The main page content.
当标题嵌套时(&h1& - &h6&)，你的文档的主标题应该是&h1&。随后的标题逻辑上就应该使用&h2& - &h6&，这样，屏幕阅读器就可以构造出页面的内容列表。
Learn more at
Bootstrap遵守Apache 2许可证进行分发，版权归 Twitter2014所有。归结为以下几点：
自由的下载并使用部分或完整的Bootstrap框架，允许用于私人、公司内部或商业目的
将Bootstrap放入你自己创建的安装包或分发中
在没有合适的权力声明的情况下重新分发Bootstrap的任意部分
以任何方式（声明或暗示Twitter已经为你的分发背书）使用Twitter拥有的任何商标
以任何方式（声明或暗示你创建了此软件）使用任何Twitter拥有的商标
在包含了Bootstrap的分发中包含一份许可证文件
对所包含的Bootstrap进行准确的声明，其权利归属于Twitter
不需要你：
在分发中包含Bootstrap源码或你对其进行的任何修改
向Bootstrap项目提交你对Bootstrap的修改(虽然我们鼓励你提交并回馈)
Bootstrap完整的许可包含在。
如果你将Bootstrap作为你所依赖的工具库中的一个组成部分，那么，对Bootstrap进行定制将是非常好的方式。这样做能够确保将来的升级更容易。
一旦你将下载下来的Bootstrap样式和脚本文件引入到页面内，你就可以定制这些组件。这需要再创建一份新的样式表（可以是LESS，或者是CSS）用于覆盖Bootstrap中已经存在的样式。
到此，包含所需的Bootstrap组件和HTML内容即可创建生成页面所需的模版。
有几种不同程度的定制方式，但是，基本可以归为两类：轻量级定制和深度定制。这两种方式都有很多第三方案例可供参考。
我们将轻量级定制定义为外观层面的改变，比如修改现有Bootstrap组件的颜色和字体之类。 (由@mdo开发)就是一个很好地案例。下面就让我们看看这个网站是如何定制按钮.btn-ttc的。
使用Bootstrap自带的按钮，只需一个简单的class即可，即.btn。我们现在需要增加自己的class来为其做些修改，class名称为.btn-ttc。现在就可以花费比较少的时间做外观定制。
我们定制的按钮如下：
&button type=&button& class=&btn btn-ttc&&Save changes&/button&
注意.btn-ttc是如何添加到标准的.btn class中的。
在定制的样式表中，增加如下CSS代码：
/* 定制按钮
-------------------------------------------------- */
/* Override base .btn styles */
/* Apply text and background changes to three key states: default, hover, and active (click). */
.btn-ttc:hover,
.btn-ttc:active {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #007da7;
/* Apply the custom-colored gradients */
/* Note: you'll need to include all the appropriate gradients for various browsers and standards. */
.btn-ttc {
background-repeat: repeat-x;
background-image: linear-gradient(top, #009ED2 0%, #007DA7 100%);
/* Set the hover state */
/* An easy hover state is just to move the gradient up a small amount. Add other embellishments as you see fit. */
.btn-ttc:hover {
background-position: 0 -15
简单来说，就是从样式表代码中复制出需要修改的部分。
以下就是基本工作流程：
对于每个需要定制的元素，在Bootstrap CSS文件（未压缩版）中找到其出现的位置。
将需要定制的样式代码拷贝并粘贴到你自己的文件中。例如，定制导航条（navbar）的背景（background），只需要拷贝.navbar样式。
在你自己的样式表文件中修改拷贝过来的CSS代码。不需要增加新的class或使用!important属性。尽量简单就好。
重复上述过程，直到自己满意为止。
一旦你熟悉了轻量定制，再进行深度定制将会手到擒来。例如网站，他们就是将Bootstrap作为一个CSS reset文件，并进行了大量的修改，其中涉及到当量的工作。他们在定制过程中遵循了同样的原理：将Bootstrap的默认样式表引入页面中，然后使用自己定制的样式。
去除没用的代码
并不是所有的网站和应用需要使用Bootstrap提供的所有功能，尤其是在生产环境，带宽的增加意味着花费更多金钱。我们鼓励你通过去除任何没用的代码。
利用定制功能，可以简单的将不需要的组件、特性或资源去除掉。点击下载按钮，将下载下来的文件替换掉默认的Bootstrap文件即可。这样你就获得了完全满足自己需求的Bootstrap，没有丝毫你不需要的代码。所有定制的Bootstrap也都包含压缩和未压缩两个版本的文件，根据你自己的需要使用吧。
400-700-1020