BootStrap

简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
中文镜像网站：http://www.bootcss.com
英文官网 http://getbootstrap.com
用于开发响应式布局、移动设备优先的 WEB 项目。

1.使用boot

1.创建boot02文件夹，在boot02中创建css和js文件，把4个文件复制进去，使用ws open boot02
2.在ws中new 新项目 boot02,在boot02中创建css和js，把4个文件复制进去

2.全局css样式,1rem=16px

1.按钮相关class
基本类 btn
btn-danger 危险红色
btn-success 成功绿色
btn-warning 警告黄色
btn-info 信息蓝色
btn-primary 主要
btn-secondary 次要
btn-dark" 深色
btn-light 浅色
不同边框按钮
btn-outline-danger 红色边框
btn-outline-success 绿色边框
btn-outline-info 蓝色边框
…其他颜色都适用
不同按钮大小
btn-lg 大按钮
btn-sm 小按钮
btn-block 块级按钮
btn-link 链接按钮

2.图片相关class
rounded 圆角
rounded-circle 圆角50%
img-thumbnail 缩略图
img-fluid 响应式图片，图片会缩放，但是不会超过原始大小

3.文字相关class
字体颜色
text-danger/success/info/primary/warning…
字体的粗细
font-weight-bold/light/normal
文字对齐方式
text-left/right/center/justify
大小写/首字母大写
text-uppercase/lowercase/capitalize
字体大小 .h1~.h6

4.列表相关class
list-unstyled 去除标识符
基本类 ul.list-group 列表组
li.list-group-item 列表项
acitve 列表项激活状态
disabled 禁用状态
列表项颜色
list-group-item-success/danger/warning…

5.table相关的样式
table类名，让后面的td有上边框
table-bordered 带边框的表格
table-striped 隔行变色
table-hover 带悬停效果的表格
table-primary/danger/warning。。。。表格颜色
响应式表格，用于table父元素上
table-responsive-sm/lg/md/xl

3.辅助类

1.边框
border 基本类,或者border-top/right/bottom/left
颜色 border-danger/warning/info…
清除边框 border-0 border-top-0。。。。。
倒角 rounded
清除倒角 rounded-0
2.显示
visible 显示
invisible 隐藏
3.背景颜色
bg-danger/warning/success
4.浮动

float-left/float-*-left
float-right/float-*-right

代表屏幕分辨率：xl/lg/md/sm
解决高度坍塌，父元素中添加clearfix
5.尺寸
w-/h-*
*:25/50/75/100
25%，50%，75%，100%
6.内外边距

m-*/mt-*/mr-*/mb-*/ml-*
p-*/pt-*/pr-*/pb-*/pl-*

*:0 / 1 / 2 / 3 / 4 / 5
0 0.25rem 0.5rem 1rem 1.5rem 3rem

4.栅格布局(重点***********************************)

1.web文本页面布局方法(三种)

	table	div+css	Boot中栅格
优点	简单，易控制	语义正确，渲染效率高	简单，容易控制，语义正确，渲染效率高，支持响应式
缺点	语义错误，渲染效率低	代码编写和控制比较麻烦	页面非常复杂，不推荐使用

使用栅格布局
1.最外层需要使用容器
container 定宽容器（容器宽度写死了）
container-fluid 变宽容器 (容器宽度随着父元素改变)
2.容器中声明行 row (每一行等分12个单元格)
3.行中声明列 col col-n （n指的是n/12）
4.针对不同屏幕的需求使用不同的列名
col-xl-1/2/3/…12
col-lg-1/2/3/…12
col-md-/1/2/3/4…12
col-sm-1/2/3/4…12
xl：Extra large 超大 >=1200px
lg:large 大PC屏 >=992px
md：medium 中屏pad >=768px
sm:small 小屏 >=576px
xs:Extra small 超小屏

col不添加数字，自动处理布局
每一行的每个列宽度相等

5.注意：不同屏幕下的列有适应性问题
col-xl-* 只在xl下有效
col-lg-* 在lg/xl下有效
col-md-* 在md/lg/xl有效
col-sm-* 在sm/md/lg/xl 有效
总结：列可以在当前屏幕以及更大的屏幕下有效

<div class="col-lg-6 col-md-3 col-sm-3"></div>

省略成<div class="col-lg-6 col-sm-3"></div>

6.可以使用"列偏移"实现指定列以及其后面的列向右移动
偏移量通过 offset-*-n来设置
*：sm/md/lg/xl
n:1~11

5.栅格

1.栅格的嵌套，在列里面去写其他row

