Bootstrap

最新推荐文章于 2024-12-05 00:16:26 发布

qhbgyu5664

最新推荐文章于 2024-12-05 00:16:26 发布

阅读量305

点赞数

文章标签： bootstrap css html5

本文链接：https://blog.csdn.net/qhbgyu5664/article/details/119900942

版权

本文详细介绍了Bootstrap 4的使用，包括响应式布局、标题类、排版类、颜色设置、表格、图像处理、信息提示框、按钮、徽章、进度条、分页、列表组、卡片、下拉菜单、折叠、导航、面包屑导航、表单、模态框、提示框、弹出框、滚动监听和弹性布局等，是全面学习和应用Bootstrap的实用教程。

摘要由CSDN通过智能技术生成

1. Bootstrap

Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目
1.使用 Bootstrap 4 CDN
1.1 移动设备优先设置–head标记中引入
<meta name=“viewport” content=“width=device-width, initial-scale=1, shrink-to-fit=no”>
1.2 引入Bootstrap依赖的css和js文件
1.3 设置容器元素【div/body…】
给指定的html元素设置 class=“container” / class=“container-fluid”
container—用于固定宽度并支持响应式布局的容器
container-fluid—用于 100% 宽度，占据全部视口（viewport）的容器
2.从官网 getbootstrap.com 下载 Bootstrap 4依赖文件
2.1 移动设备优先设置–head标记中引入
2.2 引入Bootstrap依赖的css和js文件【提前准备jquery文件】
2.3 设置容器元素【div/body…】

2.Bootstrap响应式

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列
Bootstrap 4 的网格系统是响应式的，列会根据屏幕大小自动重新排列
Bootstrap 4 网格系统有以下 5 个类:
1、.col- 针对所有设备
2、.col-sm- 平板 - 屏幕宽度等于或大于 576px
3、.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px
4、.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px
5、.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px
Bootstrap4 网格系统规则:
1、网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距
2、使用行来创建水平的列组
3、内容需要放置在列中，并且只有列可以是行的直接子节点
4、预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局
5、列通过填充创建列内容之间的间隙。这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移
6、网格列是通过跨越指定的 12 个列来创建。例如，设置三个相等的列，需要使用三个 .col-sm-4 来设置
7、Bootstrap 3 和 Bootstrap 4 最大的区别在于 Bootstrap 4 现在使用 flexbox（弹性盒子）而不是浮动。 Flexbox 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列

3.Bootstrap标题类

display–Display 类来控制标题的样式: .display-1, .display-2, .display-3, .display-4

4.Bootstrap4 更多排版类

font-weight-normal:普通文本
font-weight-bold:加粗文本
font-weight-light 更细的文本
font-italic:斜体文本
lead:让段落更突出,字体放大
small:指定更小文本 (为父元素的 85% )
text-left 左对齐
text-center 居中
text-right 右对齐
text-nowrap:段落中超出屏幕部分不换行
.text-nowrap:段落中超出屏幕部分不换行
.text-nowrap:段落中超出屏幕部分不换行
text-lowercase:设定文本小写
text-uppercase:设定文本大写
text capitalize 设定单词首字母大写

5.Bootstrap颜色设置

文本颜色：.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark and .text-light
背景颜色：.bg-muted, .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-white, .bg-dark and .bg-light

6.表格设置

属性名称	用法	含义
table	class="table"	默认的表格的宽高，和行分割线
table-striped	class="table-striped"	默认的tbody中的行条纹显示
table-bordered	class="table-bordered"	为表格添加边框
table-hover	class="table-hover"	为表格的每一行添加鼠标悬停效果（灰色背景）
.table-info, .table-primary, .table-success,......	class="table-info"	表格设置背景颜色

7.Bootstrap4 图像形状

