BootStrap 基础笔记-白红宇

BootStrap 基础笔记

阅读量：3946 次

发布时间：2019-05-24

本文共 18524 字，大约阅读时间需要 61 分钟。

BootStrap 基础笔记

1. 响应式设计

1.1 什么是响应式设计

案例网址

在这里插入图片描述

1.2 为什么需要响应式设计

用户使用的设备尺寸不同

用户使用的屏幕分辨率不同

用户使用的浏览器不同

1.3 响应式设计常见技术

弹性图片
- 例如：max-width:100%

弹性布局
- 例如：display:flex

媒体查询

2. 媒体查询

2.1 什么是媒体查询指令

媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成

媒体查询让样式表有更强的针对性,扩展了媒体类型的功能

响应式设计必须依靠媒体查询，才能识别设备的特性，从而进行特定的样式设置

2.2 媒体查询指令原理

在这里插入图片描述

2.3 媒体查询指令语法

引用
- 可以在内部样式表中直接应用
- 也可以写在外部样式表中，通过link导入

语法

@media [not,only] 设备类型 and (设备特性)P{
   	CSS 样式代码}

2.4 设备类型

设备名称	描述
`Screen`	`显示屏幕`
Print	打印机
Speech	语音合成器
all	适用于全部设备

示例

@media print {
    body {
    font-size: 10pt } } @media screen {
    body {
    font-size: 13px } } @media screen, print {
    body {
    line-height: 16px } }

2.5 设备特性

@media screen and (min-width: 600px) and (max-width: 1024px){
   	CSS样式声明}

2.6 视口问题

2.6.1 PC端视口

视口(viewport)在桌面浏览器中，等于浏览器窗口

视口中的像素指CSS像素，视口大小决定页面布局的可用宽度

2.6.2 移动端视口

移动设备如果同样以浏览器(即设备屏幕)窗口作为视口，那已有的960像素宽的页面布局就会只显示移动设备屏幕宽度

为此，移动浏览器定义了两个视口
- 可见视口
- 布局视口

大多数移动浏览器默认把布局视口的宽度设为：980px (IE10默认设定为1024px)
- 尽可能放大可见视口，以便在屏幕中显示完整的网站
- 布局视口宽度保持不变

2.6.3 针对移动端视口的设置

特性名称	描述
width	视口宽度
height	视口高度
Initial-scale	初始缩放比例
minimum-scale	允许缩放到的最小比例
maximum-scale	允许缩放到的最大比例
User-scalable	用户是否可以手动缩放

2.7 布局案例

    
   
    Header
   
    
   
    Left
   
    
   
    Main
   
    
   
    Right
   
    
   
    Fotter

在这里插入图片描述

3. 认识 BootStrap

在这里插入图片描述

简单介绍
- bootstrap 是当下非常经典且流行的前端框架（界面工具集）
- 由twitter的两位工程师2010年创建
- bootstrap 的特点
  - 灵活简洁
  - 直接强悍
  - 让Web开发更迅速，简单

官网
- （中文网）
- （英文网）

GitHub

4. BootStrap 框架概述

4.1 使用原因

BootStrap 提供了前后端（包括移动端）需要的界面工具集合，能够让开发者快速搭建出美观的，可适配的前端界面

生态圈火，不断的更新换代

并且基于 bootstrap 衍生出来了很多其他前端框架

使用 Bootstrap 并不代表不用写 CSS样式，JS代码，而是不用写所有通用的代码

4.2 技术特性

预定义样式表

提供完整的css组件

丰富的基于jQuery的js插件

响应式的栅格布局

授权协议宽松（MIT协议）

支持移动平台

5. 开始使用 BootStrap

5.1 下载安装

下载安装 BootStrap
- 方式一：npm install bootstrap --save
  - 通过 npm 进行安装，适合工程化开发，比如集成到 react 或者 Node 项目中
- 方式二：gitHub 或官网 直接下载
  - 适合起步，全面学习

5.2 框架目录结构

项目组织结构