2.弹性布局
使用d-flex/d-inline-flex 创建一个弹性容器
设置主轴方向 flex-row/flex-row-reverse/flex-column/flex-column-reverse
设置主轴的排列方式
justify-content-n;
n:end center between around

响应式flex类
d-sm/md/lg/xl-flex flex-*-row flex-*-column

3.表单
空间方向排列

form-group 堆叠表单，垂直方向显示 form-inline 内联表单，水平显示，内部可以写col 样式文本框/密码框基本类 form-control 多选框 form-check 块级，内边距1.25rem form-check-inline 变成一个弹性容器 form-check-input 往左移动1.25rem form-check-label 下外边距清0 form-text 块级，上外边距0.25rem

6.组件

1.下拉菜单

1.外层div要写dropdown
2.内部有两个元素，button 和放菜单的div
      2.1button的类 dropdown-toggle—>添加下三角
      2.2放菜单的div.dropdown-menu---->display:none
      2.3在放菜单的div内部添加菜单项
<a class="dropdown-item"></a>
dropdown-item—>块级元素，纵向排列
3.button事件 data-toggle的自定义属性，值=“dropdown”
这样，点击之后就可以自动让dropdown-menu显示
4.菜单项a标签，可以添加.active，选中菜单项

下拉菜单的三级结构

<div class="dropdown"><button data-toggle="dropdown">触发元素</button><div class="dropdown-menu">隐藏元素a.dropdown-item菜单项</div>
</div>

2.按钮组
在外部包裹div上添加btn-group类，创建按钮组
**

Apple
HuaWei
SamSung

** 使用btn-group-lg/sm 控制按钮组大小使用btn-group-vertical 来创建垂直按钮组

3.信息提示框

<div class="alert alert-danger w-50 alert-dismissible"><span class="close" data-dismiss="alert">&times;</span>请检查用户信息
</div>

提示框使用alert当作基本类
alert-danger/warning/…改变提示框颜色
.alert-dismissible .close{}的组合在控制关闭的小x在右边
点击小x能够关闭提示框，data-dismiss=“alert”

4.导航
boot提供了三种形式的导航
水平导航，选项卡导航，胶囊导航

1.水平导航

通过设置ul的nav让内部li变为弹性布局
所有的弹性样式都可以使用
justify-content-end/center/between/around
flex-row/column…
三层结构 ul.nav.nav-justified>li.nav-item>a.nav-link
.nav-justified .nav-item配合，让每个导航项等宽显示

<ul class="nav"><li class="nav-item"><a class="nav-link"></a></li>
</ul>

2.选项卡导航
使用.nav-tabs类可以将导航转换为选项卡
选项卡的内容，使用div.tab-content>div.tab-pane(隐藏)
切换选项卡

<a data-toggle="tab" href="内容的id" class="active"><ul class="nav nav-tabs"><li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#home">Home</a></li>
.......
</ul>
<!-- 要显示的内容-->
<div class="tab-content"><div id="home" class="tab-pane active">home....</div>
.....
</div>

3.胶囊导航
.nav-pills 可以将导航设置成胶囊形状
胶囊动态导航只需要将选项卡中data-toggle=“pill”
其它同选项卡导航一样

5.导航栏
是div>ul>li>a
div.navbar创建导航栏，navbar-expand-xl/lg/md/sm来创建响应式的导航栏，大屏幕横向展开，小屏幕垂直堆叠
ul.navbar-nav
li.nav-item
a.nav-link
设置导航栏时，可以在div中使用bg-颜色设置不同的背景颜色

6.折叠
控制内容的隐藏与显示
在<a>或者<button>中添加data-toggle=“collapse”
指向目标内容的id
<a href="#id"></a><button data-target="#id">
内容div.collapse 同时添加id

<button class="btn btn-success"data-toggle="collapse"data-target="#demo">折叠按钮</button>
<!-- 折叠内容-->
<div id="demo" class="collapse">Lorem ipsum dolor sit amet

7.折叠导航栏

创建折叠导航栏，需要在外层div class=“navbar nav-expand-sm bg-* navbardark/ligth” navbar-dark/navbar-light 控制是内部brand的字体颜色和按钮中三条横线的颜色
外层div内部有不被折叠的a标签 a.navbar-brand
隐藏的按钮button.navbar-toggler 根据外包裹div是navbar-dark/light.选取不同的字体颜色和边框颜色，同时在屏幕sm以上隐藏
被折叠的导航栏div.collapse+.navbar-collapse+#id
给button添加折叠事件和折叠目标 data-toggle=“collapse” data-target="#id"

