1.bootstrap模板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!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.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="jquery-3.4.1.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
</head>
<body>
</body>
</html>

2.栅格网格

列组合
1
2
3
4
5
6
<!-- 列组合 col-md-8 -->
   <div class="row">
       <div class="col-md-8" style="background-color: aqua;">8</div>
       <div class="col-md-4" style="background-color: aquamarine;">4</div>

   </div>
列偏移
1
2
3
4
5
    <!--col-md-offset-1 列偏移 -->
<div class="row">
          <div class="col-md-4" style="background-color: aqua;">4</div>
          <div class="col-md-4 col-md-offset-1" style="background-color: aquamarine;">4</div>
      </div>
列排序
1
2
3
4
5
6
7
<!--列排序 col-md-push-5-->
<div class="row">
    <div class="col-md-1 col-md-push-5" style="background-color: rgb(255, 0, 212);">1</div>
    <div class="col-md-1" style="background-color: aquamarine;">1</div>
    <div class="col-md-1 col-md-pull-1" style="background-color: rgb(127, 140, 255);">1</div>
    <div class="col-md-1" style="background-color: rgb(234, 127, 255);">1</div>
</div>
列嵌套
1
2
3
4
5
6
7
8
9
10
<div class="row">
           <div class="col-md-6" style="background-color: aquamarine;">
               <div class="row">
                   <div class="col-md-5" style="background-color: blueviolet;"></div>
                   <div class="col-md-2" style="background-color: brown;"></div>
                   <div class="col-md-2" style="background-color: burlywood;"></div>
               </div>
           </div>
           <div class="col-md-6" style="background-color: blue;">
    </div>

3.排版

标题
1
2
3
4
5
<!-- 标题 -->
  <h1>标题一<small>副标题</small></h1>
  <h2>标题二<span class="small">副标题二</span></h2>
  <h2>标题三</h2>
  <div class="h1">大标题</div>
段落
1
2
<!-- 段落 -->
<p>bootstrap的段落段落段落</p>
强调
1
2
3
4
5
6
7
8
9
10
<!-- lead:强调文字 -->
<p class="lead"><em>bootstrap</em>的<b>段落</b>段落<small>段落</small></p>
<br>
<!-- 强调 -->
<div class="text-muted lead">提示效果</div>
<div class="text-primary lead">主要效果</div>
<div class="text-success">成功效果 </div>
<div class="text-info">信息效果</div>
<div class="text-warning">警告效果</div>
<div class="text-danger">危险效果</div>
对齐效果
1
2
3
4
5
6
7
<!-- 对齐效果 -->
  <p class="text-left">左对齐</p>
  <p class="text-right">右对齐</p>
  <p class="text-center">居中对齐 </p>
  <p class="text-justify">
      两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐
  </p>

4.列表

去点
1
2
3
4
5
6
<!-- 去点 -->
 <ul class="list-unstyled">
     <li>无序列表</li>
     <li>无序列表</li>
     <li>无序列表</li>
 </ul>
内联列表
1
2
3
4
5
6
<!-- 内联列表 -->
<ol class="list-inline">
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
</ol>
自定义列表
1
2
3
4
5
6
7
<!-- 自定义的内联列表 超过160px像素会成点点点效果-->
<dl class="dl-horizontal">
    <dt>自定义列表-标题</dt>
    <dd>自定义列表-正常文本</dd>
    <dt>自定义列表-标题自定义列表-标题自定义列表-标题</dt>
    <dd>自定义列表-正常文本</dd>
</dl>

5.代码

单行内联代码
1
2
<!-- 单行内联代码 -->
  <code>这是一个单行代码效果</code>
快捷键
1
2
<!-- 快捷键效果 -->
<p><kbd>ctrl</kbd>+<kbd>s</kbd></p>
多行代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!-- 多行代码 -->
<pre>
    helloword(){
        public void say(){
            
        }
    }
</pre>
<!-- 显示HTML代码用字符集 -->
<pre>
    &lt;h2&gt;你哈&lt;/h2&gt;