5.3 框架导入方法

		    		
       		
       		    		
   				hello Bootstrap!

5.4 框架技术体系

在这里插入图片描述

6. BootStrap 栅格系统

6.1 BootStrap 栅格系统定义

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局

“行（row）”必须包含在 .container（固定宽度）或 .container-fluid（100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）

行内创建列，每行最大12列，超过列转到下行

container
- 响应式容器
- 具有四个断点区域
- 1200px，992px，768px

container-fluid
- 自适应容器
- 100%宽度

6.2 BootStrap 栅格系统详情

内容放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素

Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局

通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）

通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding

栅格系统中的列是通过指定1到12的值来表示其跨越的范围

栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ，并且针对小屏幕设备覆盖栅格类
- 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ，并且针对小屏幕设备覆盖栅格类
- 因此，在元素上应用任何 .col-lg-* 不存在，也影响大屏幕设备

6.3 栅格系统参数

在这里插入图片描述

6.4 栅格系统实例


     
    
     .col-md-1
    
  
    
     .col-md-1
    
  
    
     .col-md-1
    
  
    
     .col-md-1
    
  
    
     .col-md-1
    
  
    
     .col-md-1
    
  
    
     .col-md-1
    
  
    
     .col-md-1
    
  
    
     .col-md-1
    
  
    
     .col-md-1
    
  
    
     .col-md-1
    
  
    
     .col-md-1
    
   
     
    
     .col-md-8
    
  
    
     .col-md-4
    
   
     
    
     .col-md-4
    
  
    
     .col-md-4
    
  
    
     .col-md-4
    
   
     
    
     .col-md-6
    
  
    
     .col-md-6

在这里插入图片描述

6.5 BootStrap 栅格系统类样式

通过lg、md、sm、xs四种类样式，针对不同大小的屏幕实现响应式布局

在这里插入图片描述

列偏移
- col-xx-offset-num类样式

在这里插入图片描述

列嵌套

在这里插入图片描述

列排序
- col-md-push-num
  - 往后移对应的栅格距离
- col-md-pull-num
  - 往前移对应的栅格距离

在这里插入图片描述

6.6 BootStrap 栅格系统源码分析

container
- 利用媒体查询完成响应式的宽度调整

.container {
     padding-right: 15px;  padding-left: 15px;  margin-right: auto;  margin-left: auto;}@media (min-width: 768px) {
     .container {
       width: 750px;  }}@media (min-width: 992px) {
     .container {
       width: 970px;  }}@media (min-width: 1200px) {
     .container {
       width: 1170px;  }}

container-fluid
- 最大宽度100%，实现自适应

.container-fluid {
     padding-right: 15px;  padding-left: 15px;  margin-right: auto;  margin-left: auto;}.jumbotron .container {
     max-width: 100%;}

row
- 与container中的内边距抵消

.row {
     margin-right: -15px;  margin-left: -15px;}

col
- 利用float: left实现水平排列
- 不同的栅格设置不同宽度

.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
       float: left;  }  .col-lg-12 {
       width: 100%;  }  .col-lg-9 {
       width: 75%;  }  .col-lg-6 {
       width: 50%;  }  .col-lg-3 {
       width: 25%;  }

col-xx-offset-num
- 利用margin-left设置对应栅格的偏移距离

.col-lg-offset-12 {
     margin-left: 100%;}.col-lg-offset-9 {
     margin-left: 75%;}.col-lg-offset-6 {
     margin-left: 50%;}.col-lg-offset-3 {
     margin-left: 25%;}

col-xx-pull-num、col-xx-push-num
- 利用定位实现列排序

.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-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
     position: relative;  min-height: 1px;  padding-right: 15px;  padding-left: 15px;}.col-lg-pull-12 {
     right: 100%;}.col-lg-pull-9 {
     right: 75%;}.col-lg-pull-6 {
     right: 50%;}.col-lg-pull-3 {
     right: 25%;}.col-lg-push-12 {
     left: 100%;}.col-lg-push-9 {
     left: 75%;}.col-lg-push-6 {
     left: 50%;}.col-lg-push-3 {
     left: 25%;}