7.常用组件

1.卡片

外层div通过.card来构建一个卡片
内部有三部分card-header card-body card-footer
内容的三部分可以省略

2.手风琴(卡片+折叠)

3.媒体对象
Bootstrap提供了很多类来处理媒体对象(图片和视频)和内容的布局
应用场合，博客的评论，论坛的帖子，商品的列表

总结：

<div class="media"><img><div class="media-body">
</div>

4.轮播图

创建轮播 carousel 旋转木马，要想让图动起来，
需要data-ride.设置动的方式，carousel
所有的轮播图，统一放在carousel-inner中
每一张图片，单独放在一个carousel-item中,carousel-item设置了display:none
需要给某一个carousel-item设置active,图片才能显示

导航指示器

5. ul要添加carousel-indicators
6. .carousel-indicators li{横向弹性，去点，给了宽高，背景色，水平居中}
7. .carousel-indicators .active 选中的背景色变为#fff
8. 点击事件data-slide-to=“n” n代表滑动到具体第n个图片(n从0开始)
9. 在div.carousel中设置id#demo
给指示器设置点击后改变的目标轮播id
data-target="#demo"
10. boot提供的样式不符合我们的设计需求，需要自定义样式，重写boot的样式

/*重写boot的样式，修改指示器宽高和背景*/
.carousel-indicators li{width:10px;height:10px;background-color:#fff;border-radius: 50%;
}
/*指示器被选中状态的重写*/
.carousel-indicators .active {background-color: #0aa1ed;
}

左右箭头

两个a标签，要添加类carousel-control-prev/next
a标签中添加是span，调用boot提供的箭头图片
span.carousel-control-prev/next-icon
a标签的点击事件data-slide=“prev/next”
事件的目标 a.href="#整个轮播图的id"

5.模态框

modal,模态框是覆盖在父窗体上的子窗体
模态框可以在不离开父窗体的情况，与用户进行交互

打开模态框的按钮
<button data-toggle="modal" data-target="#模态框ID"></button>
modal,模态框是覆盖在父窗体上的子窗体
模态框可以在不离开父窗体的情况，与用户进行交互
模态框，先写3层div

<div id="demo" class="modal"> -----负责固定定位<div class="modal-dialog">-----响应式布局<div class="modal-content">---弹性布局</div></div>
</div>

在div.modal-content中
div.modal-header
div.modal-body
div.modal-footer

8.其他组件

1.徽章
基本类 badge
颜色 badge-danger/warning。。。。
胶囊徽章 badge-pill

2.巨幕
在外层包裹添加类 jumbotron
有比较大的内边距和背景颜色

3.分页

<!--pagination弹性，横向 -->
<!--pagination-sm第一个li和最后一个li的倒角-->
<!--这里的sm/lg 是分页栏大小，不是响应式-->
<ul class="pagination pagination-lg"><li class="page-item disabled"><a href="#" class="page-link">上一页</a></li><li class="page-item  active"><a href="#" class="page-link">1</a></li><li class="page-item"><a href="#" class="page-link">2</a></li><li class="page-item"><a href="#" class="page-link">3</a></li><li class="page-item"><a href="#" class="page-link">4</a></li><li class="page-item"><a href="#" class="page-link">5</a></li><li class="page-item"><a href="#" class="page-link">下一页</a></li>
</ul>

ul设置类 pagination 负责弹性，横向显示
pagination-sm/lg 负责第一个li和最后一个li的倒角
ul>li.page-item>a.page-link
active选中和disabled禁用写在li中

4.面包屑导航
有层近关系的导航 breadcrumb
1.ul.breadcrumb>li.breadcrumb-item>a.无类名
2.修改面包屑导航中间的符号
.breadcrumb-item + .breadcrumb-item::before{
content:">";
}

5.进度条

进度条的槽
div.progress
在槽内部写进度
div.progress >div.progress-bar
可以给进度添加条纹
.progress-bar-striped
可以给进度添加动画
.progress-bar-animated

学习boot只需要熟练掌握3个内容

媒体查询
栅格布局
SCSS

9.SCSS,动态样式语言

把scss包.rar中4个文件复制到nodejs文件夹下
在ws中alt+f12
node-sass -v
node-sass 4.9.2 (Wrapper) [JavaScript]
libsass 3.5.4 (Sass Compiler) [C/C++]

1.CSS的缺点

语法不够强大，没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面的形式反复出现，导致难以维护
动态演示语言为css赋予了动态语言的特性，极大的提高了样式语言的可维护性

常见的动态样式语言

