Bootstrap 4

最新推荐文章于 2022-04-11 13:26:55 发布

zhuxyyds

最新推荐文章于 2022-04-11 13:26:55 发布

阅读量481

点赞数 1

文章标签： bootstrap

本文链接：https://blog.csdn.net/zhuxyyds/article/details/120454793

版权

1.Bootstrap简介

Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。

Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。

Sass--CSS扩展语言

Mixin--包含一段合法Sass代码，类似于C语言的宏定义。调用Mixin时，解释器会将Mixin扩展成它所包含的完整的Sass代码，因此可以有效地减少代码重复，从而写出更加干净的代码。CSS不支持Mixin，因此重复和类似的代码必须挨个书写。

2.安装使用

国内推荐使用 Staticfile CDN 上的库：

		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<!--width=device-width 表示宽度是设备屏幕的宽度。
			initial-scale=1 表示初始的缩放比例。
			shrink-to-fit=no 自动适应手机屏幕的宽度。-->
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

3.创建bootstrap 4 第一个网页

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Bootstrap4的使用</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<!--width=device-width 表示宽度是设备屏幕的宽度。
			initial-scale=1 表示初始的缩放比例。
			shrink-to-fit=no 自动适应手机屏幕的宽度。-->
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
	</head>
	<body>

	</body>

2.移动设备优先

为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：

width=device-width 表示宽度是设备屏幕的宽度。

initial-scale=1 表示初始的缩放比例。

shrink-to-fit=no 自动适应手机屏幕的宽度。

3.容器类

Bootstrap 4 需要一个容器元素来包裹网站的内容。

我们可以使用以下两个容器类：

.container 类用于固定宽度并支持响应式布局的容器。

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

			<div class=container>
				<h1>哈喽</h1>
				<h1>container</h1>
			</div>
			<div class=container-fluid>
				<h1>哈喽</h1>
				<h1>container-fluid</h1>
			</div>

4.Bootstrap4 网格系统

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。

Bootstrap 4 网格系统有以下 5 个类:

1、.col- 针对所有设备

2、.col-sm- 平板 - 屏幕宽度等于或大于 576px

3、.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px

4、.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px

5、.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px

第一个例子：创建一行(<div class="row">)。然后，添加需要的列( .col-*-* 类中设置)。第一个星号 (*) 表示响应的设备: sm, md, lg 或 xl, 第二个星号 (*) 表示一个数字, 同一行的数字相加为 12。

第二个例子: 不在每个 col 上添加数字，让 bootstrap 自动处理布局，同一行的每个列宽度相等：两个 "col" ，每个就为 50% 的宽度。三个 "col"每个就为 33.33% 的宽度，四个 "col"每个就为 25% 的宽度，以此类推。同样，你可以使用 .col-sm|md|lg|xl 来设置列的响应规则。

			<div class="row">
				<div class="col-md-2" style="background-color:lavender;" >占2格</div>
				<div class="col-md-2" >占2格</div>
				<div class="col-md-2" >占2格</div>
				<div class="col-md-2" >占2格</div>
				<div class="col-md-2" >占2格</div>
				
			</div>

			<div class="row">
				<div class="col md 5"  style="background-color:lavender;">4</div>
				<div class="col md 4"  >3</div>
				<div class="col md 3"  style="background-color:lavender;">2</div>
			</div>
			<div class="row">
				<div class="col-md-2"  style="background-color:lavender;">4</div>
				<div class="col-md-2"  >3</div>
				<div class="col-md-2"  style="background-color:lavender;">2</div>
				<div class="col-md-2"  >4</div>
				<div class="col-md-2"  style="background-color:lavender;">4</div>
				<div class="col-md-2"  >4</div>
			</div>

偏移：

偏移列通过 offset-*-* 类来设置。第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( * )可以是 1 到 11 的数字。

为了在大屏幕显示器上使用偏移，请使用 .offset-md-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。

			<div class="row">
				<div class="col-md-3 bg-warning " >
					<h1>无偏移</h1>
				</div>
			</div>
			<div class="row">
				<div class="col-md-4 bg-warning offset-md-2">
					<h1>向右偏移2格</h1>
				</div>
				
			</div>

5.Bootstrap4 文字排版

Bootstrap 4 默认的 font-size 为 16px, line-height 为 1.5。

默认的 font-family 为 "Helvetica Neue", Helvetica, Arial, sans-serif。

此外，所有的 <p> 元素 margin-top: 0 、 margin-bottom: 1rem (16px)。

<h1> - <h6>

Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式。

			<div class="container">
				<h1>标题1</h1>
				<h2>标题2</h2>
				<h3>标题3</h3>
				<h4>标题4</h4>
				<h5>标题5</h5>
				<h6>标题6</h6>
			</div>

Display 标题类

Bootstrap 还提供了四个 Display 类来控制标题的样式: .display-1, .display-2, .display-3, .display-4。

			<div class="container">
				<h1>display标题</h1>
				<h1>display可以输出更大更粗的字体</h1>
				<h1 display-1>display1</h1>
				<h1 display-2>display2</h1>
				<h1 display-3>display3</h1>
				<h1 display-4>display4</h1>
			</div>