rounded 类可以让图片显示圆角效果
rounded-circle 类可以设置椭圆形图片
img-thumbnail 类用于设置图片缩略图(图片有边框)
使用 .float-right 类来设置图片右对齐
使用 .float-left 类来设置图片左对齐
img-fluid:设置响应式图片,设置了 max-width: 100%; 、 height: auto;

8.Bootstrap4 信息提示框

提示框:.alert-primary, .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-secondary, .alert-white, .alert-dark and .text-light

<body class="container">
		<h4>提示框:.alert-primary, .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-secondary, .alert-white, .alert-dark and .text-light</h4>
		<div class="alert alert-primary">
		    <strong>primary!</strong> 指定操作primary提示信息。
		</div>
		<div class="alert alert-success">
		    <strong>success!</strong> 指定操作success提示信息。
		</div>
		<div class="alert alert-info">
		    <strong>info!</strong> 指定操作info提示信息。
		</div>
		<div class="alert alert-success">
		    信息提示框内容中可以设置<a href="#">超链接</a>。
		</div>
		<div class="alert alert-success alert-dismissible fade show">
			<p>关闭提示框。</p>
			<p>1.提示框元素设置alert-dismissible</p>
			<p>2.关闭按钮设置class="close"  data-dismiss="alert"</p>
		    <input type="button" class="close" data-dismiss="alert" value="x"/>
		</div>
</body>

9.Bootstrap4 按钮

btn–按钮没有边框和背景
btn-xxxx–设置按钮背景
btn-outline-primary—设置按钮边框颜色鼠标进入后修改背景颜色
btn-lg—大按钮
btn-sm—小按钮
btn-block—设置块级按钮
.active 类可以设置按钮是可用的
disabled 属性可以设置按钮是不可点击的

9.Bootstrap4 按钮组

btn-group 类用于创建按钮组，为包含按钮的div设置
btn-group-lg 类用于创建大按钮组，为包含按钮的div设置
btn-group-sm 类用于创建小按钮组，为包含按钮的div设置
下拉菜单
1.创建下拉菜单 class=“dropdown-menu”
2.创建下拉菜单每一项 class=“dropdown-item”
3.按钮绑定下拉菜单,class设置dropdown-toggle,按钮设置data-toggle=“dropdown”
4.为了当前按钮与下拉菜单组合，使用div设置class="btn-group"将按钮与下拉菜单包围
btn-group-vertical:设置垂直按钮组

10.Bootstrap4 徽章（Badges）

<body>
		<div class="container">
			<p><span class="badge badge-success">badge</span> -- 设置徽章</p>
			<p><span class="badge badge-secondary">badge-secondary</span> -- 设置徽章颜色</p>
			<p><span class="badge badge-pill badge-secondary">badge-pill</span> 类来设置胶囊形状徽章</p>
		</div>
</body>

11.Bootstrap4 进度条

创建一个基本的进度条的步骤如下：
1.添加一个带有 .progress 类的 div
2.接着，在上面的 div 内，添加一个带有 class .progress-bar 的空的 div
3.添加一个带有百分比表示的宽度的 style 属性，例如 style=“width:70%” 表示进度条在 70% 的位置
style="height: 30px;"设置在class="progress"div上表示修改进度条的粗细
class="progress-bar"的div元素中设置精度标签
class="progress-bar"的div元素设置bg-XXX设置进度条颜色
class="progress-bar"的div元素progress-bar-striped 类来设置条纹进度条
progress-bar-animated 类可以为进度条添加动画

12.Bootstrap4 分页

1.在ul元素上添加 .pagination 类
2.在 li 元素上添加 .page-item 类
3.在 a 元素上添加 .page-link 类
在class="page-item"的li上设置.active 类来高亮显示,体现当前被选中的页码
在class="page-item"的li上设置.disabled 类可以设置分页链接不可点击
pagination-lg 类设置大字体的分页条目，.pagination-sm 类设置小字体的分页条目

<body>
		<div class="container">
			<ul class="pagination pagination-lg">
				<li class="page-item"><a class="page-link

最低0.47元/天解锁文章