前端框架之Bootstrap4小白修行手册

最新推荐文章于 2021-12-18 21:54:53 发布

Ctrl精

最新推荐文章于 2021-12-18 21:54:53 发布

阅读量1.4k

点赞数 2

分类专栏：前端文章标签： jquery html css 前端 bootstrap

本文链接：https://blog.csdn.net/qq_43468607/article/details/105032857

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

写在前面的话：
在前端有一个不错的框架（Bootstrap），现在已经发展到4的版本，听闻淘宝曾借鉴其栅格系统，这是这个框架最重要，也是最核心的部分，这里是在即在Bootstrap4中的个人感受与经验：

Bootstrap简介

Bootstrap是目前全球最流行、最火爆的Web前端开发框架之一。它的强大之处在于它将常见的CSS布局小组件和JavaScript插件进行了完整并完善的封装，能让没有经验的前端工程师和后端开发工程师都迅速掌握和使用，大大提高开发效率。此外，它还能在某种程度上规范前端团队编写CSS和JavaScript的规范。Bootstrap更新比较快

下载的官网

Bootstrap4
下载地址：（中文版本，三个地址）
https://v3.bootcss.com/getting-started/#download
https://www.bootcss.com/
最终翻译的中文版本：
https://v3.bootcss.com/
http://code.z01.com/
HELLO WORLD 模板：

使用框架的三大规范：

<!--规范一：加入下面两行的目的是html5的标准，否则会导致样式失真-->
<!doctype html>
<html lang="zh-cn">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <!--规范二： 添加这一行目的是：
    为了确保所有的设备的渲染和触摸效果
    必须在网页<head></head>区域中添加响应式的视图标签
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">	
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
    <style type = "text/css">
        
    </style>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

规范三：

Container容器

Container容器是窗口布局的最基本元素，我们推荐所有样式都定义在.container或.container-fluid容器之中–
这是启用整个栅格系统必不可少的前置条件，它们分别对应选择一个响应式的、固定宽度的容器，或者选择一个流式自适应浏览器或容器最大合法宽度的窗口（意味着任何时候它的宽度总是100%）。

Bootstrap原生带三种container宽度规范：
.container, 居中，适配不同的断的 max-width 尺寸。
.container-fluid, 全屏，适配屏幕的 width: 100% 尺寸。
.container-{断点规格}（见下表), 在指定规格断上width: 100% 尺寸。
在这里插入图片描述

响应式的断点–媒体查询

