Bootstrap框架快速上手

Posted 2021-09-06 生命是有光的

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Bootstrap框架快速上手相关的知识，希望对你有一定的参考价值。

✍

版本 Bootstrap v3.4.0
官方文档讲解较细致，但同时也较繁琐，本篇旨在记录常用样式的用法与注意点，同时参考菜鸟教程整理而成。
视频讲解地址：乐字节念安老师B站直达

1、Bootstrap

1.1、下载与使用

英文官网：http://getbootstrap.com/
中文网站：https://getbootstrap.net/

进入中文网站，选择版本 v3.4.0

下载完成后
- 拷贝 dist 文件夹到项目中
- 由于我们之后可能还会使用 LayUi 等其他插件，所以我们将 dist 改为 Bootstrap，方便辨认
将 jQuery.js 放入我们的 js目录下
- 因为 jQuery.js 并不属于 Bootstrap，所以我们放在 js 目录下

在 html 中模板为

<!DOCTYPE html>
<html lang="en">
	<head>
        <meta charset="utf-8">
        <!--使⽤X-UA-Compatible来设置IE浏览器兼容模式 最新的渲染模式-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!--
        viewport表示⽤户是否可以缩放⻚⾯；
        width指定视区的逻辑宽度；
        device-width指示视区宽度应为设备的屏幕宽度；
        initial-scale指令⽤于设置Web⻚⾯的初始缩放⽐例
        initial-scale=1则将显示未经缩放的Web⽂档
        -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
    	<title>Bootstrap的HTML标准模板</title>
    
        <!--载入 Bootstrap 的css-->
    	<link href="css/bootstrap.min.css" rel="stylesheet">
	</head>
	<body>
        <h1>Hello, world!</h1>
        
        <!-- 如果要使⽤Bootstrap的js插件，必须先调⼊jQuery -->
        <script src="js/jquery-3.4.1.js"></script>
        <!-- 包括所有bootstrap的js插件或者可以根据需要使⽤的js插件调⽤　-->
        <script src="js/bootstrap.min.js"></script>
	</body>
</html>

注意：

如果要使⽤Bootstrap的js插件，必须先调用 jQuery.js

说明：

viewport 标记⽤于指定用户是否可以缩放Web页面
width 和 height 指令分别指定视区的逻辑宽度和⾼度。他们的值要么是以像素为单位的数字，要么是⼀个特殊的标记符号。
width 指令使用 device-width 标记可以指示视区宽度应为设备的屏幕宽度。
height 指令使用 device-height 标记指示视区⾼度为设备的屏幕⾼度。
initial-scale 指令用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异。通常情况下设备会在浏览器中呈现出整个Web页面，设为1.0则将显示未经缩放的Web⽂档。

2、布局容器

2.1、.container

.container 类用于固定宽度并支持响应式布局的容器（网页两侧留白）

<div class="container">
  ...
</div>

2.2、.container-fluid

.container-fluid 类用于 100% 宽度，占据全部视口 (viewport) 的容器（网页两侧不留白）

<div class="container-fluid">
  ...
</div>

3、栅格网格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
Bootstrap框架中的网格系统就是将容器平分成12份。

<div class="container">
    <div class="row">
        <div class="col-md-4">4列</div>
        <div class="col-md-8">8列</div>
    </div>
</div>

注意：

行（row）必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中
具体内容应该放置在列容器 (column) 之内
col-屏幕尺寸-列数，其中屏幕尺寸有
- xs(xsmall phones) 超小屏(自动)
- sm(small tablets) 小屏(750px)
- md(middle desktops) 中屏(970px)
- lg(larger desktops) 大屏(1170px)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>

<body>
    <!-- 布局容器 -->
    <div class="container">
        <!-- 行元素 -->
        <div class="row">
            <!-- 列元素 col-xs-数值 col-sm-数值 col-md-数值 col-lg-数值-->
            <div class="col-md-4" style="background-color: red;">4列</div>
            <div class="col-md-8" style="background-color: pink;">8列</div>
        </div>

    </div>
</body>

</html>

3.1、列组合

列组合简单理解就是更改数字来合并列(原则：列总和数不能超12，大于12则自动换到下一行)，有点类似于表格的 colspan 属性

<div class="container">
    <div class="row">
        <div class="col-md-4">4列</div>
        <div class="col-md-8">8列</div>
    </div>
    <div class="row">
        <div class="col-md-2">2列</div>
        <div class="col-md-10">10列</div>
    </div>
</div>

3.2、列偏移