6.7 BootStrap 栅格系统案例

要求
- lg状态下，两行两列（每列6格）
- md状态下，两行两列（下行两列4格分居左右）
- sm状态下，两行两列（上行两列4格分居左右）
- xs状态下，4行一列（每列12格）

在这里插入图片描述


       
            
     
      d1
     
        
     
      d2
     
        
     
      d3
     
        
     
      d4
     
    
    
   
注意：	- md 状态下向后位移栅格距离会保留	- 要在对应的状态下重新定义位移距离	- 比如上面的例子		- md 状态下往后位移4个单位之后		- 在 lg 状态下依然会有4个单位空余出来		- 因此，在 lg 状态下也要设置 push 位移为0

7. BootStrap 全局样式

7.1 样式类型

基础排版

表格

表单

图片

辅助类和响应式工具

。。。

7.2 基础设置

提供了h1～h6六种标题标签和类样式

标题类样式可以应用于其他文本标签

全局字体样式默认14px，间距10px，适用于body和全部文字段落

在这里插入图片描述

7.3 文字设置

7.3.1 强调文字

强调文字
- small
- strong
- em
- cite

7.3.2 文字对齐方式

text-left

text-right

text-center

text-justify

text-nowrap

7.3.3 改变大小写

text-lowercase

text-uppercase

text-capitalize 首字母大写

7.4 列表样式

list-unstyled
- 取消序列符号

7.5 表格样式

7.5.1 基础类样式

table

7.5.2 附加类样式

table-striped(条纹效果)

table-bordered(边框效果)

table-condensed(紧凑效果)

table-hover(光棒效果)

