-
<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-info btn-lg">大型信息按钮</button>
<button class="btn btn-info btn-sm">小型信息按钮</button>
<button class="btn btn-info btn-xs">超小型信息按钮</button><button class="btn btn-primary btn-xs btn-block" type="button">超小型按钮.btn-xs</button>//按钮布满父元素
查看全部 -
<body>
<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-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 class="btn btn-info" type="button">信息按钮</button>
</html>查看全部 -
bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引入下面代码文件即可。
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
同理为使IE6、7、8版本浏览器兼容css3样式，引入下面代码：
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
查看全部 -
<meta name="viewport" content="width=device-width , initial-scale=1"> 在做移动端适配前要加入这串代码，viewport为虚拟视口 device-width为适应当前物理屏幕大小 inital-scale为初始缩放比例，倍数为1时不进行缩放 bootstrap的CSS文件一般放到head中，JS文件一般放到body的最下边
查看全部 -
text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）
查看全部 -
.lead 强调段落
查看全部 -
作业没完成
查看全部 -
面板就是在div中添加panel属性
panel-default用来控制颜色主题
panel-body添加面板主题内容
panel-heading：用来设置面板头部样式
panel-footer：用来设置面板尾部样式
panel-primary：重点蓝
panel-success：成功绿
panel-info:信息蓝
panel-warning：警告黄
panel-danger：危险红
查看全部 -
基础列表组
list-group 列表组容器，ul比较常用
list-group-item 列表项
整条框都能够被点击需要使用 div 与 a 标签搭配使用
list-group-item-heading：用来定义列表项头部样式
list-group-item-text：用来定义列表项主要内容
active disabled使用方法与之前相同
在对应的子标签中添加属性
list-group-item-success：成功，背景色绿色
list-group-item-info：信息，背景色蓝色
list-group-item-warning：警告，背景色为黄色
list-group-item-danger：错误，背景色为红色
查看全部 -
进度条基本样式
外容器设置progress样式
子容器使用progress-bar 可以通过style=”width：40%“
progress-bar-info：表示信息进度条，进度条颜色为蓝色
progress-bar-success：表示成功进度条，进度条颜色为绿色
progress-bar-warning：表示警告进度条，进度条颜色为黄色
progress-bar-danger：表示错误进度条，进度条颜色为红色
条纹斑需要在外容器属性上增添progress-striped
配合active使用可以实现动态效果
设置具体的百分百在
aria-valuenow 设置现在的值
aria-valuemin 设置最小值
aria-valuemax 设置最大值
查看全部 -
alert警示框效果
alert-success 成功
alert-info 提示
alert-warning 警告
alert-danger 错误
alert-link 添加外链
查看全部 -
缩略图 thumbnail
在一个container中可以添加caption标签，添加多一个容器。
查看全部 -
模态弹出框--JavaScript触发时的参数设置（二）
上一节，我们对JavaScript触发模态弹出窗的属性设置进行了介绍，现在我们接着对参数设置和事件设置进行介绍。
参数设置：
在Bootstrap框架中还为模态弹出窗提供了三种参数设置，具体说明如下：
参数
使用方法
描述
toggle
$(“#mymodal”).modal(“toggle”)
触发时，反转模态弹出窗的状态。即默认或者已经设置了属性了如果模态弹出窗是显示的，则关闭；反之，如果模态弹出窗是关闭的，则显示
show
$(“#mymodal”).modal(“show”)
触发时，显示模态弹出窗
hide
$(“#mymodal”).modal(“hide”)
触发时，关闭模态弹出窗
事件设置：
模态弹出窗还支持四种类型的事件，分别是模态弹出窗的弹出前、弹出后，关闭前、关闭后，具体描述如下：
事件类型
描述
show.bs.modal
在show方法调用时立即触发（尚未显示之前）；如果单击了一个元素，那么该元素将作为事件的relatedTarget属性
shown.bs.modal
该事件在模态弹出窗完全显示给用户之后（并且等CSS动画完成之后）触发；如果单击了一个元素，那么该元素将作为事件的relatedTarget事件
hide.bs.modal
在hide方法调用时（但还未关闭隐藏）立即触发
hidden.bs.modal
该事件在模态弹出窗完全隐藏之后（并且CSS动画漂完成之后）触发
调用方法也非常简单：
$('#myModal') // 处理代码... })在modal中加toggle和不加效果一样。为什么还要加toggle呢
不加toggle，当你保存的时候，页面不会返回到初始页面，你试试；toggle的作用就是来回切换显示与隐藏
一、应用
$(function() {
$(".btn").click(function() {
$("#mymodal").modal("toggle");
});
$('#mymodal').on('show.bs.modal', function(e) {
alert("在show方法调用时立即触发（尚未显示之前）；如果单击了一个元素，那么该元素将作为事件的relatedTarget属性--（弹窗前）");
});
$('#mymodal').on('shown.bs.modal', function(e) {
alert("该事件在模态弹出窗完全显示给用户之后（并且等CSS动画完成之后）触发；如果单击了一个元素，那么该元素将作为事件的relatedTarget事件--(弹窗出来后)");
});
$('#mymodal').on('hide.bs.modal', function(e) {
alert("在hide方法调用时（但还未关闭隐藏）立即触发--(点击关闭，但还没执行时)");
});
$('#mymodal').on('hidden.bs.modal', function(e) {
alert("该事件在模态弹出窗完全隐藏之后（并且CSS动画漂完成之后）触发--(执行关闭后)");
});
});
查看全部 -
模态弹出框--JavaScript触发时的参数设置（一）
另一种方法，使用JavaScript触发模态弹出窗时，是通过写代码js来触发，Bootstrap框架提供了一些设置，主要包括属性设置、参数设置和事件设置。
属性设置
模态弹出窗默认支持的自定义属性主要有：
比如你不想让用户按ESC键关闭模态弹出窗，你就可以这样做：
$(function(){ $(".btn").click(function(){ $("#mymodal"). }); }); });注意格式dropback: “static”
\前端开发
这两段代码起什么作用?
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
第一个是引入bootstrap里面的jquery库，第二个是引入bootstrap里面的JS的插件。顺序不可以调换，因为后者必须依赖前者才能实现功能
查看全部 -
模态弹出框--模态弹出窗的使用（JavaScript触发）
JavaScript触发方法
除了使用自定义属性触发模态弹出框之外，还可以通过JavaScript方法来触发模态弹出窗。通过给一个元素一个事件，来触发。比如说给一个按钮一个单击事件，然后触发模态弹出窗。
JavaScript触发的弹出窗代码：
$(function(){ $(".btn").click(function(){ $("#mymodal") }); });查看全部
qq_Will_28
举报