提示：刚学的bootstrap，学的蛮抽象的，总的来说看的懂文档就好，记录一下学习重点
文章目录
目录
一、Bootstrap是什么？
Bootstrap 是前端UI(UI: user image (用户界面))响应式框架。
它提供了一套广泛使用的 HTML、CSS 和 JavaScript 组件，以及一系列可定制的样式和布局工具。
响应式： 屏幕尺寸的变化 让页面有不同的布局效果。
界面跟随屏幕尺寸变化而变化（就是有不同的版本效果），我们叫做响应式。
Bootstrap 官网就是一个响应式网页
作用
1、提高开发响应式项目的效率
2、提供了大量精美的组件
怎么使用
1、下载bootstrap相关的文件(就是把css和js引入项目)
2、 看文档复制组件的html代码、修改代码
3、 布局、组件、工具类
二、使用步骤
1.在官网下载相关包
官网地址：http://bootcss.com
中文文档地址(v4版)：https://v4.bootcss.com/docs/getting-started/introduction/
基本使用示例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基本模板</title>
<!-- 引入核心的CSS文件 (主要文件) -->
<link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
</head>
<body>
//从文档中复制的组件
<div class="container bg-primary pt-3 pb-3">
<button class="btn btn-success">LOGO</button>
</div>
//从文档中复制的组件
<div class="container mt-3">
<div class="dropdown">
<button class="btn btn-warning dropdown-toggle text-white" type="button" data-toggle="dropdown"
aria-expanded="false">
一级菜单
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">二级菜单A</a>
<a class="dropdown-item" href="#">二级菜单B</a>
<a class="dropdown-item" href="#">二级菜单C</a>
</div>
</div>
</div>
<!-- 首先引入jquery -->
<script src="./libs/jQuery/jQuery.min.js"></script>
<!-- 再引入核心的js文件 （下拉菜单） -->
<script src="./libs/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>注：
Bootstrap 自带的大部分组件都需要依赖 JavaScript 才能起作用。具体来说，这些组件依赖 jQuery,Popper以及我们自己开发的 JavaScript 插件注意，顺序很重要，不能错，首先是 jQuery，然后是 bootstrap，最后是我们自己的 JavaScript 插件。
2.UI响应式原理
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基本模板</title>
<style>
h2 {
display: none;
}
/* max-width <= 575px 最大宽度*/
/* min-width >= 576px 最小宽度*/
/* 特小屏幕下 页面背景红色 */
@media (max-width: 575px) {
body {
background-color: red;
}
.title-1 {
display: block;
}
}
/* 小屏幕 (大于等于576px 小于等于 767px) */
@media (min-width: 576px) and (max-width: 767px) {
body {
background-color: blue;
}
.title-2 {
display: block;
}
}
/* 中等屏幕 (大于等于768px 小于等于 991px) */
@media (min-width: 768px) and (max-width: 991px) {
body {
background-color: green;
}
.title-3 {
display: block;
}
}
/* 大等屏幕 (大于等于992px 小于等于1199px) */
@media (min-width:992px) and (max-width: 1199px) {
body {
background-color: deepskyblue;
}
.title-4 {
display: block;
}
}
/* 特大等屏幕 (大于等于1200px) */
@media (min-width:1200px) {
body {
background-color: pink;
}
.title-5 {
display: block;
}
}
</style>
</head>
<body>
<h2 class="title-1">我是特小屏幕</h2>
<h2 class="title-2">我是小屏幕</h2>
<h2 class="title-3">我是中等屏幕</h2>
<h2 class="title-4">我是大屏幕</h2>
<h2 class="title-5">我是特大屏幕</h2>
</body>
</html>3.使用bootstrap做一个轮播图案例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery</title>
<link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
<style>
#bannerId .carousel-indicators li {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: red;
}
</style>
</head>
<body>
<div class="">
<!-- bootstrap轮播图 xxx -->
<div id="bannerId" class="carousel slide" data-ride="carousel">
<!-- 导航点(指示点) -->
<ol class="carousel-indicators">
<li data-target="#bannerId" data-slide-to="0" class="active"></li>
<li data-target="#bannerId" data-slide-to="1"></li>
<li data-target="#bannerId" data-slide-to="2"></li>
<li data-target="#bannerId" data-slide-to="3"></li>
<li data-target="#bannerId" data-slide-to="4"></li>
</ol>
<!-- 图片容器 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://img.alicdn.com/imgextra/i1/6000000003534/O1CN01V3YPiK1byccyVZDwJ_!!6000000003534-0-octopus.jpg" class="d-block w-100" alt="1">
</div>
<div class="carousel-item">
<img src="https://img.alicdn.com/imgextra/i4/O1CN01GOlEEW1zidUliI8O7_!!6000000006748-2-tps-846-472.png" class="d-block w-100" alt="2">
</div>
<div class="carousel-item">
<img src="https://img.alicdn.com/imgextra/i4/O1CN01cmWoxh1S6H07yrmcM_!!6000000002197-0-tps-846-472.jpg" class="d-block w-100" alt="3">
</div>
<div class="carousel-item">
<img src="https://img.alicdn.com/imgextra/i4/O1CN01LHWdyp1yvAidcNMDR_!!6000000006640-0-tps-846-472.jpg" class="d-block w-100" alt="4">
</div>
<div class="carousel-item">
<img src="https://img.alicdn.com/imgextra/i2/O1CN01lFNk4Z1JDkviZe8EG_!!6000000000995-2-tps-846-472.png" class="d-block w-100" alt="5">
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#bannerId" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#bannerId" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
</div>
<script src="./libs/jQuery/jQuery.min.js"></script>
<script src="./libs/bootstrap/js/bootstrap.bundle.min.js"></script>
<script>
</script>
</body>
</html>三、栅格布局
Bootstrap 栅格系统是一种用于网页布局的强大工具，它基于12列的布局系统，可以让你在不同的屏幕尺寸下轻松地创建响应式布局。：
-
容器（Container）：容器是用来包裹网页内容的。Bootstrap 提供了两种容器：
.container和.container-fluid。.container是固定宽度的，而.container-fluid则是100%宽度的，会充满整个父容器。 -
行（Row）：行用来包含列。在 Bootstrap 中，行使用
.row类来定义。 -
列（Column）：列用来放置实际的内容。每一行（
.row）被分成12列。你可以使用.col-*类来定义列的大小，其中*是一个数字，表示占据的列数。例如，.col-6表示占据6列，.col-12表示占据全部12列。 -
响应式布局：Bootstrap 栅格系统允许你根据不同的屏幕尺寸定义不同的布局。你可以使用
.col-*-*类来定义在不同屏幕尺寸下的列大小。常见的屏幕尺寸包括：xs , sm , md , lg 和 xl 。例如，.col-md-6表示在中等屏幕尺寸下占据6列。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery</title>
<link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
</head>
<body>
<!--
版心容器的类名
.container
每一行的类名
.row
每一列的类名
col 特小屏幕下
col-sm-* 小屏幕下
col-md-* 中等屏幕下
col-lg-* 大屏幕下
col-xl-* 特大屏幕下
-->
<!-- 把一行平均分成3列表 -->
<style>
.row > div {
height: 50px;
border: 1px solid #000;
}
</style>
<div class="container">
<!-- .row 行容器 -->
<div class="row">
<!-- 放了4个.col ，表示特小屏幕以上 平均分成4列 -->
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
</div>
<!--
col-sm-*
col-sm 每一列都平均分
col-sm-5 表示 5/12 的意思
在小屏幕下 1行2列表 col-sm-6 12 / 2 = 6 这个*最大值为12. （所有子元素的数字相加超过12就会换行）
中等屏幕下 1行3列表 col-md-4 12 / 3 = 4
大屏幕以上 1行4列表 col-lg-3 12 / 4 = 3
-->
<style>
.box .row > div {
height: 150px;
border: 1px solid #000;
}
</style>
<div class="container box ">
<div class="row mt-3" >
<div class="col-sm-6 col-md-4 col-lg-3">1</div>
<div class="col-sm-6 col-md-4 col-lg-3">2</div>
<div class="col-sm-6 col-md-4 col-lg-3">3</div>
<div class="col-sm-6 col-md-4 col-lg-3">4</div>
<div class="col-sm-6 col-md-4 col-lg-3">5</div>
<div class="col-sm-6 col-md-4 col-lg-3">6</div>
<div class="col-sm-6 col-md-4 col-lg-3">7</div>
<div class="col-sm-6 col-md-4 col-lg-3">8</div>
</div>
<div class="row mt-3">
<!-- 5/12 -->
<div class="col-lg-5">5555</div>
<!-- 8/12 -->
<div class="col-lg-7">88888</div>
</div>
</div>
<script src="./libs/jQuery/jQuery.min.js"></script>
<script src="./libs/bootstrap/js/bootstrap.bundle.min.js"></script>
<script>
</script>
</body>
</html>四、表格布局
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基本模板</title>
<!-- 引入bootstrap核心css文件 -->
<link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-3 box">
<button data-val="danger" class="btn btn-danger">偏红</button>
<button data-val="success" class="btn btn-success">偏绿</button>
<button data-val="warning" class="btn btn-warning">偏黄</button>
<button data-val="primary" class="btn btn-primary">偏蓝</button>
</div>
<div class="container mt-3">
<!-- 表格布局 （使用的就是以下这些类名） -->
<table class="table table-success table-hover table-bordered">
<thead>
<tr class="bg-success">
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>成绩</th>
<th>地址</th>
<th>管理</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>20</td>
<td>男</td>
<td>80</td>
<td>广州从化</td>
<td>
<button class="btn btn-danger btn-sm">删除</button>
<button class="btn btn-primary btn-sm">编辑</button>
</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>20</td>
<td>男</td>
<td>80</td>
<td>深圳龙华</td>
<td>
<button class="btn btn-danger btn-sm">删除</button>
<button class="btn btn-primary btn-sm">编辑</button>
</td>
</tr>
<tr>
<td>3</td>
<td>赵五</td>
<td>20</td>
<td>男</td>
<td>80</td>
<td>佛山丹灶</td>
<td>
<button class="btn btn-danger btn-sm">删除</button>
<button class="btn btn-primary btn-sm">编辑</button>
</td>
</tr>
</tbody>
</table>
</div>
<script src="./libs/jQuery/jQuery.min.js"></script>
<script>
$(".box .btn").on("click",function(){
// 获取val属性值
var v = $(this).attr("data-val");
// 设置表格的类名
$(".table")[0].className = `table table-${v} table-hover table-bordered`
$(".table thead tr")[0].className = `bg-${v}`
})
</script>
</body>
</html>总结
看中文文档，看中文文档，看中文文档，重要的事情说三遍。bootstrap就是使用预先设定好的类名来做网页以达到提高效率的目的，不要纠结那些特定的类名是什么意思。
扫一扫
611
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