<small>

在 Bootstrap 4 中 HTML <small> 元素用于创建字号更小的颜色更浅的文本

			<div class="container">
				<h1>正常标题 <small>副标题</small> </h1>
				<h1>正常标题</h1>
			</div>

<mark>

Bootstrap 4 定义 <mark> 为黄色背景及有一定的内边距:

<abbr>

Bootstrap 4 定义 HTML <abbr> 元素的样式为显示在文本底部的一条虚线边框.

<blockquote>

对于引用的内容可以在 <blockquote> 上添加 .blockquote 类 .

<dl>

Bootstrap 4 定义 HTML <dl> 元素的样式

<code>

Bootstrap 4 定义 HTML <code> 元素的样式

<kbd>

Bootstrap 4 定义 HTML <kbd> 元素的样式

<pre>

Bootstrap 4 定义 HTML <pre> 元素的样式

6.Bootstrap4 颜色

Bootstrap 4 提供了一些有代表意义的颜色类：

.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark and .text-light

<h2>代表指定意义的文本颜色</h2>

<p class="text-muted">柔和的文本。</p>

<p class="text-primary">重要的文本。</p>

<p class="text-success">执行成功的文本。</p>

<p class="text-info">代表一些提示信息的文本。</p>

<p class="text-danger">危险操作文本。</p>

<p class="text-dark">深灰色文字。</p>

<p class="text-light">浅灰色文本（白色背景上看不清楚）。</p>

<p class="text-white">白色文本（白色背景上看不清楚）。</p>

背景颜色

提供背景颜色的类有:

.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。

注意背景颜色不会设置文本的颜色，在一些实例中你需要与 .text-* 类一起使用。

7.Bootstrap4 表格

通过添加 .table-striped 类，您将在 <tbody> 内的行上看到条纹.

条纹表格：通过添加 .table-striped 类，来设置条纹表格

table-bordered 类可以为表格添加边框

带边框表格：table-bordered 类可以为表格添加边框

table-hover 类可以为表格的每一行添加鼠标悬停效果（灰色背景）

鼠标悬停状态表格：table-hover 类可以为表格的每一行添加鼠标悬停效果（灰色背景）

通过指定意义的颜色类可以为表格的行或者单元格设置颜色

指定意义的颜色类：通过指定意义的颜色类可以为表格的行或者单元格设置颜色

8.Bootstrap4 图像形状

rounded 类可以让图片显示圆角效果

圆角图片：rounded 类可以让图片显示圆角效果

rounded-circle 类可以设置椭圆形图片

椭圆图片：rounded-circle 类可以设置椭圆形图片

img-thumbnail 类用于设置图片缩略图(图片有边框)

缩略图：img-thumbnail 类用于设置图片缩略图(图片有边框)

使用 .float-right 类来设置图片右对齐，使用 .float-left 类设置图片左对齐

图片对齐方式：使用 .float-right 类来设置图片右对齐，使用 .float-left 类设置图片左对齐

响应式图片

图像有各种各样的尺寸，我们需要根据屏幕的大小自动适应。

我们可以通过在 <img> 标签中添加 .img-fluid 类来设置响应式图片。

响应式图片:img-fluid 类可以设置响应式图片，重置浏览器大小查看效果

9Bootstrap4 信息提示框

提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现

提示框:提示框可以使用 .alert 类, 后面加上指定特定意义的颜色类来实现

提示框中在链接的标签上添加 alert-link 类来设置匹配提示框颜色的链接

关闭提示框

我们可以在提示框中的 div 中添加 .alert-dismissible 类，然后在关闭按钮的链接上添加 class="close" 和 data-dismiss="alert" 类来设置提示框的关闭操作。

提示框动画

.fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果

10Bootstrap4 按钮

按钮类可用于 <a>, <button>, 或 <input> 元素上

</div>

不同大小的按钮

通过添加 .btn-block 类可以设置块级按钮

<h2>大的块级按钮</h2>

<h2>小的块级按钮</h2>

</div>

激活和禁用的按钮

按钮可设置为激活或者禁止点击的状态。

.active 类可以设置按钮是可用的， disabled 属性可以设置按钮是不可点击的。注意 <a> 元素不支持 disabled 属性，你可以通过添加 .disabled 类来禁止链接的点击。

11.Bootstrap4 按钮组

Bootstrap 4 中允许我们将按钮放在同一行上。

可以在 <div> 元素上添加 .btn-group 类来创建按钮组。

按钮组大小:我们可以使用 .btn-group-lg|sm|xs 类来设置按钮组的大小。

默认按钮:

<button type="button" class="btn btn-primary">Apple</button>

</div>

小按钮:

<button type="button" class="btn btn-primary">Apple</button>

</div>

可以使用 .btn-group-vertical 类来创建垂直的按钮组

内嵌按钮组及下拉菜单

内嵌按钮组:按钮组设置下拉菜单

垂直按钮组及下拉菜单

zhuxyyds

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap 4

1.Bootstrap简介Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。Sass--CSS扩展语言Mixin--包含一段合法Sass代码，类似于C语言
复制链接

扫一扫