如果我们不希望相邻的两个列紧靠在一起，但又不想使用 margin 或者其他的技术手段来。这个时候就可以使用列偏移 (offset) 功能来实现。
使用列偏移也非常简单，只需要在列元素上添加类名 "col-md-offset-*" (星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。
例如，你在列元素上添加 "col-md-offset-8" ,表示该列向右移动8个列的宽度(要保证列与偏移列的总数不超过12，不然会导致列断行|换行显示)

<body>
    <!-- 布局容器 -->
    <div class="container">
        <!-- 行元素 -->
        <div class="row">
            <!-- 列元素 -->
            <div class="col-md-4 " style="background-color: red;">4</div>
            <div class="col-md-2 col-md-offset-4" style="background-color: pink;">2</div>
        </div>

    </div>
</body>

3.3、列排序

<div class="container">
    <div class="row">
        <!--向右浮动10列距离-->
        <div class="col-md-1 col-md-push-10"> 1列 </div>
        <!--向右浮动1列距离-->
        <div class="col-md-1 col-md-push-1"> 1列 </div>
        
    </div>
</div>

列排序就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。
在 Bootstrap 框架的网格系统中是通过添加类名 col-md-push-* 和 col-md-pull-* (其中星号代表移动的列组合数)
左浮动往前 pull ,右浮动往后 push

我们让第二个盒子向右浮动1个列的距离


<body>
    <!-- 布局容器 -->
    <div class="container">
        <!-- 行元素 -->
        <div class="row">
            <!-- 列元素 -->
            <div class="col-md-1 " style="background-color: red;">1</div>
            <!-- 第二个盒子向右浮动1个列的距离 -->
            <div class="col-md-1 col-md-push-1" style="background-color: pink;">1</div>
            <div class="col-md-1 " style="background-color: greenyellow;">1</div>
            <div class="col-md-1 " style="background-color:yellow;">1</div>
        </div>

    </div>
</body>

我们让第二个盒子向右浮动3个列的距离

<body>
    <!-- 布局容器 -->
    <div class="container">
        <!-- 行元素 -->
        <div class="row">
            <!-- 列元素 -->
            <div class="col-md-1 " style="background-color: red;">1</div>
            <!-- 第二个盒子向右浮动3个列的距离 -->
            <div class="col-md-1 col-md-push-3" style="background-color: pink;">1</div>
            <div class="col-md-1 " style="background-color: greenyellow;">1</div>
            <div class="col-md-1 " style="background-color:yellow;">1</div>
        </div>

    </div>
</body>

3.4、列嵌套

列嵌套：你可以在一个列中添加一个或者多个行(row) 容器，然后在这个行容器中插入列。

<body>
    <!-- 布局容器 -->
    <div class="container">
        <div class="row">
            <!--先分一个8列-->
            <div class="col-md-8" style="background-color: white ;">
                <!--再分的8列里面再分3个4列-->
                <div class="col-md-4" style="background-color: red;">4</div>
                <div class="col-md-4" style="background-color: green;">4</div>
                <div class="col-md-4" style="background-color: yellow;">4</div>
            </div>
			
            <!--再分一个4列-->
            <div class="col-md-4" style="background-color: blue ;">4</div>
        </div>

    </div>
</body>

4、排版

4.1、标题

Bootstrap 和普通的 HTML 页面一样，定义标题都是使用标签 <h1> ~ <h6> ，只不过 Bootstrap 覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样，
为了让非标题元素和标题使用相同的样式，还特意定义了 .h1 ~ .h6 六个类名。同时后面可以紧跟着一行小的标题 <small></small> 或使用 .small

<h1>Bootstrap Heading<small>副标题</small></h1>
<div class="h1">
    Bootstrap 标题1
    <span class = "small"> 副标题 </span>
</div>

4.2、段落

段落是排版中的另一个重要元素之一。
通过.lead 来突出强调内容(其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理)。可以使用以下标签给文本做突出样式处理。
- <small> ：小号字
- <b><strong>：加粗
- <i><em>: 斜体

<p>以后的你会感谢现在努力的你</p>
<p class="lead">以后的你会感谢现在努力的你</p>
<p class="lead">
    <small>以后的</small><!-- 小号字 -->
    <b>你</b>会		 <!-- 加粗 -->
    <i>感谢</i>现在		<!-- 斜体 -->
    <em>努力</em>的	 <!-- 斜体 -->
    <strong>你</strong><!-- 加粗 -->
</p>

4.3、强调

定义了一套类名，这里称其为强调类名，这些强调嘞都是通过颜色来表示强调，具体说明如下：

.text-muted：提示，使用浅灰色(#999)
.text.primary ：主要，使用蓝色(#428bca)
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色(#31708f)
text-warning：警告，使用黄色(#8a6d3n)
text-danger：危险，使用褐色(#a94442)

 <div class="container">
        <div class="text-muted">提示效果</div>
        <div class="text-primary">主要效果</div>
        <div class="text-success">成功效果</div>
        <div class="text-info">信息效果</div>
        <div class="text-warning">警告效果</div>
        <div class="text-danger">危险效果</div>
    </div>

4.4、对齐效果

在CSS中常常使用text-align 来实现文本的对齐风格的设置。

其中主要有四种风格

值	说明
left	左对齐
right	右对齐
center	居中对齐
justify	两端对齐

Bootstrap 中通过定义四个类名来控制文本的对齐风格

类名	说明
text-left	左对齐
text-right	右对齐
text-center	居中对齐
text-justify	两端对齐

 以上是关于Bootstrap框架快速上手的主要内容，如果未能解决你的问题，请参考以下文章 
 vue bootstrap区别
 做网站10大H5前端框架哪家强
 快速上手React：
 Django-引入Bootstrap
 Blazor UI库 Bootstrap Blazor 快速上手 (v7.5.7)
 一文让你快速上手 Mockito 单元测试框架