第三方库之响应式功能的bootstrap3.4版本学习小结

简介

1. 响应式开发的框架，一次开发，多次普遍适用
2. 为了能使一个页面同时在手机端和pc端都正常使用

响应式原理

特点

1. 网页的宽度自动调整
2. 尽量少用绝对宽度
3. 字体要使用rem、em作为单位—>rem对应根节点的字体大小(html元素或者xml元素),html元素的font-size默认为16px；一般根节点的font-size需要结合用户的屏幕尺寸动态设置而不是简单的写死成多少px
4. 布局要使用浮动、弹性布局

媒体查询：根据一个或多个基于设备类型、具体特点和环境来应用样式
@规则
@media 媒体查询
@charset 定义编码
@import 引入css文件(css模块化)
@font-face 引入自定义字体

@import url(xxx.css) (min-width:200px;)—>如果设备的最小宽度为200px，则引入该css文件

@media all and (min-width:400px){
div{
font-size:100px;
}
}

and表示与运算，all表示的是所有设备，这句话表示所有最小宽度小于200px的设备该样式生效

1. 媒体类型

• all:所有设备
• print:打印机设备
• screen:彩色的电脑屏幕
• speech:听觉设备。针对有视觉障碍的人士，可以把页面内容以语音的方式呈现的设备

注意：tty、tv、projection、handheld、braille、embossed、aural等几种类型在媒体查询4中已经废弃

2. 媒体特性

• width:宽度
  min-width:最小的宽度，设备宽度只能比这个大
  max-width:最大的宽度，宽度只能比这个小
• height:高度
  min-height:最小的高度，设备高度只能比这个大
  max-height:最小的高度，设备高度只能比这个大
• oritentation 方向
  landscape:横屏(宽度大于高度)
  portrait:竖屏(高度大于宽度)
• aspect-ratio 宽高比：number/number
• -webkit-device-pixel-ratio:像素比(webkit内核的私有属性),大多数设备为2

3. 逻辑运算符—用来做条件判断

and 合并多个媒体类型(并且的意思)
, 匹配某个媒体查询(或者的意思)
not 对媒体查询结果取反
only 仅在媒体查询匹配成功后应用样式(防范老旧浏览器)

栅格系统

• 把我们屏幕的尺寸在一行分了12个列
• 提供了五个默认的响应层(屏幕尺寸范围)
• 使用了flex(4.x版本,3.x版本使用的是流式布局)

栅格系统

class固定

<!-- 宽度为100% -->
<div class="container-fluid">
    <div class='row'>
        <div>页面</div>
        <!-- class='col-响应层名称-number' 超小屏忽略响应层名称 -->
        <!-- 这里每行最多12列
            版本不同，具体的类名和尺寸也不同
         -->

    </div>
</div>

<div class="container">
    <div class='row'>

    </div>
</div

• container

宽度是一个自适应的具体宽度数值 使用具体的类名的时候宽度就会使用max-container-width,小于规定的屏幕宽度的时候，一行只有一列，并且宽度为它的下一层响应值,不使用具体的类名的时候自适应调节响应值

超小屏那一档宽度为auto，用于都可以设置12列

• 设置等宽列
  平分宽度，通过设置列的class为col(flex)

• 多行等宽列
  在希望断开的地方添加一个.w-100的div(设置这个div的heigth:auto，border:none)，能够让后面的列换行

• 设置一个列宽，剩下的自动平分
  设置需要自动平分宽度的盒子的className为col

• 设置根据内容调整列的宽度

使用.col-{breakpoint}-auto,breakpoint代指响应层名称

• 设置所有的尺寸下，都占同样的列数(一行中永远可以设置12列)

使用.col-*

混合排列或者组合模式

1. 在超大屏幕下，一行显示6个div,一个div应该占2个
2. 在大屏幕下，一行显示4个div
3. 中屏幕下，一行显示3个div
   这样的情况下可以给一行里面的每一个div写多个类名，他会根据自己屏幕进行自动切换；

对齐

1. 垂直方向的对齐(flex-box的纵轴上的对齐方式)

   1. 行的对齐方式(row)
   • align-items-start 顶对齐
   • align-items-center 中间对齐
   • align-items-end 底对齐
   2. 列的对齐方式(col)
   • align-self-start 顶对齐
   • align-self-center 中间对齐
   • align-self-end 底对齐