SCSS/Sass (scss兼容sass,更接近css的语法)
stylus
less—>生成boot3的动态样式语言
上述语言，都属于css的预处理器
用一种专门的编程语言，进行web页面样式设计
要通过编译器转化为正常的CSS文件，以供项目使用

2.什么是SCSS
SCSS是一款强化css的辅助工具
它在css语法的基础上，增加了变量，嵌套，混合，导入，函数的高级功能
这些拓展令CSS更加强大与优雅

3.scss的作用
有助于更好的管理样式文件，以及更高效的开发项目

4.SCSS的使用

在服务器端使用
安装scss编译程序
在线安装 npm install -g node-sass
本地安装把4个文件复制进nodejs文件夹
测试安装
在WebStorm中打开命令行界面 alt+f12
或者在nodejs的黑窗口中输入
node-sass -v 测试当前版本
注意，在node版本8.11以上才能使用

5.在命令行编译scss文件，转换成css文件
单文件的转换
正确路径>node-sass scss/01.scss css/01.css
多文件的转换
正确路径>node-sass scss -o css (scss文件夹中的scss文件，都转换成css文件中的样式文件)
单文件监听
node-sass -w scss/01.scss css/01.css
多文件监听
node-sass -w scss -o css

10.SCSS

1.语法
1.变量
使用$开头
变量名称命名规范遵循css选择器的命名规范
可以包含-,_。尽量见名知意

ex
$jd_red:#f00;           //颜色变量
$my-width:20px;
$normal-content:"grean person said";    //数值变量
$my-border-style:solid;      //样式变量
$my_border:1$my-width $my-border-style $jd_red;  //变量中引用其他变量

注意

声明变量时，变量定义在{}规则块外部，整个样式文件都可以该变量，如果定义在{}规则块里面，则只能在当前规则块中使用
2. 声明变量时，变量值可以引用其他变量
3. 声明重复的变量，后声明的变量会覆盖签名的变量
!default规则
如果变量已经声明赋值了，就使用这个声明的值
如果变量没有声明赋值，使用默认值
$jd_red:#f10215;
$jd_red:#00f !default;
如果前面赋值了，$jd_red就为#f10215
如果前面没赋值，就使用$jd_red:#00f

2.嵌套规则

#content{div.top{h1{color:$jd_red;}p{background:$jd_red;}}div.middle{border:1px solid $jd_red;}
}

生成的css如下

#content div.top h1 {color: #f10215; }
#content div.top p {background: #f10215; }
#content div.middle {border: 1px solid #f10215; }

另外，可以嵌套伪类选择器
但是需要在嵌套的内容之前添加&，不添加标签和：之间会一个空格，导致浏览器不读取这个伪类

a{color:#f00;&:hover{color:#ff0;}
}

群组选择器的嵌套

