简介

这次学习是Bootstrap4的入门,它是一个功能强大的框架。Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap4 目前是 Bootstrap 的最新版本,是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统,能够快速为你的想法开发出原型或者构建整个 app。这次是入门学习深入的话以后会慢慢深入。

1.Bootstrap4的安装和初次使用

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
https://getbootstrap.com/  这个是他的官网,可以直接使用API调用,但是还是建议下载到本地引用
一般我们是下载编译好的那个版本。而且还需下载JQuery and Popper.js

<!--最基本的模板 -->

<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet"href="bootstrap.min.css">
<title></title>
</head>

<body>
<h1>
Hello Bootstrap4!!
</h1>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="jquery3.2.1.slim.min.js"></script>
<script src="popper1.12.9.min.js"></script>
<script src="bootstrap.min.js"></script>

</body>

</html>

2.为要素配置颜色

1
2
3
4
5
6
7
8
9
10
<!--
文本色text-*
背景色bg-*
-->
<div class="">欢迎收看《小马技术视频》</div>
<div class="bg-primary text-white">欢迎收看《小马技术视频》</div>
<div class="bg-secondary text-white">欢迎收看《小马技术视频》</div>
<div class="bg-success text-white">欢迎收看《小马技术视频》</div>
<div class="bg-warning text-dark">欢迎收看《小马技术视频》</div>
<div class="bg-light text-dark">欢迎收看《小马技术视频》</div>

3.文本样式

1
2
3
4
5
6
7
8
9
<h2 class="font-weight-normal display-4">Bootstrap4教学</h2>
<div class="bg-light">欢迎收看《小马技术视频》</div>
<div class="text-center bg-light font-weight-bold">欢迎收看《小马技术视频》</div>
<div class="text-left bg-light">欢迎收看《小马技术视频》</div>
<div class="text-right bg-light">欢迎收看《小马技术视频》</div>
<!--大小写变换-->
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

4.Size变更

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
.my-container {
width: 200px;
height: 200px;
background: #ddd;
margin-bottom: 5px;
}
</style>
<div class="my-container">
<!--这里的25 50 是指占父元素的百分之25和百分之50-->
<div class="bg-primary w-25 h-50">小马视频</div>
</div>
<div class="my-container">
<div class="bg-success w-75 h-100">小马视频</div>
</div>

5. padding和margin的使用

p:padding m:margin

location:

  • t, b, l, r
    • t:top
    • b:bottom
    • l:left
    • r:right
  • x, y
    • x:lr
    • y:tb

size:

  • 0
  • 1:0.25rem
  • 2:0.5rem
  • 3:1.0rem
  • 4:1.5rem
  • 5:3.0rem
  • auto
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
.my-container {
width: 200px;
height: 200px;
background: #ddd;
margin-bottom: 5px;
}
</style>

<div class="my-container pt-3 pl-3">
<div class="bg-primary w-50 h-50 pt-1 pl-2">小马视频</div>
</div>
<div class="my-container px-3 py-3">
<div class="bg-success w-100 h-100">小马视频</div>
</div>

6.按钮的技巧

1
2
3
4
5
<button>Yes</button>
<button class="btn">Yes</button>
<button class="btn btn-primary">Yes</button>
<button class="btn btn-danger btn-sm">Yes</button>
<button class="btn btn-success btn-lg">Yes</button>

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
<!--一行是12份-->
<div class="container">
<div class="row mb-3">
<div class="col-4 bg-danger">
COL1
</div>
<div class="col-4 bg-success">
COL2
</div>
<div class="col-4 bg-warning">
COL3
</div>
</div>

<div class="row">
<div class="col-2 bg-danger">
COL1
</div>
<div class="col-8 bg-success">
COL2
</div>
<div class="col-2 bg-warning">
COL3
</div>
</div>

<div class="row mt-3">
<div class="col-6 bg-danger">
COL1
</div>
<div class="col-4 bg-success">
COL2
</div>
<div class="col-8 bg-warning">
COL3
</div>
</div>
</div>

8.响应式布局

Bootstrap4根据客户端显示屏幕的大小,分为以下几个分类:

  • 超小(Extra small)
    • <576px
    • .col-*
  • 小(Small)
    • ≥576px
    • .col-sm-*
  • 中(Medium)
    • ≥768px
    • .col-md-*
  • 大(Large)
    • ≥992px
    • .col-lg-*
  • 超大(Extra large)
    • ≥1200px
    • .col-xl-*
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="row mb-3">
<div class="col-6 bg-success">Helo1</div>
</div>

<div class="row mb-3">
<div class="col-xl-12 col-lg-10 col-md-8 col-sm-4 col-6 bg-warning">Helo2</div>
</div>

<div class="row">
<div class="col-12 col-md-6 bg-danger">Helo3a</div>
<div class="col-12 col-md-6 bg-primary">Helo3b</div>
</div>

<div class="row">
<div class="col-12 col-md-6 bg-danger">Helo4a</div>
<div class="d-none d-md-block col-md-6 bg-primary">Helo4b</div>
</div>

9.制作一个简单的响应式网页

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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
<meta http-equivkuan="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="../LearnBootstrap4/bootstrap-4.0.0-dist/css/bootstrap.min.css">
<title>汉堡菜单和报警提示</title>
<style>
.myheader {
background: url(1.jpg);
}
</style>
</head>