2. 水平方向的对齐(flex-box主轴上的对齐方式)
   只能设置行(row)

   • justify-content-start 左对齐
   • justify-content-center 居中对齐
   • justify-content-end 右对齐
   • justify-content-around 分散居中对齐(每个元素两侧距离是一样的)
   • justify-content-between 左右两端对齐(元素之间的距离是自动平分的)

列排序

• 使用order-{breakpoint}-*
  可以改变列的位置，*表示多少列

这也有助于SEO，爬行的时候是从上往下的，一般认为上面的内容要比下面的内容重要，在不改变元素结构的时候可以在视觉层面将某列放到后面

• order-first 代表排在第1位
• order-last 代表排在最后1位

mt-5类名表示margin-top:5px;

列偏移

使用offset-{breakpoint}-*

只会偏移设置了类名的，*表示偏移的列数

间距

使用margin工具可以让列之间产生间距

• mr-{breakpoint}-auto 使右侧的列远离到最右边
• ml-{breakpoint}-auto 使右侧的列远离到最左边

和列偏移不同的是，给某一列设置了mr-auto/ml-auto之后，它后面的列会随之一起移动

嵌套

每一个列里面可以再继续放行，那嵌套里面的元素就会以父级的宽度为基准，再分12个列

content

重置

1. 方式
   不仅消除了元素的默认样式，而且额外添加了一些属性

css中可以声明变量-valName:value,使用的时候var(valName)
所有元素，伪元素都是怪异盒模型
去掉了margin-top
嵌套在li元素中的ul无margin-bottom

• tabel元素
  • caption元素：表格的标题
  • thead元素:表头

  tr > td元素||th元素

  • tbody元素

  tr > td元素||th元素

• dl元素
  dt为名词元素
  dd为名词解释元素
• form元素
  • fieldset元素-默认有边框margin、padding
    • legend元素：和fieldset元素结合使用
  • label元素：变成了inline-block，设置了margin-bottom
• textarea元素：只能改变高度–>resize:vertical

排版

