什么是 Twitter Bootstrap？
按投票排序
为什么要用 BootstrapBootstrap 是由两个 twitter 员工开发并开源的前端框架，目前已经到了 2.0.4 的版本，在 Github 上面有 32517个 watch，和 6608个 fork。非常火爆，而如此火爆自然有它的道理，在我们团队的所有项目中正全面推行使用 Bootstrap，我想根据自己的实际使用体验来说明一下为什么要用 Bootsrap。twitter 出品首先，Bootstrap 出自 twitter，大厂出品，并且开源，自然久经考验，减少了测试的工作量。站在巨人的肩膀上，不重复造轮子。同时，Bootstrap 的代码有着非常良好的代码规范，从中也可以学习到很多，在 Bootstrap 的基础之上创建项目，日后代码的维护也变得异常简单清晰。基于 Less、丰富的 Mixin如果你不知道 Sass 或者 Less 这样的 CSS 预处理技术，我只能说你实在太落伍了，建议你先去了解之。Bootstrap 的一大优势就是它是基于 Less 打造的，并且也有 Sass版本。正因为如此，它一推出就包含了一个非常实用的 Mixin 库任你调用。举个很简单的例子，当你平时要用到一些 css3 属性的时候，你要写不同的浏览器写不同的 -prefix-，比如圆角 border-radius ：-webkit-border-radius: 10 -moz-border-radius:10 -border-radius:10 但是通过 Bootstrap 给你预设好的 mixin，你直接写成这样就可以了：@include border-radius (10px); 是不是轻松愉快？基本常用的 CSS3 mixin 都帮你整理好了，你都直接调用就可以了，在此不一一举例。 Bootstrap 是目前最好的基于 Less(Sass) 的前端框架，丰富而实用的 Mixin 应该是其最好的地方。可以 Responsive 的栅格系统Bootstrap 的 栅格 (Grid) 系统也很先进，整个 Grid 系统是可以 Responsive 的！如果你还不知道 Responsive Design，那么你太落伍了，建议你了解之。Bootstrap 已经帮你搭好了实现 Responsive Design 的基础框架，并且非常容易修改。如果你是一个新手，Bootstrap 可以帮助你在非常短的时间内上手 Responsive Design。丰富的组件Bootstrap 的HTML组件 和 Js组件 非常丰富，并且代码简洁，非常易于修改，你完全可以在其基础之上修改成自己想要的任何样子。这是工作效率的极大提升。插件另外、由于 Bootstrap 的火爆，又出现了不少围绕 Bootstrap 而开发的插件。其中最实用的莫过于 Font Awesome 了。它是一套 icon font，提供了丰富的 icon 给你选择，新的 2.0 版又根据网友的意见增加了70个新的 icon。在现在一股有 Apple 带领的 Retina 潮流下，对图片的视网膜屏下的解决方案已经变得越来越有必要了，而在 icon 这个东西上，icon font 是完美的解决方案，不用担心分辨率的问题，因为它实际上是字体。以上这些就是为什么要用 Bootstrap 的原因，目前市面上没有任何其他框架可以和它相媲美，但是它就虽然是一匹好马，你还是需要花费一些时间去学习它、适应它，它在日后给你带来的便利性是无可比拟的，你会后悔自己为什么没有早点接触它。一些题外话我不喜欢用框架，我喜欢原生的写法这是我在给别人推荐 Bootstrap 的时候最常听到的话，我只能说，Bootstrap 并不能帮你完成所有事情，它只是一个的框架，在这个框架上面你依旧可以任意的发挥，并且发挥得更好，但是前提是你要驾驭得了它。如果你不够熟悉它，你确实是有时候会被它有所牵绊，但是你熟悉了之后发现了其实它没有对你进行任何限制，这需要一个过程。是给无设计师的团队或者程序员用的对此我真的是无力吐槽，Bootstrap 的开发者就在他的博客上抱怨过，为什么出来那么一堆完全照搬 Bootstrap 样式的网站。记住、完全用 Bootstrap 的样式只会让人心生厌烦。简书用的就是 Bootstrap ：
一楼的回答很详细，我再做点补充，简单说下我所知的目前前端样式框架的主流现状，直接从markdown转过来，凑合看下：）## SASS and LESS不管是[SASS]()，还是[LESS]()，都可以视为一种基于CSS之上的高级语言，其目的是使得CSS开发更灵活和更强大，这两者我的感觉是对于程序员来说，SASS的功能要远比LESS强大，基本可以说是一种真正的编程语言了，而对于设计师，LESS则相对清晰明了，[这里]()是Chris Coyier写的一篇关于SASS和LESS的背靠背对比，可以说是相当中肯的(评论也相当有料喔)。当然，如果使用Rails之类的框架，基于SASS是会来的更方便一些。---## Compass and BlueprintSASS和[Compass]()的关系，在很多人来看类似于ruby和rails，compass基于SASS，是一个真正意义上的编程框架，提供了大量的mixin(可理解为函数库)，无论是对css3繁杂的多浏览器写法的简化支持，还是实现各种常见功能的helper，都是强大而丰富的。另外，包括Scott Davis和Eric Meyer的核心团队，也可以说是全明星组合。[Blueprint]()是一套预定义的样式，包括对大部分常用web交互组件的渲染，并且有一个强大的格子布局系统(grid system)，即使不懂设计的程序员，也可以使用blueprint的默认样式做出很漂亮的页面。Blueprint和Compass，是一个分工很明确的组合，前者负责样式渲染，后者则是基础框架和模块，可以说，在bootstrap诞生之前，是web开发首选的黄金组合。---## HTML5 Boilerplate[HTML5 Boilerplate]()项目(以下简称h5bp)则如同名字一样，实现的是一个web页面的标准模板，尤其针对html5进行了全面优化，同时也对老浏览器向后兼容，基本上来说，h5bp与样式相关的主要部分，是compass的一个子集，不过h5bp并不只限于css，还默认引入了很多很好的js开发库，包括[Modernizr]()和Jquery，再加上一个标准化的index.html模板h5bp是这里提到的所有框架中使用起来最方便的，当然受功能限制，她最适用的目标是单页web app或者静态页面，对于复杂的项目来说，需要和其他框架做互补。---## Twitter Bootstrap新兴而野心十足的Bootstrap跟上述又都不同，她是基于LESS的一套前端工具库，意图非常明显，想以一个项目，整合Compass，Blueprint，h5bp的目标功能，成为web前端的一站式解决方案。* 一套完整的基础css模块，但不如compass丰富和强大* 一套预定义样式表，包括一个格子布局系统，和blueprint提供的差不多，只是设计风格不一样* 一组基于Jquery的js交互插件，这是Bootstrap真正强大的地方，也是她严格意义上可以取代Blueprint的原因所在，这些非常不错的小插件，包括对话框，下拉导航等等，不但功能完善，而且十分精致，正在成为众多jquery项目的默认设计标准。特别提一下，Bootstrap使用[Normalize.css]()来进行Reset CSS，这一项目已经成为了事实标准(超过Compass的Eric meyer 2.0)，强烈推荐使用，另外前边说的h5bp也使用Normalize，因此，如果你在项目中同时使用了h5bp和Bootstrap， 请注意，**没有必要再引入h5bp的初始样式表style.css**---## So What?说了一大堆，该来点结论了，目前对于web开发，尤其是由程序员进行的full stack开发，最好的组合是：**SASS+Compass+Bootstrap**这样既可以利用SASS强大的编程能力，Compass强大的底层函数，又可以获取Bootstrap丰富的UI组件支持。只是，Bootstrap是基于LESS的，要让她们协同工作，需要一个SASS的Bootstrap移植版本，幸亏github上从来不缺这类项目，当前最好的一个是[bootstrap-sass]()
楼上的回答都很详细了 正好最近也在折腾 。。贴上一个 中文版文档吧
是目前比较流行的前端框架。使用Bootstrap将大大节省开发时间。可以看一下下面的这篇文章，详细介绍了Bootstrap。
说白了，就是事先写好的一组 css
样式，比如 按钮，表单，表格等，用的时候，只需条用相应的 class 。另外说一句，我研究过后并做了一些小 DEMO，，最终还是放弃了，原因:1，不适合中文，英文倒是不错。2，大，是的太大，居然比 jquery 还大。3，不支持我们都讨厌的 IE 6，7
鞋拔子，就三个字，当你做为一个开发发愁怎么自己把网站或app弄好看点的时候，鞋拔子就来帮你了
Twitter Bootstrap在我用的时候我就觉得很别扭，不是因为技术，而是因为样式，当我发现我写完后，做的页面和官网或者是其它使用Twitter Bootstrap网站长的一模一样的时候，我的心理就不平衡了...这个时候我就觉得Twitter Bootstrap只能说提供了一个设计模板给我们
推荐一个响应式测试工具 [ 跨屏测 ]
前端神器，可快速搭建网页，风格简洁大方。
用过bootstrap2.3.2开发最代码网站感觉上手很轻便，期间感觉有些component有些笨重，选择过960gs，但发现太简陋了，可能还是习惯bootstrap了，果断还是换回来了，不过2.0到3.0的切换基本是需要重写的，这个迁移成本有点大，如果想升级到新版的网站请注意,另外对ie的支持可能不如firefox和chrome好，建议如果你网站的客户是ie的就还是不要用了。
已有帐号？
无法登录？
社交帐号登录时间: February 3, 2015
daterangepicker 是Bootstrap的一个时间日期选择插件，跟Bootstrap风格很好的结合在一起，用起来也比较方便，整理了该插件的简单使用和参数说明：
该插件基于 Bootstrap, Moment.js and jQuery 。
基本的调用方法：
&script type=&text/javascript& src=&jquery.js&&&/script&
&script type=&text/javascript& src=&moment.js&&&/script&
&script type=&text/javascript& src=&daterangepicker.js&&&/script&
&link rel=&stylesheet& type=&text/css& href=&bootstrap.css& /&
&link rel=&stylesheet& type=&text/css& href=&daterangepicker-bs3.css& /&
&script type=&text/javascript&&
$(document).ready(function() {
$('input[name=&daterange&]').daterangepicker();
startDate: （日期对象、实践对象或者字符串）初始开始时间
endDate: （日期对象、实践对象或者字符串） 初始结束时间
minDate: （日期对象、实践对象或者字符串） 可选最早时间
maxDate: （日期对象、实践对象或者字符串） 可选最晚时间
dateLimit: (对象) 选择开始日期和结束日期之间的最大跨度
timeZone: (字符串或数字) 时区，默认为本地时区
showDropdowns: (布尔) 在年月份选择框上面显示可以跳刀特定月份的选择
showWeekNumbers: (布尔) 日历的每周前显示周数
timePicker: (布尔) 是否显示时间选择框
timePickerIncrement: (数字) 步长
timePicker12Hour: (布尔) 使用12小时制替代24小时，并添加AM/PM下拉框选项
timePickerSeconds: (布尔) 时间选择框是否显示秒数
ranges: (对象) 设定预定义日期范围
opens: (字符串: 'left'/'right'/'center')选择相对日期框的相对位置
buttonClasses: (数组) 自定义按钮样式
applyClass: (字符串)
自定义按钮样式（apply/应用）
cancelClass: (字符串) 自定义按钮样式（cancle/取消）
format: (字符串) Date/time 结果时间格式
separator: (字符串) 开始时间和结束时间的分割字符
locale: (对象) 本地化
singleDatePicker: (布尔) 只显示一个时间
parentEl: (string) 容器，缺省为body
官方的一个DEMO
添加新评论
: PHP-cli环境的问题：
linux环境下可以参考这篇文章
: 请问，安装 cumulusclips，不能上传视频，设置的时候出...
: 有，maxview,minview设置，自己看文档
: 官方没有给出这个配置，年月选择没必要用这个，略显复杂
: 请问下如何改写为年月视图，不要日视图。呢？
: 信博客得永生
: 活了，logo自己ps的吧，哈哈用Bootstrap的哥们，你们是怎么居中的？ & 社区 & Ruby China
基础布局一般用Bootstrap都是向下面那样吧。
&div class=&container&&
&div class=&row&&
&div class=&span2&&
如果我想在一个span12里，居中，请问大家是用什么方法的？
我之前一直用着个不太好的方法，如：
&div class=&row&&
&div class=&offset5 span7&&
但是必须根据文本的长度来不停调节offset1,offset2....这样。而且好像不是完全居中。
请问有什么更方便的方法吗？
好像margin:0用不了哦。
block 没设定宽度是不能 margin auto 来居中的，一个简单的办法是 display: table
display: table
width: auto
margin-left: auto
margin-right: auto
&center&&/center&
二楼什么状况？？
哦。是在span12里面的div设置为display: table吗？
哥们，本贴出现bug了。
m@QueXuQ 我来测试下新功能
原来真是bug。。。
可以加个 class
margin-left:
margin-right:
.text-center {
text-align:
&div class=&center&&
pla pla pla
这里有一个居中的实列
在span2加入下面的css
margin ：0 auto；
float：none；
9楼 已删除
直接text-align:center就可以了啊
可以参考这个网址
Approach 1 (offsets):
The first approach uses Bootstrap's own offset classes so it requires no change in markup and no extra CSS. The key is to set an offset equal to half of the remaining size of the row. So for example, a column of size 2 would be centered by adding an offset of 5, that's (12-2)/2.
In markup this would look like:
&div class="row"&
&div class="col-md-2 col-md-offset-5"&&/div&
Now, there's an obvious drawback for this method, it only works for even column sizes, so only .col-X-2, .col-X-4, col-X-6, col-X-8 and col-X-10 are supported.
后方可回复, 如果你还没有账号请点击这里 。
共收到 10 条回复基于Metronic的Bootstrap开发框架经验总结（6）--对话框及提示框的处理和优化 - 伍华聪 - 博客园
随笔 - 460, 文章 - 20, 评论 - 6906, 引用 - 20
在各种Web开发过程中，对话框和提示框的处理是很常见的一种界面处理技术，用得好，可以给用户很好的页面体验，Bootstrap开发也一样，我们往往在页面新增、编辑、查看详细等界面使用弹出对话框层的方式进行显示数据，删除则可能使用一个提示确认框，如果操作成功，我们可以使用更丰富的提示框来处理，本篇主要对比说明在Bootstrap开发中用到的这些技术要点。
1、Bootstrap对话框的使用
常规的Bootstrap有几种尺寸的对话框，包括默认状态的小对话框，中等宽度的对话框，和全尺寸的对话框几种，Bootstrap的对话框界面非常友好， 当我们使用ESC键或者鼠标单击其他空白处，则会自动隐藏对话框的。
它们的定义只是class不同，如下面是默认的小对话框界面代码：
&!--------------------------添加/修改信息的弹出层----------------------------&
&div id="add" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&
&div class="modal-dialog"&
&div class="modal-content"&
&div class="modal-header bg-primary"&
&button type="button" class="close" data-dismiss="modal" aria-hidden="true"&&/button&
&h4 class="modal-title"&
&i class="icon-pencil"&&/i&
&span id="lblAddTitle" style="font-weight:bold"&添加信息&/span&
&form class="form-horizontal form-bordered form-row-strippe" id="ffAdd" action="" data-toggle="validator" enctype="multipart/form-data"&
&div class="modal-body"&
&div class="row"&
&div class="col-md-12"&
&div class="form-group"&
&label class="control-label col-md-2"&父ID&/label&
&div class="col-md-10"&
&select id="PID" name="PID" type="text" class="form-control select2" placeholder="父ID..." &&/select&
&div class="col-md-12"&
&div class="form-group"&
&label class="control-label col-md-2"&名称&/label&
&div class="col-md-10"&
&input id="Name" name="Name" type="text" class="form-control" placeholder="名称..." /&
&div class="col-md-12"&
&div class="form-group"&
&label class="control-label col-md-2"&备注&/label&
&div class="col-md-10"&
&textarea id="Note" name="Note" class="form-control" placeholder="备注..."&&/textarea&
&div class="modal-footer bg-info"&
&input type="hidden" id="ID" name="ID" /&
&button type="submit" class="btn blue"&确定&/button&
&button type="button" class="btn green" data-dismiss="modal"&取消&/button&
大概的界面如下所示：
注意上面代码里面的对话框样式代码，如下：
&div class="modal-dialog"&
如果是其他两个尺寸的数据库，也只需要修改这里即可，如下所示两种代码分别是：
&div class="modal-dialog modal-lg"&
&div class="modal-dialog modal-full"&
我们可以根据界面元素的布局，来决定采用哪个尺寸的对话框层定义，不过他们这几个对话框的调用方式是一致的。
打开对话框界面如下所示：
//显示可以选择客户
$("#btnSelectCustomer").show();
关闭对话框界面如下所示:
$("#add").modal("hide");
一般情况下，我们弹出的对话框就是一个表单，可以执行类似保存数据的提交操作的，因此需要对表单的数据进行验证，如果有错误，我们可能需要在界面上提醒，因此在页面初始化的时候，需要初始化表单的验证规则，下面是我们常规的表单初始化操作。
//绑定相关事件
function BindEvent() {
//判断表单的信息是否通过验证
$("#ffAdd").validate({
meta: "validate",
errorElement: 'span',
errorClass: 'help-block help-block-error',
focusInvalid: false,
highlight: function (element) {
$(element).closest('.form-group').addClass('has-error');
success: function (label) {
label.closest('.form-group').removeClass('has-error');
label.remove();
errorPlacement: function (error, element) {
element.parent('div').append(error);
submitHandler: function (form) {
$("#add").modal("hide");
//构造参数发送给后台
var postData = $("#ffAdd").serializeArray();
$.post(url, postData, function (json) {
var data = $.parseJSON(json);
if (data.Success) {
//增加肖像的上传处理
$('#file-Portrait').fileinput('upload');
//保存成功
1.关闭弹出层，2.刷新表格数据
showTips("保存成功");
Refresh();
showError("保存失败:" + data.ErrorMessage, 3000);
}).error(function () {
showTips("您未被授权使用该功能，请联系管理员进行处理。");
但是一般这些代码都会重复很多，因此我们可以封装函数的方式，重用部分代码，从而使用更简洁的处理代码，但同样能达到目的。
//绑定相关事件
function BindEvent() {
//添加、编辑记录的窗体处理
formValidate("ffAdd", function (form) {
$("#add").modal("hide");
//构造参数发送给后台
var postData = $("#ffAdd").serializeArray();
$.post(url, postData, function (json) {
var data = $.parseJSON(json);
if (data.Success) {
//保存成功
1.关闭弹出层，2.刷新表格数据
showTips("保存成功");
Refresh();
showError("保存失败:" + data.ErrorMessage, 3000);
}).error(function () {
showTips("您未被授权使用该功能，请联系管理员进行处理。");
2、删除确认的对话框处理
1）bootbox插件的使用
除了上面的常规对话框，我们还经常碰到一种简洁的确认对话框，虽然也可以使用上面的代码来构建一个确认对话框，不过一般情况下不需要这么麻烦的，可以使用插件bootbox的确认对话框来进行处理。
Bootbox.js是一个小的JavaScript库，它帮助您在使用bootstrap框架的时候快速的创建一个对话框，也可以帮您创建，管理或删除任何所需的DOM元素或js事件处理程序。
bootbox.js使用三方法设计模仿他们的本地JavaScript一些方法。他们确切的方法签名是灵活的每个可以采取各种参数定制标签和指定缺省值，但它们通常被称为一样：
bootbox.alert(message, callback)
bootbox.prompt(message, callback)
bootbox.confirm(message, callback)
唯一需要的参数是alert是 callback是必需的 confirm 和 prompt 调用以确定用户的响应。甚至当调用警报回调是确定当用户 驳回对话框由于我们的包装方法不能不要块 像他们的母语是有用的：他们是异步而非同步。
这三种方法调用四分之一个公共方法，你也可以使用你自己的自定义对话框创建 ：
bootbox.dialog(options)
更多api帮助文档请参见：
bootbox.alert("Hello world!", function() {
Example.show("Hello world callback");
bootbox.confirm("Are you sure?", function(result) {
Example.show("Confirm result: "+result);
});或者代码
bootbox.confirm("您确认删除选定的记录吗？", function (result) {
if (result) {
//最后去掉最后的逗号,
ids = ids.substring(0, ids.length - 1);
//然后发送异步请求的信息到后台删除数据
var postData = { Ids: ids };
$.get("/Province/DeletebyIds", postData, function (json) {
var data = $.parseJSON(json);
if (data.Success) {
showTips("删除选定的记录成功");
Refresh();//刷新页面数据
showTips(data.ErrorMessage);
bootbox.prompt("What is your name?", function(result) {
if (result === null) {
Example.show("Prompt dismissed");
Example.show("Hi &b&"+result+"&/b&");
Custom Dialog
&使用代码和界面效果如下所示：
bootbox.dialog(&)
2）sweetalert插件的使用
虽然上面的效果非常符合Bootstrap的风格，不过界面略显单调。上面的效果不是我很喜欢这种风格，我遇到一个看起来更加美观的效果，如下所示。
这个效果是引入插件sweetalert（）实现的。
title: "操作提示",
text: newtips,
type: "warning", showCancelButton: true,
confirmButtonColor: "#DD6B55",
cancelButtonText: "取消",
confirmButtonText: "是的，执行删除！",
closeOnConfirm: true
}, function () {
delFunction();
上面的界面效果类似的实现代码如下所示：
一般它的弹出框代码可以做的很简单，如下所示。
3、信息提示框的处理
上面两种处理，都是利用弹出对话框进行实现的，而且对界面有阻塞的，一般情况下，我们做信息提示效果，希望它不要影响我们进一步的操作，或者至少提供一个很短的自动消失效果。
那么这里我们就来介绍下jNotify插件和toastr插件了。
1）jNotify提示框的使用
jNotify提示框，一款优秀的jQuery结果提示框插件。我们在提交表单后，通过Ajax响应后台返回结果，并在前台显示返回信息，jNotify能非常优雅的显示操作结果信息。jNotify是一款基于jQuery的信息提示插件，它支持操作成功、操作失败和操作提醒三种信息提示方式。jNotify浏览器兼容性非常好，支持更改提示内容，支持定位提示框的位置，可配置插件参数。
jSuccess(message,{option});
jError("操作失败，请重试!!");
jNotify("注意：请完善你的&strong&个人资料！&/strong&");
jNotify的参数详细配置：
autoHide : true,
// 是否自动隐藏提示条
clickOverlay : false,
// 是否单击遮罩层才关闭提示条
MinWidth : 200,
// 最小宽度
TimeShown : 1500,
// 显示时间：毫秒
ShowTimeEffect : 200,
// 显示到页面上所需时间：毫秒
HideTimeEffect : 200,
// 从页面上消失所需时间：毫秒
LongTrip : 15,
// 当提示条显示和隐藏时的位移
HorizontalPosition : "right",
// 水平位置:left, center, right
VerticalPosition : "bottom",
// 垂直位置：top, center, bottom
ShowOverlay : true,
// 是否显示遮罩层
ColorOverlay : "#000",
// 设置遮罩层的颜色
OpacityOverlay : 0.3,
// 设置遮罩层的透明度
onClosed:fn
//关闭提示框后执行函数，可以再次调用其他jNotify。如上面的三个依次调用。
下面是我在脚本类里面封装的饿公用方法，用来实现提示效果的显示的。
//显示错误或提示信息（需要引用jNotify相关文件）
function showError(tips, TimeShown, autoHide) {
autoHide: autoHide || true, // added in v2.0
TimeShown: TimeShown || 1500,
HorizontalPosition: 'center',
VerticalPosition: 'top',
ShowOverlay: true,
ColorOverlay: '#000',
onCompleted: function () { // added in v2.0
//alert('jNofity is completed !');
//显示提示信息
function showTips(tips, TimeShown, autoHide) {
autoHide: autoHide || true, // added in v2.0
TimeShown: TimeShown || 1500,
HorizontalPosition: 'center',
VerticalPosition: 'top',
ShowOverlay: true,
ColorOverlay: '#000',
onCompleted: function () { // added in v2.0
//alert('jNofity is completed !');
这样我们在使用Ajax的POST方法的时候，我们可以根据不同的需要进行提示。
var postData = $("#ffAdd").serializeArray();
$.post(url, postData, function (json) {
var data = $.parseJSON(json);
if (data.Success) {
//增加肖像的上传处理
$('#file-Portrait').fileinput('upload');
//保存成功
1.关闭弹出层，2.刷新表格数据
showTips("保存成功");
Refresh();
showError("保存失败:" + data.ErrorMessage, 3000);
}).error(function () {
showTips("您未被授权使用该功能，请联系管理员进行处理。");
2）toastr插件的使用&
toastr&是一个Javascript库用于创建Gnome/Growl风格，非阻塞的页面消息提醒。，toastr可设定四种通知模式：成功，出错，警告，提示，而提示窗口的位置，动画效果都可以通过能数来设置，在官方站可以通过勾选参数来生成JS，非常的方便使用。
插件地址是：
它可以分别创建如下几种效果：警告、危险、成功、提示的对话框信息，效果如下所示。
它的使用JS代码如下所示。
//显示一个警告,没有标题
toastr.warning('My name is Inigo Montoya. You killed my father, prepare to die!')
//显示一个成功,标题
toastr.success('Have fun storming the castle!', 'Miracle Max Says')
//显示错误标题
toastr.error('I do not think that word means what you think it means.', 'Inconceivable!')
//清除当前的列表
toastr.clear()
这个插件的参数定义说明如下所示。
//参数设置，若用默认值可以省略以下面代
toastr.options = {
"closeButton": false, //是否显示关闭按钮
"debug": false, //是否使用debug模式
"positionClass": "toast-top-full-width",//弹出窗的位置
"showDuration": "300",//显示的动画时间
"hideDuration": "1000",//消失的动画时间
"timeOut": "5000", //展现时间
"extendedTimeOut": "1000",//加长展示时间
"showEasing": "swing",//显示时的动画缓冲方式
"hideEasing": "linear",//消失时的动画缓冲方式
"showMethod": "fadeIn",//显示时的动画方式
"hideMethod": "fadeOut" //消失时的动画方式
//成功提示绑定
$("#success").click(function(){
toastr.success("祝贺你成功了");
以上就是我在项目里面，对对话框及提示框的处理和优化的经验总结，希望对大家学习改进Web界面有帮助。
如果有兴趣，可以继续参考系列文章：
如果有兴趣，可以继续参考系列文章：