BootStrap笔记
2024-01-10 04:33:58
BootStrap
官网：https://www.getbootstrap.com/
1.主要内容
中文文档网址: https://www.bootcss.com/
2.bootstrap的安装与使用
1.1.什么是BootStrap?
BooStrap.是一个功能强大，功能丰富的前端框架，并且是最受欢迎的HTML、cSS和JS框架，用于开发响应式布局、移动设备有限的wEB框架。
BootStrap是一套现成的CSS样式集合（做的还是很友好的），是两个推特的员工干出来的。BootStrap是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目。
2011年，twitter的"一小撮"工程师为了提高他们内部的分析和管理能力，用业余时间为他们的产品构建了一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。Bootstrap由MARK OTTO和Jacob Thornton所设计和建立，在github上开源之后，迅速成为该站上最多人watch&fork 的项目。大量工程师踊跃为该项目贡献代码，社区惊人地活跃，代码版本进化非常快速，官方文档质量极其高(可以说是优雅)，同时涌现了许多基于Bootstrap建设的网站:界面清新、简洁;要素排版利落大方。
Bootstrap特别适合那种没有设计师的团队（甚至说没有前端的团队），可以快速的出一个网页。
2.2.BootStrap特点
1.简洁、直观、强悍的前端开发框架，html、css、javascript工具集，让web开发更速、简单。
2.基于html5、css3的bootstrap，具有大量的诱人特性:友好的学习曲线，卓越的兼容 性，响应式设计，12列格网，样式向导文档。
3.自定义JQuery插件，完整的类库，bootstrap3基于Less，bootstrap4基于Sass的CSS 预处理技术。
4.Bootstrap响应式布局设计;让一个网站可以兼容不同分辨率的设备。Bootstrap响应式 布局设计，给用户提供更好的视觉使用体验。
5.丰富的组件。
2.3.下载与使用
(1)下载: http: hmy3.bootcss.com/getting-started/
(2)下载完成后
拷贝dist/css中的bootstrap.min.css 到项目css中
拷贝dist/js 中的bootstrap.min.js 到项目的js中
(3)下载jquery.js 链接地址：jQuery
(4)在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-scal指令用于设置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>
</body>
<!-- 如果需要使用BootStrap的js插件，必须先调入jQuery -->
<script src="js/jquery-3.4.1.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用 -->
<script src="js/bootstrap.min.js"></script>
</html>
目前暂时不使用jquery的插件可以不用引入js文件,这里是为了保证模板的完整性。
说明:
viewport <meta>标记用于指定用户是否可以缩放Web页面
width和height 指令分别指定视区的逻辑宽度和高度。他们的值要么是以像素为单位的数字，要么是一个特殊的标记符号。
width 指令使用device-width标记可以指示视区宽度应为设备的屏幕宽度。
height指令使用device-height标记指示视区高度为设备的屏幕高度。
initial-scale指令用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异。通常情况下设备会在浏览器中呈现出整个Web页面，设为1.0则将显示未经缩放的Web文档。
(5)参考API
http://v3.bootcss.com/cssl
3.布局容器和栅格网格系统
3.1.布局容器
1、.container类用于固定宽度并支持响应式布局的容器
<div class="container">
...
</div>
2、.container-fluid类用于100%宽度，占据全部视口（viewport）的容器
<div class="container-fluid">
...
</div>
属性
border设置容器的边框
text-center内容水平居中
align-middle垂直居中
py-5 上下内边距
bg-light背景色
让网页自适应手机的宽度
<meta name= "viewport" content="width=device-width, initial-scale=1">
3.2.栅格网格系统
? Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row)与列(column)的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
? 网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。
container、row 、 xs (xsmall phones), sm (small tablets)，md (middle desktops)， lg (larger desktops)即:超小屏(自动)，小屏(75Cpx)，中屏(970px)和大屏(1170px)。
数据行(.row)必须包含在容器（.container)中，以便为其赋予合适的对齐方式和内距(padding)。
在行(.row)中可以添加列(.column)只有列(column)才可以作为行容器(.row)的直接子元素，但列数之和不能超过平分的总列数，比如12。如果大于12,则自动换到下一行。
具体内容应当放置在列容器(column)之内
<div class="container">
<div class="row">
<div class="col-md-4">4</div>
<div class="col-md-8">8</div>
</div>
</div>
媒体查询
在栅格系统中，我们在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值。
/* 超小屏幕（手机，小于 768px） *//* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }
栅格参数
通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。
3.2.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.2.列偏移
? 如果我们不希望相邻的两个列紧靠在一起，但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移（offset)功能来实现。使用列偏移也非常简单，只需要在列元素上添加类名"col-md-offset-*“(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，你在列元素上添加“col-md-offset-8”，表示该列向右移动8个列的宽度(要保证列与偏移列的总数不超过12，不然会致列断行|换行显示)。
<div class="container">
<div class="row">
<div class="col-md-1">1列</div>
<div class="col-md-1">2列</div>
<div class="col-md-1 col-md-offset-8">11列</div>
<div class="col-md-1">12列</div>
</div>
</div>
3.2.3.列排序
? 列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名col-md-push-和col-md-pull-(其中星号代表移动的列组合数)。往前pull，往后push。
<div class="container">
<div class="row">
<div class="col-md-1 col-md-push-10">1列</div>
<div class="col-md-1 col-md-pull-1">2列</div>
</div>
</div>
重排序order
1.排列顺序 -order-*
系统提供了.order-1到.order-12 共12个双加的顺，在主流浏览器和设备宽度上都可以显示
注意:没有定义.order类的元素，将默认的排在前面。
.order-first快速更改一个顺序到最前面
.order-last快速更改一个顺序到最后面
3.2.4.列嵌套
? Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列。
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-9">9</div>
<div class="col-md-3">3</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-10">10</div>
<div class="col-md-2">2</div>
</div>
</div>
</div>
</div>
让页面的宽度自适应手机屏幕的宽度
自动布局列
1.宽列.col-
2.置一个列宽.col-*(例:.col-7)
3.置可变宽度内容.col-{breakpoint)-auto(根据内容的自然宽度对列进行一个大小 调整)
4.宽多列 创建跨多个行的等宽列 w-100通用样式类，将列拆分成新行
响应类
Bootstrap4 网格系统包括s种宽度预定义，用来构建复杂的响应布局。
特小.col
小.col-sm
中.col-md
大 .col-lg
特大.col-xl
1.覆盖所有设备.col.col-*(一次性定义从最小设备到最大设备相同的网格布局)
2.水平排列:例如在sm (大于576px)设备上开始水平排列显示，(小于576px)的设备上每列一行，水平堆砌
3.混合搭配:根据需要对每一列都进行不同的设备定义
4.删除边距.no-gutters
5.包装列如果一行中放置超过12列，每组额外列将作为一个单元包裹到新行上。
弹性盒子
flex弹性布局时bootstrap4响应灵活的实用程序,可以快速管理网格的列,导航,组件等的布局,对齐和大小.
定义弹性盒子
1.Flexible box 缩写flex,用来为盒状模型提供最大的灵活性.
2.任何一个盒子都可以指定为flex布局
3.采用flex布局的元素,被称为flex容器,简称为'容器'
4.所有的子元素自动称为容器的成员,被称为flex项目,简称为'项目'
创建flex弹性盒子 .d-flex .d-inline-flex
.d-flex 设置对象为弹性伸缩盒子
.d-inline-flex 设置对象为内联块级弹性伸缩盒子
.flex-(sm | md | lg | xl )-row .flex-[sm [ md | lg | xl }-row-reverse
2.垂直排列
.flex-column设置垂直方向布局
.flex-column-reverse设置垂直方向的反方向布局（从底部向上铺开)
注意:垂直方向布局也可以设置响应式布局，响应式类如下:.flex-f sm / md | lg l xl }-column
.flex-f sm / md | lg l xl }column-reverse
内容排列
justify-content-*可以改变flex项目在主轴上的对齐可选值为startend center betweena round
justify-content-start项目位于容器的开头
justify-content-end项目位于容器的结尾
justify-content-center项目于容器的中心
justify-content-between项目于各行之间留有空白的容器内
justify-content-around项目位于各行之前、之间、之后都留有空白的容器中
内容排列布局可以添加响应式布局，响应式类如下:
.justify-content-{sm | md | lg |xl }-start
.justify-content-{sm | md | lg |xl }-end
.justify-content-{sm | md | lg |xl }-center
.justify-content-{sm | md | lg |xl }-between
.justify-content-{sm | md | lg |xl }-around
弹性布局—包裹
改变flexx项目在 flex’容器中的包裹方式(可以实现弹性布局)
.flex-nowrap浏览器默认，无包裹
.flex-wrap包裹
.flex-wrap-reverse反向包裹
包裹布局也可以添加响应式设置，响应式类如下:
.flex-{sm lmd l lg l xl}-nowrap
.flex-{sm |md |lg l xl}-wrap
.flex-{sm |md l lg l xl}-wrap-reverse
排列顺序
使用order 实现弹性项目的可视化排序
.order类设置弹性子元素排序，从order-1到order-12，数字越小，权重越高，排列顺序越往前排。
注意:没有进行order排序的弹性项目排在弹性盒子中的最前面。
内容对齐
对齐内容.align-content-*
*的可选值为: start、center、end、around、 stretch
.algin-content*这些类只在一行的弹性子元素中是无效的。
.align-content-start
.align-content-center
.align-content-end
.align-content-{sm|md|lg|xl}-around
.align-content-{sm|md|lg|xl}-stretch
对齐内容布局也可以添加响应式设置，响应类如下:
.align-content-{sm|md|lg|xl}-start
.align-content-{sm|md|lg|xl}-center
.align-content-{sm|md|lg|xl}-end
.align-content-{sm|md|lg|xl}-around
.align-content-{sm|md|lg|xl}-stretch
CSS通用样式类
Bootstrap4核心就是一个CSS工具库，定义了大量的css,通用样式类，用户很容易上手，只要掌握了css.的通用样式类，无需再编写大量的css,样式，为我们的开发节省了很多时间。
一．文本处理
文本样式类，控制文本的对齐、换行、转换、权重等样式。
1．文本对齐设置文本的水平对齐方式
.text-left设置文本左对齐
.text-right设置文本右对齐
.text-center设置文本居中对齐
.text-justify设置文本两端对齐
文本对齐可以结合网格体统的响应断点来定义响应的对齐方式。响应类如下;
.text-{sm|md|lg|xl}-left
.text-{sm|md|lg|xl}-center
.text-{sm|md|lg|xl}-right
2．文本 换行
如果元素中的文本的宽度大于元素本身的宽度，默认情况下是会自动换行的。如果不想让元素中的文本换行，可以使用.text-nowrap类来阻止文本换行。
.text-truncate以省略号的形式表示超出的文本内容。
3．文本转换
.text-lowercase把字母转换成小写
.text-uppercase把字母转换成大写
.text-capitalize把每个单词的首字母转换成大写
4．文本的粗细和斜体
.font-weight-light设置文本较细的字体
.font-weight-lighter设置文本细的字体
.font-weight-normal设置文本正常粗细的字体
.font-weight-bold设置文本粗的字体
.font-weight-bolder设置文本较粗的字体
.font-italic设置文本的倾斜
5．其他一些文本类
.text-reset颜色复位。重新设置文本或链接的颜色，继承来自父元素的颜色
.text-decoration-none删除修饰线。
.text-monospace字体类
二、颜色
1．文本颜色文本颜色类
.text-primary蓝色
.text-info 浅蓝色
.text-danger 浅红色
.text-warning浅黄色
.text-success浅绿色
.text-secondary灰色
.text-muted灰色
.text-light浅灰色（白色背景上看不清楚)
.text-dark 深灰色
.text-white白色（白色背景上看不清楚)
特别的颜色类
.text-black-50 黑色 设置透明度为0.5
.text-white-50 白色 设置透明度为0.5
2．背景颜色
.bg-primary 蓝色背景
.bg-info 浅绿色背景
.bg-success 浅绿色背景
.bg--danger 浅红色背景
.bg-warning 浅黄色背景
.bg-secondary 灰色背景
.bg-dark 深灰色
.bg-light 浅灰色
3．链接文本颜色
.text-primary蓝色
.text-info 浅蓝色
.text-danger 浅红色
.text-warning浅黄色
.text-success 浅绿色
.text-secondary灰色
.text-muted灰色
.text-light浅灰色(白色背景上看不清楚)
.text-dark 深灰色
.text-white白色（白色背景上看不清楚)
特别的颜色类
.text-black-5o黑色设置透明度为0.5
.text-white-50白色设置透明度为0.5
三、边框通用样式类
快速添加或者删除元素的边框,也可以指定删除或者添加元素某一边的边框
.border 添加边框
.border-top/left/right/bottom 添加元素指定某一边的边框
.border-0 删除边框
.border-top/left/right/bottom-0 删除元素指定某一边的边框
边框颜色
.border-primary 蓝色边框
.border-info 浅蓝色边框
.border-success 浅绿色边框
.border-warning 浅黄色边框
.border-danger 浅红色边框
.border-light 浅灰色边框
.border-secondary 灰色边框
.border-dark 深灰色边框
.border-white 白色边框
圆角边框
.rounded 四边都为圆角
.rounded-top 左上角和右上角为圆角边框
.rounded-left 左上角和左下角为圆角边框
.rounded-right 右上角和右下角为圆角边框
.rounded-bottom 左下角和右下角为圆角边框
.rounded-circle 50%圆形边框
.rounded-pill 50rem圆形边框
宽度和高度
相当于父元素
w-25/50/75/100/auto
h-25/50/75/100/auto
相对于视口(viewport)
ww.相对于视口宽度的单位
vh相对于视口高度的单位
无论怎么调整视口的大小，视口的宽度都等于100vw,视口的高度都等于100vh。(把视口平均分成100份，1vw等于视口宽度的1%)
.min-vw-100
.min-vh-100
1.当元素的宽高大于视口的宽高时，元素的宽高保持不变，会出现垂直方向
的滚动条。
2.当元素的宽高小于视口的宽高时，元素的宽高自动调整为元素的宽高等于视口的高度。
vw-100元素的宽度等于视口的宽度
vh-100元素的高度等于视口的高度
边距
1.边距的定义
.m 代表margin
.p 代表padding
.mt margin-top
.mb marin-bottom
.ml margin-left
.mr margin-right
.mx margin-left和margin-right
.my margin-top 和margin-bottom
.pt padding-top
.pb padding- bottom
.pl padding-left
.pr padding-right
.PX padding-left和padding-right
.RX padding-top和padding-bottom
1rem = 16px
{m|p}-0设置margin或者padding为0
{m|p}-1设置margin或者padding为0.25rem
{m|p}-2设置margin或者padding为0.5rem
{m|p}-3设置margin或者padding为1rem
{m|p}-4设置margin或者padding为1.5rem
{m|p}-5设置margin或者padding为3rem
m-n1设置margin或者padding为-0.25rem
m-n2设置margin或者padding为-0.5rem
m-n3设置margin或者padding为- 1rem
m-n4设置margin或者padding为-1.5rem
m-n5设置margin或者padding为-3rem
4.常用样式
px、em、rem和%的定义
1.px（像素）
px单位的名称为像素，它是一个固定大小的单元，像素的计算是针对（电脑/手机）屏幕的，一个像素（1px）就是（电脑/手机）屏幕上的一个点，即屏幕分辨率的最小分割。由于它是固定大小的单位，单独用它来设计的网页，如果适应大屏幕（电脑），在小屏幕（手机）上就会很不友好，做不到自适应的效果。
2.em（相对长度单位）
em单位用的也比较多，特别是国外；em单位的名称为相对长度单位，它是用来设置文本的字体尺寸的，相对于父级元素对象内文本的字体尺寸；如果没有人为设置当前对象内文本的字体尺寸，那么它相对的是浏览器默认的字体尺寸（16px）。
3.rem（css3新增的相对长度单位）
rem是css3新增的一个相对长度单位，它的出现是为了解决em的缺点，em可以说是相对于父级元素的字体大小，当父级元素字体大小改变时，又得重新计算。rem出现就可以解决这样的问题，rem只相对于根目录，即HTML元素。所以只要在html标签上设置字体大小，文档中的字体大小都会以此为参照标准，一般用于自适应布局。
4.%（百分比）
%也很常见，它和em差不多一样，都是相对于父级元素。但%可以在很多属性中使用，比如：width、height、font-size等。而em是用来设置字体大小（font-size）的单位，width、height等属性是没有em单位的。
二、px、em、rem和%的区别与总结
px是固定长度单位，不随其它元素的变化而变化；
em和%是相对于父级元素的单位，会随父级元素的属性（font-size或其它属性）变化而变化；
rem是相对于根目录（HTML元素）的，所有它会随HTML元素的属性（font-size）变化而变化；
px和%用的比较广泛一些，可以充当更多属性的单位，而em和rem是字体大小的单位，用于充当font-size属性的单位
一般来说：1em = 1rem = 100% = 16 px
源码分析
容器
? 1.流体容器
? 2.固定容器
阈值 width
大于等于1200(lg 大屏pc) 1170（1140+槽宽）
大于等于992(md 中屏pc) 970（940+槽宽）
小于1200
大于等于768(sm 平板) 750（720+槽宽）
小于992
小于768(xs 移动手机) auto
? 3.栅格系统
栅格源码分析
1.流体容器&固定容器 公共样式
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
2.固定容器 特定样式
顺序不可变
@media (min-width: @screen-sm-min) {
width: @container-sm;
}
@media (min-width: @screen-md-min) {
width: @container-md;
}
@media (min-width: @screen-lg-min) {
width: @container-lg;
}
3.行
margin-left: -15px;
margin-right: -15px;
4.列
.make-grid-columns()--->
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
...
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
.make-grid(xs)--->
float-grid-columns(@class);
* .col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,...col-xs-12{
* float: left;
* }
.loop-grid-columns(@grid-columns, @class, width);
* .col-xs-12{
* width:12/12;
* }
* .col-xs-11{
* width:11/12;
* }
* ...
* .col-xs-1{
* width:1/12;
* }
.loop-grid-columns(@grid-columns, @class, pull);
.loop-grid-columns(@grid-columns, @class, push);
*push pull:
* .col-xs-push-12{ .col-xs-pull-12{
* left:12/12; right:12/12;
* } }
* .col-xs-push-11{
* left:11/12;
* }
* ... ...
* .col-xs-push-1{
* left:1/12;
* }
* .col-xs-push-0{ .col-xs-pull-0{
* left:auto; right:auto;
* } }
.loop-grid-columns(@grid-columns, @class, offset);
响应式工具
栅格盒模型设计的精妙之处
容器两边具有15px的padding
行 两边具有-15px的margin
? 列 两边具有15px的padding
?
为了维护槽宽的规则，
列两边必须得要15px的padding
为了能使列嵌套行
行两边必须要有-15px的margin
为了让容器可以包裹住行
容器两边必须要有15px的padding
文章来源:https://blog.csdn.net/m0_62518864/article/details/135491930
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！