• 普通文本元素设置h*类名。可以出现和````h*```元素相同的样式；

• h1元素设置.display-*来改变样式(字体大小等)

• small元素

• 引言，使用类名lead–>突出样式

• 内联文本

  • mark元素，标记重点文本
  • ins元素，新插入文本
  • del元素，删除文本
  • strong元素，加粗
  • em元素，倾斜
  • .mark代替mark元素，.small代替small元素

• 缩写

  • abbr元素，title属性表示全称，元素的InnerText表示缩写；.initialism可以将字体变得小一点

• 引用与署名

  • blockquote.blockquote
    • 引用和署名放在footer.blockquote-footer中
    • cite元素中放名字，突出样式

• 对齐

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

• 无特效列表

  • 设置ul的类名为list-unstyled，对嵌在li中的ul不生效
  • ul.list-inline：
    • li.list-inline-item：在一行中显示,3.x版本不需要这一步

• text-truncate可以让超出文本内容省略，3.x版本用的是text-overflow

代码

• code元素，行内代码，使用实体字符来表示< >

• pre元素，默认高度340px，内容超过的时候出现scroll

• 变量

  • var元素中可以写变量

• 按钮

  • kbd元素，内容变成按钮

图片

• img.img-fluid:img元素变成了响应式的元素，需要放在row中

• img.img-thumbnail:响应式缩略图,由圆角边框

• img.rounded:圆角边框

• 图片对齐方式

  • 自己对齐，左边左浮动，右边右浮动，.float-left,.float-right
  • 通过父级调整对齐:给父级.text-center,text-right,text-left
  • 自己居中，.d-block, mx-auto

• Picture元素
  可以解决很多小问题，多张图片根据用户选择下载
  配合媒体查询使用

  .webp的图片文件特别小，但是仍然是高清模式，这种格式ie不支持，chrome||firefox||ios9.3+||android4.4+

• 表格

1. 更多类名参考https://getbootstrap.com
2. 响应式
   div.table-responseive>table;特点是thead是英文的时候才会出现滚动条，中文会换行

• figures
  图文区
  图片后面有一个标题
  figure.figure>img.figure-img+figcaption.figure-caption>text

utilities

1. 边框

• 设置边框
  直接设置类名：.border、.border-left、border-right、border-bottom、border-top;

• 去除边框 .border-0、.border-direction-0

去除边框要生效必须是先设置了边框

• 边框颜色
  .border-primary…
  查看bootstrap
• 边框圆角
  .rounded-{direction}，圆角大小无法设置

.py-2表示2rem的padding-top和padding-bottom

2. 颜色

• 颜色类型
  定义在了:root结点，通过sass去取变量
  以类名的形式给元素设置文本颜色或者背景颜色
  .type-color

primary、secondary、success、danger、warning、info、light、body、muted、white、dark…

• display属性

  • d-inline
  • d-block
  • d-inline-blcok
  • d-flex
  • d-table
  • d-none

  在3.x版本只有三种，block,inline,inline-block,显示className为visiable--block，隐藏的类名为hidden-，打印的类名为visiable-print-block

• 隐藏：只在一个尺寸下显示，其他尺寸下都要隐藏

  1. 隐藏分为两个部分
     1. 比它大的尺寸隐藏
     2. 比它小的尺寸隐藏
        d-{breakpoint}-block表示尺存大于breakpoint时显示，d-none表示小于breakpoint时消失
        d-{breakpoint}-none表示在大于breakpoint层的尺寸时隐藏(所以如果想要单独在某一层隐藏的话需要设置该层d-none,而且要设置该层的上一层d-{breakpoint}-block)

• 在各种尺寸下都隐藏
  基于上面的规则设置类名，注意超小屏下的特殊类名

• 打印的时候显示
  d-print-block

3. 嵌入功能

3.x版本无嵌入

• .embed-responsive + 宽高比的类名(查看文档)

flex

3.x版本使用的是流式布局，4.x版本使用的是flex

1. 启用flex

• div.row默认是flex

• .d-flex、d-inline-flex

• 响应式的弹性盒模型

  • d-{breakpoint}-flex/inline-flex

• 子元素的排列方向

  1. .flex-row 正序水平排列
  2. .flex-row-reverse 倒序水平排列
  3. .flex-colum 正序垂直排列
  4. .flex-colum-reverse 倒序垂直排列

• 响应式的排列方式
  flex-{breakpoint}-direction:在具体的breakpoint层+ direction排列

• 对齐方式

1. 子元素的对齐方式
   1. 主轴上的对齐 - 水平对齐
   • justify-content-left/right/center/between/around(可以做导航)
   • 响应式：justify-content-{breakpoint}-direction
   2. 交叉轴(纵轴)上的对齐 - 垂直对齐、

   注意盒子的旋转的时候主轴不会跟着变化

   • align-items-start/end/center/baseline/stretch(子元素的高度没有设置或者说设置为auto的时候才会生效)
   • 响应式：align-items-{breakpo}-start/end/center/baseline/stretch(子元素的高度没有设置或者说设置为auto的时候才会生效)
2. 子元素自身的对齐方式
   • align-self-direction
   • 响应式：align-self-{breakpoint}-direction

• 填满：将每行剩余空间占满
  将剩余空间需要给哪一列就给那列添加flex-fill类

响应式：.flex-{breakpoint}-fill

• 伸缩值

1. flex-grow-* 扩展比例，*为0表示不扩展，数字1表示扩展，只有这两个数字
2. flex-shrink-* 收缩比例，*为0表示不收缩，数字1为收缩
   • 伸缩响应式
     flex-{breakpoint}-{grow/shrink}-0/1

w-100表示宽度为100%

• 自动的边距:无响应式

1. mr-auto:margin:auto
2. py-:paddind: auto

• wrap
  flex的wrap属性，注意.flex-wrap-reverse只颠倒行的顺序

响应式：flex-{breakpoint}-wrap-reverse:固定breakpoint层+满足

• order
  flex的order属性
  http://css.doyoe.com/properties/flex/order.htm

响应式的排序:.order-{breakpoint}-*:只在breakpoint层+ 满足

• 多行对齐
  对于单行是没有效果的,flex-box中的项目是多行的
  给项目的父元素(也就是flex-box)加className.align-content-direction

多行响应式对齐:align-content-{breakpoint}-direction

utilities else

1. 浮动
   • .float-right
   • .float-left

   flex中的子元素设置浮动无效果,3.x版本里的浮动是.pull-left/.pull-right

2. 响应式的浮动
   .float-{breakpoint}-left/right

• float-none:不浮动

清除浮动：.clearfix，给浮动元素的父级设置

3. 关闭图标
   .close

button[type="button"].close>span{
  ×}

×-->X

4. 图像替换
   .text-hide,给元素设置bg-img，然后添加class，图像就会替换文字

这样的目的是SEO

5. 内容溢出
   .overflow-auto、.overflow-hidden

6. 定位

• position-static
• position-relative
• position-absolute
• position-fixed
  1. .fixed-top：固定在顶部，默认left=0
  2. .fixed-bottom：固定在底部
• position-sticky：粘性定位，这个可以用来做nav，粘性定位需要挡在body元素下的第一层级才会出现效果，firefox、chrome 50+才兼容
  1. .sticky-top:
  2. .sticky-bottom:

定位的值:*取值只能为0或50或100，代表的是百分比

• .top-*:对应top
• .start-*：对应left
• .bottom-*：对应bottom
• .end-*：对应right

7. 屏幕阅读器
   便于某些视觉障碍人士使用
   .sr-only

8. 阴影

• 没有阴影：.shadow-none
• 小阴影: .shadow-sm
• 正常的阴影: .shadow
• 大阴影: .shadow-lg

9. 尺寸

注意只能是这里列举的这些预设值，而且尤其是mx-100和mh-100，当元素原来的width和height超出了父级元素的width和height，添加了这两个类名之后会width和height都会减小

• width
  • .w-25
  • .w-50
  • .w-75
  • .w-100
  • .w-auto
• max-width
  • mw-100
• height:数字表示的是百分比，取的是父级元素的宽高
  • .h-25
  • .h-50
  • .h-75
  • .h-100
  • .h-auto
• max-height
  • .mh-100

10. 间隔

• 属性设定

1. m表示margin
2. p表示padding

• 边缘设置

1. l/r/t/b
2. x/y

• 尺寸设定

1. 0代表样式值为0
2. 1表示0.25rem，2代表0.5rem，其余预设值查看文档

间距的响应式
{property}{sides}-{breakpoint}-{size}
常规流块盒的居中，.margin-auto,3.x版本的居中为.center-block

11. 文本

• .text-justify:使得多行文本的每一行右边占满

响应式：.text-{breakpoint}-start/end/center

• 换行和溢出处理

1. .text-wrap/nowrap:是否换行

2. .text-truncate:溢出打点显示

3. 文字大小写转换

• .text-lowercase：小写
• .text-uppercase：大写
• .text-capitalize:首字母大写

13. 加粗和斜体

• .font-weight-bold
• .font-weight-normal
• .font-weight-light
• .font-italic

14. 等宽字体

• .text-moonspace

15. 垂直对齐

参考文档，只对有inline特性的元素起作用

16. 可见性

• .visiable：看见
• .invisable:看不见，占据空间
• .d-none:看不见，不占据空间

components

警告框

1. .alert

2. 颜色：.alert-color,背景颜色+字体颜色

3. .alert-link:使用.alert-link实用程序类可在任何警报中快速提供匹配的彩色链接。

4. 在警告框中添加额外的内容

• .alert-heading-继承颜色

5. 关闭警告框

• .alert-dismissable(将内部的.close类元素添加定位)，给需要关闭的元素添加属性[data-dismiss=“alert”]需要jQuery和bootstarp.js

.fade、.show：消失和出现的时候渐隐渐现的效果，需要同时添加(使用的transition)

• 关闭警告框还可以使用封装的javascript方法

徽章

• .badge，再添加一个.bg-color来改变样式
• .rounded-pill：胶囊徽章

还可以结合a元素，给a元素添加类名

面包屑导航

nav.breadcrumb>ul.breadcrumb>li.breadcrumb.active(当前页)>a{导航项目}

Buttons

• .btn

颜色：.btn-color, 还有一个比较特殊:.btn-link

• 其他类型的按钮

  1. a.btn
  2. input[type=“button” value=“content” class=“btn btn-color”]
  3. 带边框的按钮
     .btn,.btn-outline-color

• 大小(只有这三种)

  1. .btn.lg
  2. .btn
  3. .btn.sm

• 状态

  1. 启用状态：.active
  2. 停用状态: .disabled

• 切换按钮的active状态
  .data-toggle=“button”

• 选项卡

1. .btn-group:按钮组
2. div[data-toggle=‘buttons’].btn-group.btn.group-toggle>(label.btn.btn-color.active>input[type=“radio” name=“options” checked]>{内容})*n

按钮组

div.btn-group>button.btn.btn-color*n

• 缩放
  添加到按钮组

1. .btn-group-sm
2. .btn-group-lg

• 内嵌(下拉菜单):需要bootstrap的poper.js

<div class="btn-group" role="group">
    <button id=