前端开发库 - BootStrap JQuery Sass

Bootstrap

引入 Bootstrap

添加如下代码到 HTML 顶部来引入 Bootstrap

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>

使图片自适应移动端

为 image 标签上设置 class 属性为 img-responsive

用 Bootstrap 居中文本

将class 属性设置为 text-center 就可以实现
<h2 class="red-text text-center">your text</h2>

创建一个 Bootstrap 按钮

Bootstrap 的 button 元素有着独有的、比默认 HTML 按钮更好的样式风格
一般情况下，btn 和 btn-default 两个 classes 修饰的 button 元素宽度与它包含的文本相同

<button class="btn btn-default">Submit</button>

创建一个 Bootstrap 块级元素按钮

通过为按钮添加 class 属性 btn-block 使其成为块级元素，按钮会伸展并填满页面的整个水平空间，后续的元素会流到这个块级元素的下方，即 “另起一行”

<button class="btn btn-default btn-block">Submit</button>
这个按钮会 100% 占满所有的可用宽度

Bootstrap 按钮的不同主题

btn-primary class 的颜色是应用的主要颜色。（深蓝色）
btn-info class 通常用在备选操作上（浅蓝色）
btn-danger class 用来提醒用户此行为具有破坏性（红色）

添加图标

<i class="fas fa-info-circle"></i>

Bootstrap 栅格系统

<div class="row">
	<div class="col-xs-6"></div>
	<div class="col-xs-6">
		<div class="well "></div>
		# Well 是一种会引起内容凹陷显示或插图效果的容器 
		<div>
	</div>
</div>
栅格系统会把一个百分百的屏幕分成12份，如果是
cosl-xs-6 就是在小屏幕的时候占屏幕的6格 刚好就说手机屏幕的一半
col-md-3 就是当这个内容在电脑上显示，就占3格，刚好是电脑屏幕的1/4。

JQuery