-
不管制作哪种表格都离不开类名“table”。所以大家在使用Bootstrap表格时，千万注意，你的<table>元素中一定不能缺少类名“table”。
查看全部 -
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap的HTML标准模板</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!--你自己的样式文件 --> <link href="css/your-style.css" rel="stylesheet"> <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery --> <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script> <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用 --> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>
查看全部 -
初始化移动浏览显示，视口宽度等于设备宽度 --> 不可缩放
查看全部 -
Bootstrap基于jQuery，所以Bootstrap引用前需引用jQuery
查看全部 -
下载地址：getbootstrap.com
含有在线CDN版本
查看全部 -
<h1>我的第一个bootstrap标题</h1>查看全部
-
无需归零的处理方法
查看全部 -
“.table”主要有三个作用：
☑ 给表格设置了margin-bottom:20px以及设置单元内距
☑ 在thead底部设置了一个2px的浅灰实线
☑ 每个单元格顶部设置了一个1px的浅灰实线
查看全部 -
☑ .table：基础表格
☑ .table-striped：斑马线表格
☑ .table-bordered：带边框的表格
☑ .table-hover：鼠标悬停高亮的表格
☑ .table-condensed：紧凑型表格
☑ .table-responsive：响应式表格
查看全部 -
去点列表：list-unstyled
内联列表：list-inline
查看全部 -
高度超出340px，就会在Y轴出现滚动条
.pre-scrollable
查看全部 -
.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）
查看全部 -
下拉菜单 <div class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button"> 按钮下拉菜单<span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="##">按钮下拉菜单项</a></li> <li><a href="##">按钮下拉菜单项</a></li> <li><a href="##">按钮下拉菜单项</a></li> <li><a href="##">按钮下拉菜单项</a></li> </ul> </div>
查看全部 -
列表-水平定义列表：
Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。
<dl class = "dl-horizontal">
<dt>标题一:</dt>
<dd>描述内容</dd>
<dt>标题二:</dt>
<dd>描述内容</dd>
</dl>
查看全部 -
列表：
无序列表：
<ul>
<li>内容1</li>
<li>内容2</li>
</ul>
有序列表：
<ol>
<li>内容1</li>
<li>内容2</li>
</ol>
定义列表
<dl>
查看全部
举报