Bootstrap（一）——简介、布局容器和工具类使用(flex布局)

一、Bootstrap简介

• Bootstrap是由twitter公司设计师基于html，css，js开发的简洁、开源、强大、优雅的UI框架。
  UI框架就是能够快速构建html架构的框架。

• 内置了大量的css类，供元素使用。

• Bootstrap由一个css库和一个js库组成，动态部分是依赖jquery一个js类库完成的。
  Bootstrap = jquery + css

二、布局容器

2.1 定宽容器 container

container的css，会根据屏幕宽度变更宽度，并且居中，定死最大宽度。

.container {
    background-color: rgb(73, 100, 0);
    /* width: 1200px; */
    height: 600px;
}
<div class="container"></div>

2.2 变宽容器 container-fluid

宽度随着body的变化而改变

<!-- 满屏 -->
<divclass="container-fluid"></div>

三、工具类

3.1 颜色与排版

（1）常用颜色

primary - 重要
success - 成功
danger - 危险
warning - 警告
info - 信息
light - 亮色
dark - 深色
secondary - 浅灰
white - 白色

文字颜色：<div class = "text-info">
背景颜色：<div class = "bg-white">

（2）常用排版字号

.h1 ~.h6 让元素的文字呈现出标题效果
.display-1~.display-4一种更大，更自以为是的标题样式

例：

<div class = "container">
    <!-- 标题和段落  text-xx字体颜色 bg-xx背景颜色 -->
    <div class = "h1 text-primary">erya</div>
    <div class = "h2 text-success">erya</div>
    <div class = "h3 text-danger">erya</div>
    <div class = "h4 text-warning">erya</div>
    <div class = "h5 text-info">erya</div>
    <div class = "h6 text-dark">erya</div>
    <div class = "display-1 text-light">title</div>
    <div class = "display-2 text-secondary">title</div>
    <div class = "display-3 text-white">title</div>

    <div class = "display-4 bg-info">title</div>
</div>

结果显示如图：

3.2 文本样式

(1)文本对齐

.text-left左对齐
.text-center居中对齐
.text-right右对齐

<div class="container">
	<div class = "h1 bg-info text-light text-center">erya</div>
	<div class = "h1 bg-info text-light text-right">erya</div>
</div>

(2)字体粗细和斜体

.font-weight-bold加粗
.font-weight-light细体
.font-italic斜体

<div class="container">
	<div class = "h1 bg-danger text-light font-weight-bold">erya</div>
	<div class = "h1 bg-danger text-light font-weight-light">erya</div>
	<div class = "h1 bg-danger text-light font-italic">erya</div>
</div>

3.3 调整大小

相对于父级的百分比，包括 25%、50%、75%、 100%

w:宽度 .w-50是父元素宽度的50%
h:高度 .h-25是父元素高度的50%
缺点：仅能设置固定的几种百分比

<div class="container">
	<div class = "w-25 bg-danger"></div>
	<div class = "w-50 bg-info"></div>
	<div class = "w-75 bg-success"></div>
	<div class = "w-100 bg-warning"></div>
</div>

3.4 边框

(1)边框属性
.border基类属性

(2)边框方向

.border全边框
.border-left左边框
.border-right边框
.border-top上边框
.border-bottom下边框
.border-right-0去掉某边框的宽度
.border-0去掉所有的边框

(3)边框颜色
.border-primary多为自定义颜色

(4)圆角
.rounded圆角属性
.rounded-lg大尺寸圆角

<style>
.d1 {
    width: 100px;
    height: 100px;
    /* border: 5px solid red !important;  //加上important才可以设置边框*/ 
}
</style>
<div class="container">
    <div class = "d1 border border-danger"></div>
    <!-- border-0去掉所有的边框  -->
    <div class = "d1 border-0"></div>
</div>

3.5 间距

m ：margin值
p ：padding值
t、r、b、l：分别代表上右下左

.ml-1默认尺寸是1，0~5
.pl-1默认尺寸是1，0~5

响应式间距：

m-xl-*代表屏幕最小 min-width:1200px视口大于1200px时应用的样式
m-lg-*代表屏幕最小 min-width:992px视口大于992px时应用的样式
m-md-*代表屏幕最小 min-width:768px视口大于768px时应用的样式
m-sm-*代表屏幕最小 min-width:576px视口大于576px时应用的样式

m-auto ：代表块级元素在父级里居中

<p>不使用间距：</p>
<div class="container bg-info">
    erya
</div>
<div class="container  bg-danger">
    erya
</div>
<br><p>使用间距：</p>
<div class="container bg-info">
    erya
</div>
<div class="container mt-3 bg-danger">
    erya
</div>

3.6 浮动

.float-left：元素左浮动
.float-right：元素右浮动
.clearfix：子元素float后，通过给父元素添加.clearfix达到清除浮动效果

