Bootstrap
概念
传统的使用div+CSS实现响应式布局，为了适配各种设备，会写大量的CSS代码，导致开发效率降低。Bootstrap是一个移动端优先用于快速搭建响应式布局的前端UI框架，能够使用已经写好的代码用于搭建出一个具有良好适应性的页面。Bootstrap内置了很多的组件，比如轮播图、标签页、分页、表单等，用户可以直接使用。Bootstrap还提供了一套用于构建响应式布局的栅格系统，用于快速搭建一个良好适应性的页面布局。但Bootstrap有些内置组件不易修改，其本身用了JavaScript来实现的。
目前国内常用Bootstrap版本是3.3.7 ，很稳定，其内部使用了浮动布局来实现响应式。国外以及国内大公司常用的是4.6版本。4.6版本不兼容IE低版本。Bootstrap3使用Less语言，有4种栅格类，使用px为单位，使用push和pull向左右移动，使用floatl的布局方式。Bootstrap4使用Sass语言编写，有5种栅格类，除部分margin:和padding使用px，其余使用rem和em为单位，偏移列通过offset-类设置选择弹性盒模型（flexbox）。且Bootstrap4新增网格层适配了移动端，全面引入ES6新特性（重写所有JavaScript:插件），css文件减少了至少40％，所有文档都用Markdown编辑器重写，放弃对IE8的支持。
引入
引入CSS
- 官网下载对应版本的生产版本的Bootstrap文件。
- 页面中
<head>中通过<link>引入bootstrap.min.css
引入jQuery以及js
-
jquery：一个JavaScript框架，主要用于减少页面中的JavaScript代码，bootstrap的组件使用了jQuery，所以说引入jQuery3.0及以上版本(下载地址)。
-
除了jQuery以外，还需要引入
bootstrap.min.js以及bootstrap.bundle.min.js。<!-- js文件推荐在</body>之间通过<script>引入: --> <script src="jquery文件地址"></script> <script src="bootstrap.min.js文件地址"></script> <script src="bootstrap.bundle.min.js文件地址"></script>
一个标准的使用Bootstrap页面初始代码
<!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="bootstrap-4.6.0-dist/css/bootstrap.min.css">
</head>
<body>
<!-- 所有内容:测试按钮 -->
<button class="btn btn-info">测试效果</button>
<!--所有内容结束 -->
<!-- 保证使用bootstrap的组件能够正常工作 -->
<script src="jquery-3.0.0.min.js文件地址"></script>
<script src="bootstrap.min.js文件地址"></script>
<script src="bootstrap.bundle.min.js文件地址"></script>
</body>
</html>
两种常见使用流程
- 单独的使用CSS部分。如果页面只使用栅格系统或者不需求js的组件，只需要引入CSS即可。
- 如果要使用一些带js的插件，必须引入js文件。
栅格系统
概念
Bootstrap内置的一整套用于快速搭建响应式布局的系统，内置了很多的用于布局的类，我们需要按照它所要求的规范去使用内置的class来搭建页面。
主要内容
-
12列系统
Bootstrap会将一行看成12列，12列由该行的内容进行分配。
-
布局的HTML架构
- 最外层容器(指的一个模块，)会给
.container让容器本身有自适应效果- 屏幕宽度>=1200(xl) 容器宽度为1140px
- 屏幕宽度>=992(lg) 容器宽度为960px
- 屏幕宽度>=768(md) 容器宽度为720px
- 屏幕宽度>=568(sm) 容器宽度为540px
- 屏幕宽度<568 容器宽度为100%
.container容器内部只允许有.row的直接子标签- 每个
.row的容器内部会采用12列系统 - 12列系统内的标签可以通过bootstrap所提供的内置的类来进行指定分配列数。
- 可以设置一行在不同的屏幕宽度下占据的列数
- 特大(1140px)·：一行显示2个:
col-xl-6 - 大(960px):一行显示3个：
col-lg-4 - 中(720px):一行显示6个：
col-md-2 - 小(540px):一行显示2个:
col-sm-6 - 特小：默认是一行一个:
col-12
- 特大(1140px)·：一行显示2个:
- 希望每一行的内容列数自动分配，给.row的每个直接子标签添加
.col
- 每个
- 最外层容器(指的一个模块，)会给
常见组件
可查看中文文档
按钮
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-info">Primary</button>
<button type="button" class="btn btn-danger">Primary</button>
<button type="button" class="btn btn-light">Primary</button>
表单
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
表格
<table class="table">
</table>
卡片
<div class="card" style="width: 18rem;">
<img src="image/id1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">花瓶1</h5>
<p class="card-text">好看又不贵</p>
<a href="#" class="btn btn-primary">立即购买</a>
</div>
</div>
警告框
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those
fields below.
<button
type="button"
class="close"
data-dismiss="alert"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
轮播图
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="image/banner1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="image/banner2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="image/banner3.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="image/banner4.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="image/banner5.jpg" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
下拉菜单
<div class="dropdown">
<button
class="btn btn-secondary dropdown-toggle"
type="button"
id="dropdownMenuButton"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
标签页
<ul id="myTab" class="nav nav-tabs">
<li class="active">
<a href="#home" data-toggle="tab">
菜鸟教程
</a>
</li>
<li><a href="#ios" data-toggle="tab">iOS</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p>
</div>
<div class="tab-pane fade" id="ios">
<p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>
</div>
</div>
模态框
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo1">
Launch demo modal
</button>
<div class="modal fade" id="demo1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">登录</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- 表单 -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">重置</button>
<button type="button" class="btn btn-primary">登录</button>
</div>
</div>
</div>
</div>
6919
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