Bootstrap是基于移动优先的原则开发的，使用了一系列的媒体查询（media queries
）方法，为我们的布局和界面创建自适应的的分界点。这些分界点主要是基于视口宽度的最小值，并且当窗口视图改变的时候允许元素缩放。
在Bootstrap的源Sass文件中，为了实现布局、网格系统以及组件，首先使用下面的媒体查询范围(可以理解为将不同宽度的网页进行拆分并分别载入CSS样式处理构建）

：

// Extra small devices (portrait phones, less than 576px)
    // No media query since this is the default in Bootstrap 
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

盒尺寸
为了更直观地用BootStrap的尺寸规范(而不受各浏览标准影响)，我们把将全局box-sizing的值由默认的content-box重定义为border-box，以保证padding不会影响元素的最后计算宽度。但在页面引用Google自定义搜索、Google Map地图等第三方产品时会出现兼容性问题。
对此你可以使用下面的方法来重置盒尺寸:

.selector-for-some-widget {
    box-sizing: content-box;
}

基本布局

<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<title>Bootstrap初体验</title>
		
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<style type="text/css">
		</style>
	</head>
	<body>
		
		<script type="text/javascript" src="./js/jquery-3.4.1.min.js"></script>
		<script type="text/javascript" src="js/popper.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
	</body>
</html>

容器（container）：

Container容器是窗口布局的最基本元素，我们推荐所有样式都定义在.container或.container-fluid容器之中–
这是启用整个栅格系统必不可少的前置条件，它们分别对应选择一个响应式的、固定宽度的容器，或者选择一个流式自适应浏览器或容器最大合法宽度的窗口（意味着任何时候它的宽度总是100%）。
容器分类：
1、流体容器
2、固体容器

代码实现：

<style type="text/css">
			/*超小屏幕*/
			@media (max-width: 575px) {
				.container-self {
					background-color: red;
					width: 100%;
				}
			}
			
			/*小屏幕*/
			@media (min-width: 576px) and (max-width: 767px) {
				.container-self{
					background-color: green;
					width: 540px;
				}
			}
			
			/*中等屏幕*/
			@media (min-width: 768px) and (max-width: 991px) {
				.container-self{
					background-color: green;
					width: 720px;
				}
			}
			
			/*大屏幕*/
			@media (min-width: 992px) and (max-width: 1199px) {
				.container-self{
					background-color: purple;
					width: 720px;
				}
			}
			 
			/*超大屏幕*/
			@media (min-width: 1200px) {
				.container-self{
					background-color: goldenrod;
					width: 1140px;
				}
			}
   </style>

栅格系统

总共有五个栅格等级，每个响应式分界点隔出一个等级
特小.col
小.col-sm-*
中.col-md-*
大.col-lg-*
特大.col-xl-*
不同的屏幕设置不同的格式

举例：

<div class="container">
	<div class="row">
		<div class="col-sm-4 col-md-3">第一部分</div>
		<div class="col-sm-2 col-md-3">第二部分</div>
		<div class="col-sm-6 col-md-6">第三部分</div>
	</div>
</div>

布局方面

垂直居中：
在这里插入图片描述
举例：

<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<title>Bootstrap栅格布局</title>

		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<style type="text/css">
			.container>.row{
				background-color: pink;
				height: 200px;
			}


			.container>div>div:nth-child(1) {
				background-color: red;
			}

			.container>div>div:nth-child(2) {
				background-color: green;
			}

			.container>div>div:nth-child(3) {
				background-color: blue;
			}

			.container>div>div:nth-child(4) {
				background-color: purple;
			}
		</style>
	</head>
	<body>

		<div class="container">
			<div class="row align-items-center">
				<div class="col-md-3">Column</div>
				<div class="col-md-3">Column</div>
				<div class="col-md-3">Column</div>
				<div class="col-md-3">Column</div>
			</div>
		</div>

		<script type="text/javascript" src="./js/jquery-3.4.1.min.js"></script>
		<script type="text/javascript" src="js/popper.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
	</body>
</html>

三种对齐方式：
在这里插入图片描述

<div class="row align-items-start">
<div class="row align-items-center">
<div class="row align-items-end">

清除沟槽

间隙沟槽(gutters)清除
BootStrap默认的栅格和列间有间隙沟槽，一般是左右-15px的margin或padding处理，您可以使用.no-gutters类来消除它，这将影响到.row行、列平行间隙及所有子列。

添加属性no-gutters

重排序

Class顺序重定义使用 .order-* class选择符，可以对DIV空间进行
可视化排序,系统提供了.order-1到.order-1212个级别的顺序，在五种浏览器和设备宽度上都能生效。

<div class="container">
  <div class="row">
    <div class="col">
      1号空间-未定义序号，位置不变。
    </div>
    <div class="col order-12">
      2号空间-排最后。
    </div>
    <div class="col order-1">
      3号空间-放第1但受1号空间不变影响居第2位。 
    </div>
  </div>
</div>

文本居中

<div class="container">
		<div class="row align-items-center no-gutters justify-content-center">
			<div class="col-md-3">第一部分</div>
			<div class="col-md-3">第二部分</div>
		</div>
	</div>

图片使用

Html 5 标准之Picture元素将图片在不同的尺寸的时候显示不同的图片，可以设置宽度的大小为多少的时候进行触发
HTML5标准提供了一个全新的元素，它可以为指定多个定义，请确保在
标签里使用使用.img-* CSS样式进行定义绑定，而不是仅仅认为引用了就达成了，如下第三行代码所示：

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>

<pictrue>元素可实现图片在不同屏幕下的针对性响应式，其使用逻辑如下(译者补充)：
<picture>
  <source srcset="大规格图片.jpg"  media="(min-width: 800px)" >
  <source srcset="中规格图片.jpg"  media="(min-width: 600px)">
  <source srcset="小规格图片.jpg">
  <img src="通用图片.jpg" alt="这是当浏览器不支持picture标签时显示的图片">
</picture>

组件

警告提示框、按钮、卡片、轮播图、表单、输入框、输入框

轮播图

居中，大小：class="carousel slide m-auto w-75"

导航栏切换颜色

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

可以使用以下类来创建不同颜色导航栏：

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

提示: 对于暗色背景需要设置文本颜色为浅色的，对于浅色背景需要设置文本颜色为深色的。
文章过于简洁，大有不全之处，疏漏之处请留言评论，看到一定回复。

Ctrl精

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端框架之Bootstrap4小白修行手册

在前端有一个不错的框架（Bootstrap），现在已经发展到4的版本，听闻淘宝曾借鉴其栅格系统，这是这个框架最重要，也是最核心的部分，这里是在即在Bootstrap4中的个人感受与经验：下载的官网：Bootstrap4下载地址：（中文版本，三个地址）https://v3.bootcss.com/getting-started/#downloadhttps://www.bootcss.c...
复制链接

扫一扫