<div class="container">
	<div class="box clearfix bg-primary">
		<div class="float-left bg-danger"></div>
		<div class="bg-success"></div>
		<div class="bg-warning"></div>
	</div>
</div>

3.7 定位

.position-relative相对定位,定位的方向需要单独写
.position-absolute绝对定位，注意父元素需要有定位属性，定位的方向需要单独写
.position-fixed固定定位，有底部固定和顶部固定两种设置，但其他需要单独设定
.fixed-top固定定位顶部
.fixed-bottom固定定位底部

缺点：top、left、bottom、right 还需要单独设置

<div class="container ">
    <div class = "fixed-top bg-success">
       <a href="#" class="text-light">首页</a>
       <a href="#" class="text-light">新闻中心</a>
       <a href="#" class="text-light">产品介绍</a>
       <a href="#" class="text-light">联系我们</a>
    </div>
</div>

3.8 列表样式

.list-unstyled去掉列表原有样式

<ul class= "list-unstyled">
    <li>123</li>
    <li>123</li>
    <li>123</li>
</ul>

3.9 显示Display

.d-none元素消失
.d-block元素按照块级显示
.d-inline元素按照内联显示
.d-inline-block元素按照行内块显示
.d-flex元素按照弹性布局显示支持响应式

<style>
    span {
      width: 100px;
      height: 100px;
      background-color: red;
    }
    p {
      width: 100px;
      height: 100px;
      background-color: aqua;
    }
    a {
      width: 100px;
      height: 100px;
      background-color: orange;
    }
  </style>
</head>

<body>
  <div class="container">
    <span class="d-block">span</span>
    <a href="#" class="d-inline-block">a</a>
    <span>span</span>
    <p class="d-inline">一个块元素p</p>
  </div>
</body>

3.10 flex布局

(1)flex属性

所有需要使用flex布局的类都需要先在容器中加入以下两个类,否则不生效

• .d-flex 容器设置flex布局
• .d-inline-flex 内联元素设置flex布局

<div class="box w-100 bg-info d-flex">
    <div class="bg-danger h-100 p-5">1</div>
    <div class="bg-success h-100 p-5">2</div>
    <div class="bg-warning h-100 p-5">3</div>
</div>

响应式规定四个尺寸（sm小尺寸,md中等尺寸,lg大尺寸,xl超大尺寸）：

.d-sm-flex
.d-sm-inline-flex

.d-md-flex
.d-md-inline-flex

.d-lg-flex
.d-lg-inline-flex

.d-xl-flex
.d-xl-inline-flex

(2)方向

• .flex-row水平方向正向排版
• .flex-row-reverse水平方向反向排版
• .flex-column垂直方向反向排版
• .flex-column-reverse垂直方向反向排版

响应式规定四个尺寸（sm小尺寸,md中等尺寸,lg大尺寸,xl超大尺寸）：

• .flex-*-row水平方向正向排版
• .flex-*-row-reverse水平方向反向排版
• .flex-*-column垂直方向反向排版
• .flex-*-column-reverse垂直方向反向

例：

<div class="box w-100 bg-dark d-flex flex-column-reverse">
    <div class="bg-primary w-100 p-5">1</div>
    <div class="bg-dark w-100 p-5">2</div>
    <div class="bg-danger w-100 p-5">3</div>
</div>

代码垂直方向反向结果如下:

响应式例：

<!-- 响应式 lg的时候横向,sm的时候垂直-->
    <div class="box bg-secondary d-flex flex-lg-row flex-sm-column">
    <div class="bg-success border border-danger p-5">1</div> 
    <div class="bg-success border border-danger p-5">2</div>
    <div class="bg-success border border-danger p-5">3</div> 
    <div class="bg-success border border-danger p-5">4</div>
</div>

拖动浏览器窗口，在lg尺寸的窗口期间：

在sm尺寸的窗口期间，则会变成垂直：

(3)内容对齐

支持响应式，*号位置代表sm,md,lg,xl

• .justify-content-*代表水平轴的对齐方式
• .justify-content-*-start (浏览器默认值)主轴起始位置对齐
• .justify-content-*-end主轴结束位置对齐
• .justify-content-center居中
• .justify-content-between两端对齐
• .justify-content-around项目左右间距相同,两元素间距是左右两侧的一倍

<div class="box bg-warning d-flex justify-content-between">
    <div class="p-5 h-50 bg-info border border-dark">1</div>
    <div class="p-5 h-50 bg-info border border-dark">2</div>
    <div class="p-5 h-50  bg-info border border-dark">3</div>
</div>

(4)对齐项目

支持响应式，*号位置代表sm,md,lg,xl.

• align-items-* 代表主轴的交叉轴的对齐方式
• align-items-*-start交叉轴起始位置对齐
• .align-items-*-end交叉轴结束位置对齐
• .align-items-*-center交叉轴居中对齐
• .align-items-*-baseline交叉轴及基线位置对齐
• .align-items-*-stretch交叉轴占满宽高