nav a, div a, footer a, header a {color: #f00; }
scss的写法
nav,div,footer,header{a{color:#f00;}
}

scss除了选择器可以嵌套，样式属性也能嵌套

div{border-width:1px;border-style:solid;border-color:#f00;
}

scss的写法

div{border:{width:1px;style:solid;color:#f00;};
}

3.导入scss文件

在一个scss使用另外一个scss文件中的变量
可以把多个局部scss文件，生成到一个css中
在scss中，局部文件名以下划线开头 _color.scss
在编译的时候，不会编译以下划线开头的文件
局部scss作为导入使用。
导入的语法，@import “局部文件名”；局部文件名不写下划线，不写后缀
@import "color".
局部文件导入之后，局部文件的变量可以在被导入文件中直接使用
被导入文件编译时，局部文件的内容会体现在被导入文件中一起编译

4.混合器
把需要复用的样式封装进一个混合器，
在需要使用时，直接调用混合器即可，
实现代码的重用，提升代码可维护性。
语法：声明混合器
@mixin 混合器名称{复用的样式；}
使用混合器
选择器{
@include 混合器名称;
}

带参数的混合器
@mixin 混合器名称(参数1，参数2,…){定义样式 color:参数1…}
使用 @include 混合器名称(值1，值2…);

5.继承
一个选择器可以继承另外一个选择器定义的所有样式

.rounded{border:1px solid #f00;border-radius: 30%;
}
.rounded-shadow{@extend .rounded;box-shadow: 0 0 10px;
}

继承的效果以群组选择器的状态出现

.rounded, .rounded-shadow {border: 1px solid #f00;border-radius: 30%; }
.rounded-shadow {box-shadow: 0 0 10px; }

11.运算

1.数字
加减乘除模 + - * / %

p{width: 1in+8pt+1cm;
}

结果正确，能够相互换算的数字，在运算中自动转换
div{ width:5rem+1em;}
单位不能相互转换时，scss报错

加法
+在做字符串连接时，+左边有双引号，结果就有双引号
+左边没有双引号，结果就没有双引号
减号
在scss中使用使用减法，最好在减号前后添加空格
除法
在scss中通常使用/作为分割数字的作用
在以下情况中，/被视为除法
1.值或者值的一部分，是变量或者函数返回值width:$width/2;
2.被圆括号包裹height:($width/2);
3.如果值是算是表达式的一部分margin-left:5px+8px/2px;
4.在有引号的字符串中使用#{}插值语句可以动态的添加值

div::after{content:"I ate #{15+23} baozis";
}

2.颜色值
颜色值的运算是分段计算的，也就是分别计算颜色
#001122+#223344=#224466
rgb(00,11,22)+rgb(33,44,55)=rgb(33,55,77)
rgba(00,11,22,0.4)+rgba(33,44,55,0.4);
rgba相加，必须要求alpha值相同，否则不予运算

12.函数

1.scss定义了多种函数，有些甚至可以直接用css调用
1.颜色函数

  rgba(red,green,blue,alpha)hsl(hue,saturation,lightness)hue：色调   0-360  三个色段，每120一个saturation：饱和度 0.0%--100.0%lightness:亮度 0.0%--100.0%

2.数字函数

  round($value)  四舍五入ceil($value) 向上取整floor($value) 向下取整min($v1,$v2...)max($v1,$v2....)random()随机数

3.字符串函数

 unquote($str) 删除字符串的引号quote($str)给字符串添加引号to_upper_case($str) 将字符串小写字母变成大写字母to_lower_case($str) 将字符串大写变小写

2.自定义函数

@function get_width($n){$w1:200px;$w2:500px;@return ($w2 - $w1)*$n;
}
div{width:get_width(2);
}

使用@function定义函数，使用@return定义返回值
@function 函数名称(参数){
@return 返回值;
}

3.控制指令
当@if的表达式返回值不是false或者null
表达式成立
表达式可以不加小括号

$type:moon;
div{@if($type==sun){background:#f00;}@else if($type==moon){background:#0ff;}@else if($type==mars){background:#ff0;}@else {background:#000;}
}

Bootstrap(包括scss)复习相关推荐

Bootstrap 4-Glyphicons迁移？
本文翻译自:Bootstrap 4 - Glyphicons migration? We have a project that uses glyphicons intensively. 我们有一个项 ...
bootstrap使用总结
bootstrap是一个webcss框架,集合了html/css/jquery为一家,创建响应式的页面.所谓的响应式就是适配不同的上网设备. 使用bootstrap的步骤: 1.下载bootstrap ...
什么是 bootstrap 中的 break point
断点是 Bootstrap 中的触发器,用于触发布局响应按照设备或视口大小的变化而变化. 断点是响应式设计的基石. 使用它们来控制您的布局何时可以适应特定的视口或设备大小. 使用 media quer ...
Mac系统使用VS Code编译Bootstrap 4
环境: macOS 10.13.6 node.js 8.11.3 sass 1.10.3 bootstrap 4.1.3 vs code 1.25.1 Bootstrap3为我们提供了在线编译工具,可 ...
Bootstrap实战 - 响应式布局
一.介绍响应式布局就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 导航栏与轮播在大部分网站的头部占很高的比重,特别是导航栏,扮演着网站地图的 ...
Bootstrap 字体图标和自定义矢量图标
一.Bootstrap 字体图标 Bootstrap包括250多个来自 Glyphicon Halflings 的字体图标. 使用:将图标类应用到这个 <span> 或者<i> ...
有心人天不负，互联网寒冬下斩获40W年薪offer，面经分享（附复习脑图）
前言今年年初,到了金三银四的关键时期,却频频爆出大厂裁员,互联网寒冬令人瑟瑟发抖,而本人已在三月份裸辞,跳槽压力巨大,本文就来聊聊亲身经历.包括如何复习,投简历,面试,谈薪. 复习每次跳槽,必不可 ...
管理Sass项目文件结构
http://www.w3cplus.com/preprocessor/architecture-sass-project.html 编辑推荐: 掘金是一个高质量的技术社区,从 CSS 到 Vue.j ...
ic卡写卡 angus_使用Angus更快地构建Web应用程序
ic卡写卡 angus Nick's outstanding utility, Angus, has changed! Click here to read an updated post! 尼克杰出 ...

Bootstrap(包括scss)复习