</pre>
<!-- 当长度过长，可以添加滚动条 -->
<pre class="pre-scrollable">
    <ol>
        <li>.............</li>
        <li>.............</li>
        <li>.............</li>
        <li>.............</li>
        <li>.............</li>
        <li>.............</li>
        <li>.............</li>
        <li>.............</li>
        <li>.............</li>
        <li>.............</li>
        <li>.............</li>
        <li>.............</li>

    </ol>
</pre>

6.表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
  <table class="table table-bordered table-striped table-hover table-condensed">
      <tr class="info">
          <th>JavaSE</th>
          <th>数据库</th>
          <th>JavaScript</th>
      </tr>
      <tr class="success">
          <td>面向对象</td>
          <td>MySQL</td>
          <td>json</td>
      </tr>
      <tr class="danger">
          <td>数组</td>
          <td>Oracle</td>
          <td>Ajax</td>
      </tr>
<tr class="warning">
    <td>面向对象</td>
    <td>MySQL</td>
    <td>json</td>
</tr>
<tr class="active">
    <td>数组</td>
    <td>Oracle</td>
    <td>Ajax</td>
</tr>
  </table>

7.表单

表单控件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<form action="#" class="form-horizontal" role="form">
			<h2 class="text-center">用户信息表</h2>
			<!-- 表单中的表单元素组 -->
			<div class="form-group">
				<label for="username" class="control-label col-md-2">姓名</label>
				<div class="col-md-8">
					<input type="text" id="username" class="form-control" placeholder="请输入姓名"/>				
				</div>
			</div>
			<div class="form-group">
				<label for="password" class="control-label col-md-2">密码</label>
				<div class="col-md-8">
					<input type="text" id="password" class="form-control" placeholder="请输入密码"/>				
				</div>
			</div>
			
			<div class="form-group">
				<label class="control-label col-md-2">爱好</label>
				<div class="col-md-8">
					<label class="checkbox-inline">
						<input type="checkbox" name="hobby" />唱歌
					</label>
					<label class="checkbox-inline">
						<input type="checkbox" name="hobby" />跳舞
					</label>
				</div>
				
			</div>
			
			<div class="form-group">
				<label class="control-label col-md-2">城市</label>
				<div class="col-md-8">
					<select class="form-control">
						<option>请选择城市</option>
						<option>上海</option>
						<option>北京</option>
						<option>广州</option>
					</select>			
				</div>
			</div>
			
			<div class="form-group">
				<label for="remark" class="control-label col-md-2">简介</label>
				<div class="col-md-8">
					<textarea id="remark" class="form-control"></textarea>
				</div>
			</div>
			
			<div class="form-group">
				<div class="col-md-8 col-md-offset-6">
					<button class="btn btn-primary ">按钮</button>
				</div>
			</div>
		</form>
		<hr >
		<form class="form-inline">
			<label for="username">用户名</label>
			<input id="username" type="text" class="form-control" placeholder="请输入姓名">
			<label for="password">密码</label>
			<input id="password" type="password" class="form-control" placeholder="请输入姓名">
			<button class="btn btn-info">按钮</button>
		</form>
