1、标准模本:
<!DOCTYPE html>
<html lang="en">
<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> 使IE6、7、8版本(IE9以下版本)浏览器兼容html5新增的标签
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> IE6、7、8版本浏览器兼容css3样式
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- 如果要使用Bootstrap的js插件,必须先调入jQuery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用 -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
2、bootstrap中的标题样式定义了规则,使得在所有浏览器下显示的效果一样
在Bootstrap中为了让非标题元素和标题使用相同的样式,还特意定义了.h1~.h6六个类名。
<div class="h1">Bootstrap标题一</div>
3、副标题
<h1>Bootstrap标题一<small>我是副标题</small></h1>
4、强调内容
<p>我是普通文本,我的样子长成这样我是普通文本,我的样子长成这样我是普通文本,</p> <p class="lead">我是特意要突出的文本,我的样子成这样。我是特意要突出的文本,我的样子长成这样。</p>
5、粗体
<p>我在学习<strong>Bootstrap</strong>,我要掌握<strong>Bootstrap</strong>的所有知识。</p>
6、斜体
<p>我在慕课网上跟<em>大漠</em>一起学习<i>Bootstrap</i>的使用。我一定要学会<i>Bootstrap</i>。</p>
7、强调类
强调类都是通过颜色来表示强调,具本说明如下:
- .text-muted:提示,使用浅灰色(#999)
- .text-primary:主要,使用蓝色(#428bca)
- .text-success:成功,使用浅绿色(#3c763d)
- .text-info:通知信息,使用浅蓝色(#31708f)
- .text-warning:警告,使用黄色(#8a6d3b)
- .text-danger:危险,使用褐色(#a94442)
8、文本对齐风格,通过类名控制class
☑ .text-left:左对齐
☑ .text-center:居中对齐
☑ .text-right:右对齐
☑ .text-justify:两端对齐
9、列表类名
list-unstyled:取出列表序号
list-inline:实现内联列表
10、代码的风格显示
code风格:
<div>Bootstrap的代码风格有三种:
<code><code></code>
<code><pre></code>
<code><kbd></code>
</div>
pre风格:
<div>Bootstrap的代码风格有三种:
<code><code></code>
<code><pre></code>
<code><kbd></code>
</div>
kbd风格:
<div>请输入<kbd>ctrl+c</kbd>来复制代码,然后使用<kbd>ctrl+v</kbd>来粘贴代码</div>
11、表格样式(类名)
☑ .table:基础表格
☑ .table-striped:斑马线表格
☑ .table-bordered:带边框的表格
☑ .table-hover:鼠标悬停高亮的表格
☑ .table-condensed:紧凑型表格
☑ .table-responsive:响应式表格
12、表格行的类
.active .success .info .warning .danger(在<tr>中添加)
.table-hover(在<table>中添加)