Bootstrap概述使用及栅格系统
Posted 遥岑.
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Bootstrap概述使用及栅格系统相关的知识，希望对你有一定的参考价值。
目录
Bootstrap概述
什么是Bootstrap
Bootstrap是一个基于html、CSS和javascript语言编写的框架，具有简单、灵活的特性，拥有样式库、组件和插件。
Bootstrap常用来开发响应式布局和移动设备优先的Web项目，能够帮助开发者快速搭建前端页面。
框架：一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件，使用者要按照框架所规定的某种规范进行开发
Bootstrap特点
- 移动设备优先，自 Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式
- 浏览器支持，所有的主流浏览器都支持Bootstrap
- 容易上手
- 响应式设计，Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机
- 包含功能强大的内置组件
Bootstrap的组成
- 基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构
- CSS：Bootstrap 自带特性有全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的class，以及一个先进的网格系统
- 组件：Bootstrap包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等
- JavaScript插件：Bootstrap 包含了十几个自定义的 jQuery 插件
Bootstrap的使用
下载编译包,在页面中导入其核心的css文件和JavaScript文件。
<link href="bootstrap.min.css" ref="stylesheet"/>
<script src="../js/jquery-3.4.1.js"></script>
<script src="bootstrap.min.js" type="text/javascript"></script>
使用CDN提供的文件地址（必须联网）。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
Bootstrap布局容器
Bootstrap需要为页面内容和栅格系统包裹一个.container容器，Bootstrap 预先定义好了这个类，叫.container，它提供了两个作此用处的类。
这两种容器不能互相嵌套。
- .container: 类用于固定宽度并支持响应式布局的容器
<div class="container"></div>
- .container-fluid :类用于 100% 宽度，占据全部视口（viewport）的容器
<div class="container-fluid"></div>
Bootstrap的全局css样式
在移动设备上禁止缩放功能
<meta user-scalable=no />
标题标签
h1 - h6都有对应的class属性：.h1 ~ .h6 。
页面主体（body）
字号(font-size)：14px
行高(line-height): 1.428
表格
.table：表格的基本样式
.table-striped：斑马线效果(隔行变色)
.table-bordered：边框
.table-hover：鼠标悬停效果(对鼠标悬停做出响应)
.table-condensed：表格紧缩样式
- 状态类样式：设置行或单元格的样式
.table-active
.table-success: 成功的
.table-info：普通的
.table-primary：主要的
.table-warning: 警告的
.table-danger：危险的
表单
.form-group：可以让表单控件之间有更好的位置排列
.form-control：可以让使用该样式的input、textarea、select的宽度为100%
按钮
- 按钮的样式
<button type="button" class="btn btn-primary">大学</button>
<button type="button" class="btn btn-success">大学</button>
<button type="button" class="btn btn-warning">大学</button>
<button type="button" class="btn btn-danger">大学</button>
<button type="button" class="btn btn-info">大学</button>
- 按钮的尺寸
.btn-lg：大按钮
.btn-sm：小按钮
.btn-xs：超小按钮
.btn-block：按钮的宽度为父容器的100%
图片样式
.img-rounded：圆角图片
.img-circle：圆形图片
.img-thumbnail：边框圆角
.img-responsive：响应式图片
.center-block：图片水平居中
辅助类
- 文本的颜色
.text-success
.text-primary
.text-warning
.text-info
.text-danger
- 背景颜色
.bg-success
.bg-primary
.bg-warning
.bg-info
.bg-danger
- 三角符号
<span class="caret"></span>
- 清除浮动
<div class="clearfix"></div>
- 显示和隐藏内容
<div class="hidden"></div>
<div class="show"></div>
Bootstrap栅格系统
栅格系统：grid systems，也叫网格系统，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多12列。
将屏幕或视口划分成最多12列，通过一系列的行列组合来创建页面布局，可以将我们的内容放在列中。
Bootstrap里面container宽度是固定的，但是不同屏幕下，container的宽度不同，我们再把container划分为12等份。
- 行(row)必须放在容器(.container 或 .container-fluid)中，这样才会有合适的排列和内补白
- 每一行可以划分为若干列(col)，列只能作为行的直接子元素
- 栅格系统中的列是通过指定1到12的值来表示其跨越的范围
- 如果一行（row）中包含了的列（column）大于 12，多余的列（column）所在的元素将被作为一个整体另起一行排列
- 每一列默认有左右15像素的padding
- 可以同时为一列指定多个设备的类名，以便划分不同份数，例如"col-md-4 col-sm-6"
- 实现列的平均划分，需要给列添加类前缀
| 类前缀 | 设备 |
|---|---|
| col-xs-* | 超小屏幕、手机(<768px) |
| col-sm-* | 小屏幕、平板(>=768px) |
| col-md-* | 中等屏幕 桌面显示器 (>=992px) |
| col-lg-* | 大屏幕、大桌面显示器 (>=1200px) |
列嵌套
栅格系统内置的栅格系统将内容再次嵌套。
就是一个列内再分成若干份小列，我们可以通过添加一个新的.row元素和一系列.col-sm-* 元素到已经存在的.col-sm-*元素内。
我们列嵌套最好加一个行row这样可以取消父元素的padding值，并且高度自动和父级高度一样高。
列偏移（向右偏移）
使用.col-md-offset-*类可以将列向右偏移，这些实际是通过使用选择器为当前元素添加了左侧的边距（margin）。
.col-md-offset- * ：表示偏移的列数。
列排序
通过使用.col-md-push-* 和 col-md-pull-* 类就可以很容易的改变列的顺序。
删除网格间距
使用.row-no-gutters删除网格间距。
流式容器下的网格
流式容器下的网格(container-fluid)：栅格的宽度为100%。
字体图标
- 在css文件的同级目录中包含字体文件目录–fonts
- 使用标签加入字体图标
<span class="glyphicon glyphicon-ok"></span>
下拉菜单
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
主题
<span class="caret"></span>
</button>
<ul class="dropdown-menu" >
<li>
<a href="#">Java</a>
</li>
<li>
<a href="#">数据挖掘</a>
</li>
<li>
<a href="#">数据通信/网络</a>
</li>
<li class="divider"></li>
<li>
<a href="#">分离的链接</a>
</li>
</ul>
</div>
按钮组
- 在容器中加入btn-group,可以将一组按钮放在同一行
- 在按钮组中除了第一个和最后一个按钮之外，其他按钮都不是圆角
<div class="btn-group">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-step-backward"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-chevron-left"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-chevron-right"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-pause"></span>
</button>
</div>
按钮工具栏
在容器的class属性中加入btn-toolbar,然后和按钮组结合使用。
输入组框
- 设置容器的class属性为input-group
- 在容器中添加,设置class属性为input-group-addon
响应式工具
为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。
与之相反的是visible-xs visible-sm visible-md visible-lg显示某个页面内容。
折叠菜单
<!--data-toggle自定义属性 属性值与div的class属性值相同 点击超链接跳转到给的div上(id属性)-->
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample">
遥岑
</a>
<div class="collapse" id="collapseExample">
<div class="card card-body">
谨以遥岑敬钱塘
</div>
<div class="card card-body">
谨以遥岑
</div>
</div>
轮播图
<div id="carouselExampleControls" 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>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/slide1.webp" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="images/slide2.webp" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="images/slide3.webp" class="d-block w-100" alt="...">
</div>
</div>
<!-- 查看上一张 -->
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<!-- 查看下一张 -->
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
以上是关于Bootstrap概述使用及栅格系统的主要内容，如果未能解决你的问题，请参考以下文章
JavaLearn#（25）Ajax相关知识三级联动案例Bootstrap入门栅格系统排版表格字体图标等简单概述
JavaLearn#（25）Ajax相关知识三级联动案例Bootstrap入门栅格系统排版表格字体图标等简单概述