<body>
<header>
<div class="alert alert-info text-center mb-0 rounded-0 alert-dismissible fade show">
Bootstrap4 来了!!!!!!
<button class="close" data-dismiss="alert">&times;</button>
</div>
<div class="container">
<!-- 响应式布局可修改expand-后面的属性 -->
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<a href="#" class="navbar-brand">LzMiracle</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#menu">
<span class="navbar-toggler-icon"></span>
</button>
<div id="menu" class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item"><a href="#" class="nav-link">Youku</a></li>
<li class="nav-item"><a href="#" class="nav-link">Youtube</a></li>
<li class="nav-item"><a href="#" class="nav-link">ITStudy</a></li>
</ul>
</div>

</nav>
</div>

<div class="myheader text-dark text-center py-5">
<h1 class="display-3 mb-3">小马视频</h1>
<a href="//i.youku.com/komavideo" target="_blank" class="btn btn-primary btn-lg">优酷频道</a>
<a href="//www.youtube.com/channel/UC5sgzai6AyPWLM7-hblV9oA" target="_blank" class="btn btn-danger btn-lg">Youtube频道</a>
</div>
</header>
<main>
<section class="py-5">
<h2 class="text-center mb-5">小马游戏视频</h2>
<div class="container">
<div class="mb-5 row">
<div class="col-md-9">
<h3>勇者斗恶龙建造者</h3>
<p>日本知名游戏厂商SE社正式宣布将面向平台推出《勇者斗恶龙:建造者》游戏,风格为方块建筑RPG。初代《勇者斗恶龙
创造者》于NS上推出,本作2018年春发售。《勇者斗恶龙:建造者》和《勇者斗恶龙:建造者2》的NS版,在西方市场由任天堂发行。</p>
</div>
<div class="col-md-3">
<img src="1.jpg" class="w-100">
</div>
</div>

<div class="mb-5 row">
<div class="col-md-9 order-md-2">
<h3>塞尔达传说之黄昏公主</h3>
<p>《塞尔达传说 黄昏公主》(ゼルダの伝说 トワイライトプリンセス,The Legend of Zelda: Twilight
Princess)是由任天堂情报开发本部制作、任天堂发行的动作冒险游戏。2006年11月9日首发登陆Wii和NGC,Wii首发作品。双平台合计销量达到885万套以上,是系列目前为止销量最高作。《塞尔达传说:黄昏公主HD》2016年3月10日登陆WiiU平台。
</p>
</div>
<div class="col-md-3 order-md-1">
<img src="1.jpg" class="w-100">
</div>

</div>
<div class="mb-5 row">
<div class="col-md-9">
<h3>讨鬼传2</h3>
<p>《讨鬼传2》是由KOEI
TECMO公司开发的一款动作游戏,于2016年7月28日发行。在吸收了《讨鬼传》优势内容的基础上,增加了诸多提升游戏爽快度的要素。游戏风格也转变成为开放世界形式,且能无缝进入战斗。
</p>
</div>
<div class="col-md-3">
<img src="1.jpg" class="w-100">
</div>

</div>
</div>
</section>
<section class="bg-light py-5">
<h2 class="text-center">今后计划</h2>
<div class="container">
<table class="table table-hover">
<thead>
<tr>
<th class="text-center">技术视频</th>
<th class="text-center">游戏视频</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bootstrap4入门</td>
<td>勇者斗恶龙建造者</td>
</tr>
<tr>
<td>Git入门</td>
<td>信长之野望创造</td>
</tr>
<tr>
<td>MongDB入门</td>
<td>怪物猎人世界</td>
</tr>
</tbody>

</table>

</div>

</section>
<section class="py-5">
<h2 class="text-center">我爱NBA</h2>
<div class="container">
<ul class="nav nav-pills">
<li class="nav-item">
<a href="#east" class="nav-link active" data-toggle="pill">东部(East)</a>
</li>
<li class="nav-item">
<a href="#west" class="nav-link " data-toggle="pill">西部(West)</a>
</li>
</ul>
<div class="tab-content py-3">
<div id="east" class="tab-pane active">
<p>2018年东部冠军是
<span class="font-weight-bold text-success" title="绿洲东部第一" data-toggle="tooltip" data-placement="top">凯尔特人</span>还是
<span class="font-weight-bold text-danger" title="老詹没输" data-toggle="tooltip" data-placement="bottom">骑士</span>
不会是猛龙吧?</p>
</div>
<div id="west" class="tab-pane">
<p>西部冠军肯定是勇士了,不过火箭今天也很不错。</p>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="1.jpg" class="d-block w-100 h-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item">
<img src="2.jpg" class="d-block w-100 h-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="carousel-item">
<img src="头像.jpg" class="d-block w-100 h-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

</section>
</main>
<footer class="text-center text-muted py-4">
Copyright @LzMiracle www.lzmiracle.com
</footer>
<!-- JQ的引用要在bootstrap的引用的前面 否则跳转会失效 -->

<script src="../LearnBootstrap4/bootstrap-4.0.0-dist/others/jquery-3.2.1.slim.min.js"></script>
<script src="../LearnBootstrap4/bootstrap-4.0.0-dist/js/bootstrap.min.js"></script>
<script src="../LearnBootstrap4/bootstrap-4.0.0-dist/others/popper-1.12.9.min.js"></script>
<script src="../LearnBootstrap4/bootstrap-4.0.0-dist/js/bootstrap.bundle.min.js"></script>

<script>
//提示框的JS代码
$(function(){
'use strict';
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>

</html>

总结

这是比较基础的一些组件和使用方法,bootstrap4官网还有很多功能强大的组件,有兴趣的话可以去看看,这次就先暂时更新这一点,后面有补充的话会再更新的。