table-hover 效果源码解析.table-hover > tbody > tr:hover {
   	background-color: #f5f5f5;}

7.5.3 响应式布局类样式

table-responsive

在小屏幕设备上（小于768px）水平滚动

当屏幕大于 768px 宽度时，水平滚动条消失

table-responsive 源码解析.table-responsive {
     min-height: .01%;  overflow-x: auto;}@media screen and (max-width: 767px) {
     .table-responsive {
       width: 100%;    margin-bottom: 15px;    overflow-y: hidden;    -ms-overflow-style: -ms-autohiding-scrollbar;    border: 1px solid #ddd;  }}

垂直方向的内容截断
- 响应式表格使用了 overflow-y: hidden 属性，能将超出表格底部和顶部的内容截断
- 也可以截断下拉菜单和其他第三方组件

7.6 表单样式

7.6.1 基础类表单

form-control 类样式
- <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%

form-group 类样式
- 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列

7.6.2 内联表单 (`min-width:768px`)

form-inline 类样式
- 为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件
- 只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）

7.6.3 横向表单

form-horizontal 类样式
- 通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局

7.7 按钮组件

使用下面列出的类可以快速创建一个带有预定义样式的按钮

在这里插入图片描述

注意

虽然按钮类可以应用到 <a> 和 <button> 元素上，但是，导航和导航条组件只支持 <button> 元素

如果 <a> 元素被作为按钮使用 – 并用于当前页面触发某些功能 – 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role="button" 属性

强烈建议尽可能使用 <button> 元素来获得在各个浏览器上获得相匹配的绘制效果

7.7.1 按钮尺寸

使用 .btn-lg、.btn-sm、btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素

在这里插入图片描述

7.7.2 激活状态

对于 <button> 元素，是通过 :active 状态实现的

对于 <a> 元素，是通过 .active 类实现的

Primary link

7.7.3 禁用状态

通过为按钮的背景设置 opacity 属性就可以呈现出无法点击的效果

为 <button> 元素添加 disabled 属性，使其表现出禁用状态

7.8 图片样式

7.8.1 响应式图片类样式

img-responsive

原理
- 为图片设置了 max-width: 100%、 height: auto 和 display: block 属性
- 让图片在其父元素中更好的缩放

7.8.2 图片形状类样式

img-rounded(圆角矩形)

img-circle(圆形)

img-thumbnail(缩略图)

7.9 颜色设置

7.9.1 颜色类型

灰色(muted)

关键蓝(primary)

成功绿(success)

信息蓝(info)

警告黄(warning)

危险红(danger)

7.9.2 文本及背景颜色类样式

前景色6种，text-颜色

背景色5种(少了灰色)，bg-颜色

在这里插入图片描述

7.10 辅助样式

7.10.1 关闭图标

close类样式，内容×

7.10.2 三角符号

caret类样式

7.10.3 快速浮动

pull-left，pull-right 类样式

块元素居中对齐
- center-block类样式

清除浮动
- 通过为父元素添加 .clearfix 类可以很容易地清除浮动（float）

隐藏和显示
- show、hidden和invisible类样式

7.11 响应式工具类

通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容

7.11.1 响应式工具实现布局

在这里插入图片描述

8. BootStrap CSS 组件

Bootstrap框架提供了20种CSS组件，是整个框架的核心之一

8.1 字体图标

由glyphicon公司提供的250个免费icon资源，主要应用于内联元素中

基于HTML5中的@font-face和before实现

glyphicon以及glyphicon开头的类样式

可以把它们应用到按钮、工具条中的按钮组、导航或输入框等地方

可自定义样式

首页

8.1.1 自定义字体

@font-face

红军不怕远征难

8.1.2 BootStrap 字体图标源码解析

@font-face {
     font-family: 'Glyphicons Halflings';  src: url('../fonts/glyphicons-halflings-regular.eot');  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');}.glyphicon {
     position: relative;  top: 1px;  display: inline-block;  font-family: 'Glyphicons Halflings';  font-style: normal;  font-weight: normal;  line-height: 1;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;}.glyphicon-asterisk:before {
     content: "\002a";}

8.1.3 使用其他图标

font-awesome
- Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式

阿里图标

8.2 下拉菜单

由外部容器和内部列表构成

容器采用dropdown类样式，列表采用dropdown－menu类样式

8.2.1 下拉列表菜单项

菜单对齐方式
- dropdown-menu pull-left（right）类样式，针对ul

菜单的标题
- dropdown-header类样式，针对列表项

分割线
- divider类样式，针对列表项

禁用项
- disabled类样式，针对列表项

8.2.2 列表辅助属性

辅助属性aria-labelledby

辅助属性
- 针对ul标签，role = “menu”
- 针对li标签，role=“presentation”
- 针对a标签，role=“menuitem”

在这里插入图片描述


       
            
     翻译图书
        
     Javascript编程精解
        
     Javascript设计模式
        
     Javascript启示录
        
     
        
     原创图书
        
     深入理解Bootstrap
        
     21天学会jQuery

在这里插入图片描述

8.3 按钮组

将多个按钮包含在容器中，容器使用btn-group类样式

按钮使用btn或者组合类样式

通过容器样式可以设置所有按钮的尺寸

通过btn-group-vertical设置垂直排列按钮组

在这里插入图片描述

8.4 导航组件

导航使用的标签元素
- 无序列表及容器

列表导航使用的类样式
- nav基类
- nav-tabs
- nav-pills
- nav-stacked

8.4.1 选项卡式导航

注意 .nav-tabs 类依赖 .nav 基类


     
    Home
  
    Profile
  
    Messages

在这里插入图片描述

8.4.2 胶囊式导航

HTML 标记相同，但使用 .nav-pills 类


     
    Home
  
    Profile
  
    Messages

在这里插入图片描述

8.4.3 堆叠式导航

胶囊是标签页也是可以垂直方向堆叠排列的。只需添加 .nav-stacked 类

...

在这里插入图片描述

8.5 导航条组件

8.5.1 与导航组件的`区别`

导航条内所包含元素溢出

依赖 JavaScript 插件

修改视口的阀值
- 从而影响导航条的排列模式

导航条的可访问性

8.5.2 主要`类型`

基础导航条

在这里插入图片描述


     
        
         
           
            
      Brand    
     
    
         
           
              
       Link (current)
        
       Link
        
                 Dropdown           
         
         Action
 
         Another action
 
         Something else here
 
         
 
         Separated link
 
         
 
         One more separated link
 
        
        
      
      
      
              
                 
                
       
        
             
      
      
              
       Link
        
                 Dropdown           
         
         Action
 
         Another action
 
         Something else here
 
         
 
         Separated link

表单导航条

在这里插入图片描述

8.5.3 导航条的`位置`

顶部（底部）固定
- .navbar-fixed-top(固定在顶部)
- .navbar-fixed-bottom(固定在底部)
- .navbar-static-top(静止在顶部)

8.5.4 `反色`导航条

通过添加 .navbar-inverse 类可以改变导航条的外观

在这里插入图片描述

...

8.5.5 路径导航

在一个带有层次的导航结构中标明当前页面的位置

各路径间的分隔符已经自动通过 CSS 的 :before 和 content 属性添加了

在这里插入图片描述


     
    Home
  
    Library
  
    Data

路径导航源码分析

.breadcrumb {
   	padding: 8px 15px;	margin-bottom: 20px;	list-style: none;	background-color: #f5f5f5;	border-radius: 4px;}.breadcrumb > li {
   	display: inline-block;}.breadcrumb > li + li:before {
   	padding: 0 5px;	color: #ccc;	content: "/\00a0";}.breadcrumb > .active {
   	color: #777;}

8.6 分页组件

分页组件在网站内容展示中得到广泛的应用

Bootstrap框架提供的分页组件类型
- 多页码分页组件（pagination类样式）
- 上下页分页组件（pager类样式）

在这里插入图片描述

8.7 媒体对象

一般用于文本内容和两端对齐的媒体对象

主要样式类型
- media-list：针对列表
- media：外部容器，针对列表项
- media-left:左侧媒体元素
- media-object：媒体元素样式
- media-body：文本元素样式
- media-heading：文本元素的标题

8.8 进度条

通过这些简单、灵活的进度条，为当前工作流程或动作提供实时反馈

进度条组件使用了 CSS3 的 transition 和 animation 属性来完成一些特效

在这里插入图片描述

60%

8.9 徽章

给链接、导航等元素嵌套 <span class="badge"> 元素，可以很醒目的展示新的或未读的信息条目

在这里插入图片描述


     
      	Home 42  
  
      	Profile  
  
      	Messages 3

8.10 面板

某些时候可能需要将某些 DOM 内容放到一个盒子里。对于这种情况，可以试试面板组件

在这里插入图片描述

8.11 BootStrap CSS 组件练习

在这里插入图片描述

    
       
       响应式字体图标练习    
       
           
   
                                                     Domain                   price                   Clicks                   Update                   Status                                
                                                 A.COM                   $12                   122                   2020-9-1                                   aaa
                                                                                                                                       
                                                 b.COM                   $22                   100                   2020-8-25                                   ccc
                                                                                                                                       
                                                 C.COM                   $55                   88                   2021-1-1                                   ddd
                                                                                                                                       
                                                 D.COM                   $64                   99                   2020-3-3                                   eee

9. BootStrap JS 插件

使用动画过渡效果的组件
- 模态弹窗
- 下拉菜单
- 折叠导航条
- 轮播图
- 标签页
- 。。。。

9.1 模态框

框架中称为Modal，也叫popup，一般放置在body标签的子级

9.1.1 模态框主要应用

主要应用
- 提示信息、警告信息和大文本
- 多按钮确认提示
- 单击缩略图时显示大图

9.1.2 模态弹窗样式结构

在这里插入图片描述

9.1.3 模态弹窗data声明用法

data-toggle属性
- 触发事件的类型，如 modal，popover，tooltips 等

data-target属性
- 事件的作用对象

data-dismiss属性
- 关闭效果

9.1.4 模态弹窗JavaScript用法

modal(option)方法

名称	类型	默认值	描述
backdrop	boolean 或字符串"`static`"	true	背景层是否有效
keyboard	boolean	true	键盘上的 esc 键被按下时关闭模态框

事件监听

事件类型	描述
show.bs.modal	`show` 方法调用之后立即触发该事件
shown.bs.modal	此事件在模态框已经显示出来(并且同时在 CSS 过渡效果完成)之后被触发
hide.bs.modal	`hide` 方法调用之后立即触发该事件
hidden.bs.modal	此事件在模态框被隐藏(并且同时在 CSS 过渡效果完成)之后被触发
loaded.bs.modal	从`远端的数据源`加载完数据之后触发该事件

9.1.5 模态弹窗练习

删除列表

在这里插入图片描述

    
       
       Document    
       
           
   
                                                     Domain                   price                   Clicks                   Update                                
                                                 A.COM                   $12                   122                   2020-9-1                                                            
                                                 b.COM                   $22                   100                   2020-8-25                                                            
                                                 C.COM                   $55                   88                   2021-1-1                                                            
                                                 D.COM                   $64                   99                   2020-3-3                                                            
        
   
    
       
           
                
                     
      
       友情提示
      
                
      
       您确认需要删除该项吗？

9.2 下拉列表

9.2.1 data 声明方式

data-dropdown

...

9.2.2 JS 方式

dropdown 方法

$('.dropdown-toggle').dropdown()

9.2.3 下拉列表 JS 用法

事件监听

事件类型	描述
show.bs.dropdown	show 方法调用之后立即触发该事件
shown.bs.dropdown	此事件在下拉列表框已经显示出来(并且同时在 CSS 过渡效果完成)之后被触发
hide.bs.dropdown	hide 方法调用之后立即触发该事件
hidden.bs.dropdown	此事件在下拉列表框被隐藏(并且同时在 CSS 过渡效果完成)之后被触发

9.3 折叠导航条

9.3.1 折叠导航条语法

折叠导航条样式结构

data 声明方式
- data-toggle: collapse
- data-target: 导航菜单项的容器

在这里插入图片描述


     
        
         
           
            
      Brand    
     
    
         
           
              
       Link (current)
        
       Link

9.4 轮播图

轮播图样式结构

data 声明方式
- data-ride
- data-target

10. BootStrap 4

10.1 BootStrap 4 新特性

不支持IE8

box-sizing 属性值改为 border-box

采用rem作为计量单位(root)

新的导入文件

新的栅格系统

新的全局样式

10.2 BootStrap 4 模版

  
   	 
    	 
    	 
   	 
    	 Hello, world!      	Hello, world!

10.3 BootStrap 4 栅格系统

10.3.1 BootStrap 4 主断点

依据媒体查询指令@media，按宽度从小到大分为xs、sm、md、lg和xl五种规格

在这里插入图片描述

10.3.2 BootStrap 4 排列

列组合
- col-type-num类样式

列偏移
- offset-type-num类样式

列排序
- order-num类样式

10.3.3 BootStrap 4 组合对齐

常见列组合
- col[-type]样式平分宽度
- 固定列宽+平分剩余宽度
- 固定列宽+由内容决定宽度
- 强制换行

常见对齐方式
- 整行垂直对齐 align-items-type
- 单个垂直对齐 align-self-type
- 多行垂直对齐align-content-type
- 水平对齐 justify-content-type

11. 总结

学习了 BootStrap 框架，做笔记总结一下

转载地址：http://vjqwi.baihongyu.com/

你可能感兴趣的文章

jQuery实现倒计时秒杀效果------Sestid

查看>>

jQuery实现html网页顶部自适应导航栏（media）------Sestid

查看>>

鼠标悬停显示下划线（带小特效）------Sestid

查看>>

jQuery 实现input搜索框自动匹配------Sestid

查看>>

Js 实现回车键触发登录，并弹出需要输入信息------Sestid

查看>>

Js字符串和数组方法及使用------Sestid

查看>>

JavaScript常用算法（面试）------Sestid

查看>>

Js或者jQuery实现点击图片出现蒙层并将图片放大在蒙层上------Sestid

查看>>

Js，jQuery事件、效果大全------Sestid

查看>>

CSS块元素、内联元素、内联块元素详解------Sestid

查看>>

Js实现跟随鼠标移动的小球------Sestid

查看>>

HTML图像，链接，列表，表格等详细介绍------Sestid

查看>>

Js实现的俄罗斯方块小游戏------Sestid

查看>>

Js实现贪吃蛇小游戏------Sestid

查看>>

jQuery常用方法(持续更新)

查看>>

原生js实现自定义倒计时效果------Sestid

查看>>

原生js实现生成随机验证码=------Sestid

查看>>

js实现购物时选带属性的商品------Sestid

查看>>

点击出现对应界面（第二个界面可以选择显示内容）------Sestid

查看>>

Js实现炫酷仿抖罗盘时钟------Sestid

查看>>

Domain	price	Clicks	Update	Status
A.COM	$12	122	2020-9-1	aaa
b.COM	$22	100	2020-8-25	ccc
C.COM	$55	88	2021-1-1	ddd
D.COM	$64	99	2020-3-3	eee

BootStrap 基础笔记

1. 响应式设计

1.1 什么是响应式设计

1.2 为什么需要响应式设计

1.3 响应式设计常见技术

2. 媒体查询

2.1 什么是媒体查询指令

2.2 媒体查询指令原理

2.3 媒体查询指令语法

2.4 设备类型

2.5 设备特性

2.6 视口问题

2.6.1 PC端视口

2.6.2 移动端视口

2.6.3 针对移动端视口的设置

2.7 布局案例

3. 认识 BootStrap

4. BootStrap 框架概述

4.1 使用原因

4.2 技术特性

5. 开始使用 BootStrap

5.1 下载安装

5.2 框架目录结构

5.3 框架导入方法

hello Bootstrap!

5.4 框架技术体系

6. BootStrap 栅格系统

6.1 BootStrap 栅格系统定义

6.2 BootStrap 栅格系统详情

6.3 栅格系统参数

6.4 栅格系统实例

6.5 BootStrap 栅格系统类样式

6.6 BootStrap 栅格系统源码分析

6.7 BootStrap 栅格系统案例

7. BootStrap 全局样式

7.1 样式类型

7.2 基础设置

7.3 文字设置

7.3.1 强调文字

7.3.2 文字对齐方式

7.3.3 改变大小写

7.4 列表样式

7.5 表格样式

7.5.1 基础类样式

7.5.2 附加类样式

7.5.3 响应式布局类样式

7.6 表单样式

7.6.1 基础类表单

7.6.2 内联表单 (min-width:768px)

7.6.3 横向表单

7.7 按钮组件

7.7.1 按钮尺寸

7.7.2 激活状态

7.7.3 禁用状态

7.8 图片样式

7.8.1 响应式图片类样式

7.8.2 图片形状类样式

7.9 颜色设置

7.9.1 颜色类型

7.9.2 文本及背景颜色类样式

7.10 辅助样式

7.10.1 关闭图标

7.10.2 三角符号

7.10.3 快速浮动

7.11 响应式工具类

7.11.1 响应式工具实现布局

8. BootStrap CSS 组件

8.1 字体图标

8.1.1 自定义字体

8.1.2 BootStrap 字体图标源码解析

8.1.3 使用其他图标

8.2 下拉菜单

8.2.1 下拉列表菜单项

8.2.2 列表辅助属性

8.3 按钮组

8.4 导航组件

8.4.1 选项卡式导航

8.4.2 胶囊式导航

8.4.3 堆叠式导航

8.5 导航条组件

7.6.2 内联表单 (`min-width:768px`)

8.5.1 与导航组件的`区别`

8.5.2 主要`类型`

8.5.3 导航条的`位置`

8.5.4 `反色`导航条