表单布局
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!-- 表单 -->
	<input type="text"><br>
	<select>
		<option>请选择城市</option>
		<option>上海</option>
		<option>北京</option>
		<option>广州</option>
	</select>
	<br>
	<textarea>
	</textarea>
	<br>
	<input type="checkbox" name="hobby"/>唱歌
	<input type="checkbox" name="hobby"/>跳舞
	<input type="radio" name="sex"/>男
	<input type="radio" name="sex"/>女
	<hr ><br>
	<button>按钮</button> <input type="button" value="按钮" />
	<!-- 文本框 -->
	<div class="row">
		<div class="col-md-3">
			<input type="text" class="form-control"><br>
		</div>
		
	</div>
	<!-- 下拉框 -->
	<div class="row">
		<div class="col-md-3">		
	<select class="form-control">
		<option>请选择城市</option>
		<option>上海</option>
		<option>北京</option>
		<option>广州</option>
	</select>
	<select class="form-control" multiple="multiple">
		<option>请选择城市</option>
		<option>上海</option>
		<option>北京</option>
		<option>广州</option>
	</select>
		</div>
	</div>
	
	<!-- 文本域 -->
	<div class="row">
		<div class="col-md-3">
			<textarea class="form-control">
			</textarea>
		</div>
	</div>
	
	<!-- 复选框 -->
	<!-- 垂直显示 -->
	<div class="row">
		<div class="col-md-3">
			<div class="checkbox">
				<label><input type="checkbox" name="hobby" />唱歌</label>
			</div>
			<div class="checkbox">
				<label><input type="checkbox" name="hobby" />跳舞</label>
			</div>
		</div>
	</div>
	<!-- 水平显示 -->
	<div class="row">
		<div class="col-md-3">
			<label class="checkbox-inline">
				<input type="checkbox" name="hobby" />唱歌
			</label>
			<label class="checkbox-inline">
				<input type="checkbox" name="hobby" />跳舞
			</label>
		</div>
	</div>
	
	<!-- 单选框 -->
	<!-- 垂直显示 -->
	<div class="row">
		<div class="col-md-3">
			<div class="radio">
				<label><input type="radio" name="sex" />男</label>
			</div>
			<div class="radio">
				<label><input type="radio" name="sex" />女</label>
			</div>
		</div>
	</div>
	<!-- 水平显示 -->
	<div class="row">
		<div class="col-md-3">
			<label class="radio-inline">
				<input type="radio" name="sex" />男
			</label>
			<label class="radio-inline">
				<input type="radio" name="sex" />女
			</label>
		</div>
	</div>
	<!-- 按钮 -->
	<button class="btn">按钮</button>
	<button class="btn btn-danger">按钮</button>
	<button class="btn btn-success">按钮</button>
	<button class="btn btn-warning">按钮</button>
	<button class="btn btn-default">按钮</button>
	<button class="btn btn-primary">按钮</button>
	<button class="btn btn-info">按钮</button>
	<button class="btn btn-link">按钮</button>
	<br>
	<!-- 通过按钮样式设置标签 -->
	<a href="#" class="btn btn-success">a标签</a>
	<span class="btn btn-danger">span标签</span>
	<div class="btn btn-info">div标签</div>
	<br>
	<!-- 设置按钮大小 -->
	<button class="btn btn-danger">按钮</button>
	<button class="btn btn-success btn-lg">按钮</button>
	<button class="btn btn-warning btn-sm" >按钮</button>
	<button class="btn btn-default btn-xs">按钮</button>
	<!-- 按钮禁用 -->
	<!-- disabled属性 -->
	<br>
	<button class="btn btn-info" onclick="alert('hello');" disabled="disabled">按钮</button>
	<!-- disabled -->
	<button class="btn btn-info disabled" onclick="alert('hello');">按钮</button>

8.缩略图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<div class="container">
			<div class="row">
				<!-- 缩略图 -->
				<div class="col-md-3">
					<div class="thumbnail">
					<img src="img/img.jpg" style="width: 240px; height: 360px;" >
					<h3>刘德华</h3>
					<p>出生北京市</p>
					<button class="btn btn-default">
						<span class="glyphicon glyphicon-heart"></span> 喜欢
					</button>
					<button class="btn btn-info">
						<span class="glyphicon glyphicon-pencil"></span> 评论
					</button>
					</div>
				</div>
				<!-- 缩略图 -->
				<div class="col-md-3">
					<div class="thumbnail">
					<img src="img/pvp.png" style="width: 240px; height: 360px;" >
					<h3>刘德华</h3>
					<p>出生北京市</p>
					<button class="btn btn-default">
						<span class="glyphicon glyphicon-heart"></span> 喜欢
					</button>
					<button class="btn btn-info">
						<span class="glyphicon glyphicon-pencil"></span> 评论
					</button>
					</div>
				</div>
				<!-- 缩略图 -->
				<div class="col-md-3">
					<div class="thumbnail">
					<img src="img/pig.jpg" style="width: 240px; height: 360px;" >
					<h3>刘德华</h3>
					<p>出生北京市</p>
					<button class="btn btn-default">
						<span class="glyphicon glyphicon-heart"></span> 喜欢
					</button>
					<button class="btn btn-info">
						<span class="glyphicon glyphicon-pencil"></span> 评论
					</button>
					</div>
				</div>
				<!-- 缩略图 -->
				<div class="col-md-3">
					<div class="thumbnail">
					<img src="img/img.jpg" style="width: 240px; height: 360px;" >
					<h3>刘德华</h3>
					<p>出生北京市</p>
					<button class="btn btn-default">
						<span class="glyphicon glyphicon-heart"></span> 喜欢
					</button>
					<button class="btn btn-info">
						<span class="glyphicon glyphicon-pencil"></span> 评论
					</button>
					</div>
				</div>
			</div>
		</div>

9.面板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css">
	</head>
	<body>
		<!-- 面板样式 -->
		<div class="panel panel-success">
			<!-- 面板头部 -->
			<div class="panel-heading">
				<h1 class="text-center">明星合集</h1>
			</div>
			<!-- 面板身体 -->
			<div class="panel-body">
			</div>
		</div>
	</body>
</html>

10.bootstrap插件

导航栏
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<p>标签式的导航菜单</p>
<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>

<p>基本的胶囊式导航菜单</p>
<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>
<p>面包屑式导航</p>
<ul class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">2013</a></li>
    <li class="active">十一月</li>
</ul>
<p>分页式导航</p>
<ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
</ul>
<p>翻页</p>
<ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
</ul>
下拉菜单
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- 使用一个类名dropdown 或 btn-group的div包裹整个下拉框 默认向下dropdown -->
	<div class="dropdown">
		<!-- 使用button作为父菜单，使用类名 dropdown-toggle 和自定义属性 data-toggle -->
		<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
			喜欢的频道
			<!-- 下拉箭头 -->
			<span class="caret"></span>
		</button>
		<!-- 下拉菜单项使用一个ul列表，并且定义一个类名为dropdown-menu -->
		<ul class="dropdown-menu">
			<li class="dropdown-header">--科普--</li>
			<li><a href="#" target="_blank">人与自然</a></li>
			<!-- 分组分割线 -->
			<li class="divider"></li>
			<li class="dropdown-header">--搞笑--</li>
			<li class="active"><a href="#" target="_blank">欢乐喜剧人</a></li>
		</ul>
	</div>
模态框
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<body>
	<h2>创建模态框（Modal）</h2>
	<!-- 按钮触发模态框 -->
	<!-- 通过data属性 -->
	<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
	<button class="btn btn-primary btn-lg" id="btn">打开模块框</button>
	<!-- 模态框（Modal） -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	    <div class="modal-dialog">
	        <div class="modal-content">
	            <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	                <h4 class="modal-title" id="myModalLabel">添加用户</h4>
	            </div>
	            <div class="modal-body">
					<div class="form-horizontal" role="form">
						<div class="form-group">
					<label for="username" class="col-md-2 control-label">姓名</label>
					<div class="col-md-8">
						<input type="text" id="username" class="form-control">
						</div>
					</div>
					
					<div class="form-group">
					<label for="password" class="col-md-2 control-label">密码</label>
					<div class="col-md-8">
						<input type="text" id="password" class="form-control">
						</div>
					</div>
					
					</div>
				</div>
	            <div class="modal-footer">
	                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	                <button type="button" class="btn btn-primary" id="down">提交更改</button>
	            </div>
	        </div><!-- /.modal-content -->
	    </div><!-- /.modal -->
	</div>
	<script type="text/javascript">
		//绑定按钮点击事件
		$("#btn").click(function(){
			//手动打开模块框
			$("#myModal").modal("show");
		});
		$("#down").click(function(){
			//手工关闭模块框
			$("#myModal").modal("hide");
		});
	</script>
</body>

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！