Bootstrap框架的使用和总结

Bootstrap

1.视口

​ 在pc端没有视口的概念 只有窗口 是ntml页面外面的一个容器 我们会把所有的内容都放进视口里面 然后在对视口进行缩放,默认视口的宽度是980px 因为早期pc端网页的版心的980px
​ 视口宽度为980px 对于移动端来说 会出现缩小后文字很小的情况 所以后来提供了双击放大的功能 但是需要左右滑动 那么用户体验就会很差,所以我们需要设置移动端的视口不发生缩放

2.解决网页缩放问题

meta标签是对网页进行配置

1.name 指的是我们需要配置的东西的名字 viewport 指的是配置视口

2.content 指的是需要配置的内容 里面设置多个属性 使用逗号隔开

3.width 指的是设置视口的宽度 默认是980 这里设置的device-width 指的是和我们的手机屏幕一样宽

4.initial-scale 初始化缩放 1.0指的是不进行缩放

5.minimum-scale 设置移动端页面最小放大倍数 1.0表示不能缩小

6.maximum-scale 设置移动端页面最大放大倍数 1.0表示不能放大

user-scalable 指的是用户是否也可以进行缩放 no表示不允许 yes表示允许

3.常见的响应式开发框架

1.bootstrap 当前最热门的响应式开发框架

2.bootstrap 是2011年由推特公司的两个前端工程师开发 2014年火起来

3.AmazeUI 国内模仿bootstrap的一个框架

4.layUI 模仿的bootstrap（模块化的特点）

4.布局容器

1.Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套
.container 类用于固定宽度并支持响应式布局的容器。

响应式布局的容器 固定宽度

大屏 ( >=1200px) 宽度定为 1170px

中屏 ( >=992px) 宽度定为 970px

小屏 ( >=768px) 宽度定为 750px

超小屏 (100%)

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

​

2.其实容器原本是有15px的左右 内边距 在row里面设置了宽度为auto 然后margin-left 和 margin-right给负值 那么就抵消了容器的边距
如果宽度设死了是100% 那么margin 就只会影响盒子的位置不会影响盒子的大小
如果宽度给了auto 不代表一定是宽度的100% 默认是100% 如果给盒子的margin为负值 那么该盒子会变大

5.栅格栏

栅格系统定义的类名的向上兼容：往大的屏幕进行兼容

1.向上兼容的好处：当多个屏幕 布局一样时 不需要全部写 只需要写其中最小的那一个即可

2.向下覆盖：一旦比较大的屏幕的样式生效 那么就会对之前的比较小的屏幕的样式进行覆盖

3.向下兼容的好处：当我们同时写了很多类名时 大屏幕类名生效 那么就会覆盖小屏幕的类名样式
（向下覆盖的原理就是css样式的书写顺序的问题 也就是说大屏幕的类名源码在后面）

按照不同屏幕划分为1~12 等份

行（row） 可以去除父容器作用15px的边距

xs-extra small：超小； sm-small：小； md-medium：中等； lg-large：大；

列（column）大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列

每一列默认有左右15像素的 padding

可以同时为一列指定多个设备的类名，以便划分不同份数 例如 class=“col-md-4 col-sm-6”

案例

嵌套

容器

row必须写在容器里
列必须写在行里面 （只有列可以作为行的直接子元素）
为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。

行偏移

.col-md-offset-* 类
可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。
.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

 
3

行排序

使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。
col-xs-push-1 指的是当前的元素向右排序一格
col-xs-pull-1 指的是当前的元素向左排序一格

4

6.常见的布局方式

1.固定宽高+浮动或者定位（只靠传统的pc端的布局）
2.百分比布局 早期的移动端布局
3.flex 弹性布局
4.响应式布局 适配多个终端
5.rem布局 比较新型的移动端布局

7.常用的样式

标题标签

段落标签

是在每一个段落之前会有一个margin隔开

 
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

文本突出显示

lead类用于文本突出显示.lead

 
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

高亮显示

让mark标签中的文本高亮显示

 highlight

删除线

表示删除某一段文字 其实就是使用text-decoration来实现的 但是考虑到语义化明确化 一般都 使用del标签

This line of text is meant to be treated as deleted text.

s标签很少用于删除某个文本

This line of text is meant to be treated as no longer accurate.

下划线

表示插入文本 而且使用下划线标记 语义明确化 也是使用ins ins表示insert u表示underline 只是单纯的下划线

 This line of text is meant to be treated as an addition to the document.

 This line of text will render as underlined

缩小

缩小版的文字 一般是父容器字体的85%

This line of text is meant to be treated as fine print.

加粗

文字加粗 strong 强壮的意思 表示明确 b标签 表示bold 加粗的意思 但是用的不多

 rendered as bold text
 
  rendered as bold text

斜体

表示斜体 使用font-style来设置 i标签也可以表示 但是i一般不会用于表示斜体

rendered as italicized text

rendered as italicized text

对齐方式

设置文本的对齐方式 使用text-align来设置

	   
Left aligned text.
       
Center aligned text.
       
Right aligned text.
       
Justified text.
       
No wrap text.

设置大小写

全部子母变小写

Lowercased text.

全部子母变大写

 
Uppercased text.

所有单词的首字母大写

Capitalized text.

列表

添加list-unstyled类 是去掉ul里li元素默认的样式

 

           
Lorem ipsum dolor sit amet
           
Lorem ipsum dolor sit amet
           
Lorem ipsum dolor sit amet
           
Lorem ipsum dolor sit amet
           
Lorem ipsum dolor sit amet
       

通过设置子元素的display：inline-block 来设置元素一行显示

  

           
Consectetur adipiscing elit
           
Consectetur adipiscing elit
           
Consectetur adipiscing elit
           
Consectetur adipiscing elit
           
Consectetur adipiscing elit
       

表格

table-striped–斑马条纹

           

               
b1
               
b2
               
b3
               
b4
               
b5
               
b6
               
b7
               
b8
               
b9
               
b10
           
           

            
b1
            
b2
            
b3
            
b4
            
b5
            
b6
            
b7
            
b8
            
b9
            
b10
        
 
 

table-bordered–边框

table-hover----鼠标悬停的状态

table-condensed–缩紧表格 减小表格之间的padding

        

          

            
#
            
First Name
            
Last Name
            
Username
          
        
        

          

            
1
            
Mark
            
Otto
            
@mdo
          
          

            
2
            
Jacob
            
Thornton
            
@fat
          
          

            
3
            
Larry
            
the Bird
            
@twitter
          
          

            
4
            
Tonny
            
the cat
            
@tall
          
        
      

table-responsive 这个类必须加在表格外面的一个容器里面 而且里面的元素必须是表格

当屏幕无法显示所有的表格内容时 就会在表格内部显示滚动条 可以滚动显示 并不是页面的滚动条

 

        

          

            

              
#
              
Table heading
              
Table heading
              
Table heading
              
Table heading
              
Table heading
              
Table heading
            
          
          

            

              
1
              
Table cell
              
Table cell
              
Table cell
              
Table cell
              
Table cell
              
Table cell
            
            

              
2
              
Table cell
              
Table cell
              
Table cell
              
Table cell
              
Table cell
              
Table cell
            
            

              
3
              
Table cell
              
Table cell
              
Table cell
              
Table cell
              
Table cell
              
Table cell
            
          
        
      

表单

form-horizontal 是让表单元素水平排列 而且使用bootstrap设定好的栅格类

form-group 在bootstrap里面设置好了一些样式 让表单按照他的样式进行排列

form-control 是让空间的宽度设置为100% 而且是设置在input元素上面的

form-inline 让所有的input标签一行排列 也就是把input变成display：inline-block

 

        

          Email address
          
        
        

          Password
          
        
        

          File input
          
          
Example block-level help text here.
        
        

          
             Check me out
          
        
        Submit
      

        

          Email
          

            
          
        
        

          Password
          

            
          
        
        

          

            

              
                 Remember me
              
            
          
        
        

          

            Sign in
          
        
      

选项框

disabled属性和原生使用方法一样 但是有一个disabled类 他是加在外层div上面的

 

        
          
          Option one is this and that—be sure to include why it's great
        
      
      

        
          
          Option two is disabled
        
      
      
      

        
          
          Option one is this and that—be sure to include why it's great
        
      
      

        
          
          Option two can be something else and selecting it will deselect option one
        
      
      

        
          
          Option three is disabled
        
      

输入框

只读输入框 和disabled的样式差不多 只是鼠标还是原本的状态

按钮

只要给元素加上btn btn-default类 就可以把任何标签变成按钮

Link
      Button
      
      

      
p按钮
      
div按钮

按钮预定义类

.btn-lg 大按钮

.btn-sm 小按钮

.btn-xs 超小按钮

.btn-primary 默认按钮

.btn-default 默认按钮

 
         （默认样式）Default

         
        （首选项）Primary

        
        （成功）Success

        
        （一般信息）Info

        
        （警告）Warning

        
        （危险）Danger

        
        （链接）Link


        
        （块级元素）Block level button
        （块级元素）Block level button

背景颜色

背景颜色的预定义类

​ bg-primary
​ （首选项）Primary

​ bg-success
​ （成功）Success

​ bg-info
​ （一般信息）Info

​ bg-warning
​ （警告）Warning

​ bg-danger
​ （危险）Danger

文字颜色

​ text-muted
​ text-primary
​ text-success
​ text-info
​ text-warning
​ text-danger

关闭按钮

默认在页面的右上角
close

快速浮动

​ pull-left
​ 左浮动

​ pull-right
​ 右浮动

​ 而且加了！important 明确了样式的优先级

块级盒子居中显示

​ center-block

某个屏幕显示或者隐藏

这个响应式工具没有向上兼容和向下兼容的功能 因为屏幕宽度判断是判断条件写死了的所以必须符合条件 才可以让样式生效，所以 要在某个屏幕显示或者隐藏 那么我们就需要写到对应的屏幕

visible-sm visible-md

在小屏幕显示

visible-xs

在超小屏幕显示，其他屏幕隐藏

hidden-sm hidden-md hidden-lg

在超小屏幕显示 其他屏幕隐藏

8. 字体图标

font-family

设置font-family 就可以让常规的字符显示出不同的图标 矢量图 跟字体一样 可以改变颜色大小

字体图标 其实就是把一些矢量图打包成一个字体文件 做成一个字体库 然后把这些编码给对应的类名
1.先引入iconfont.css

2.定义一个叫做iconfont的字体库

3.字体库里面设置iconfon类 是为了给元素指定字体库 那么也就是因为这 如果过某个元素需要加字体图标 那么必须加iconfont这个类 就不方便

像\e6c8 这种unicode码 不能直接放在标签里面 会把其当成字符串进行解析 不会显示对应的图标 而且这种unicode码只能放在伪元素或者伪类里面去写

eot woff ttf svg 都是属于字体文件
eot 适用于IE浏览器
woff 标准的字体文件
ttf chrome, firefox, opera, Safari, Android, iOS 4.2+
svg 适用于iOS 4.1以下

9. 属性选择器

[]表示属性选择器
[class]
[属性名] 这里表示的是 只要元素有这个属性 那么就会被选中

[class^=“属性名中的字符”]
表示的是对应属性名的属性值 以什么开头的就会被选中

[class$=“属性名中的字符”]
表示的是对应属性名的属性值 以什么结尾的就会被选中

[class*=“属性名中的字符”]
只要里面包含对应的值 那么就会被选中

10. less

原生css

缺点
1.外层的盒子选择器要写很多遍
2.如果中间某个元素不需要了 那么整体的布局就会乱
3.不便于维护 如果某个类名或者id名发生变化 那么维护起来就很难 .header变成#header 牵一发而动全身

css预处理器

就是把css作为编程语言来写 可以声明变量 也可以嵌套
引入方式
方法1 是引入对应的less文件 以及less.js 对less文件进行编译 编译成对应的css文件
引入less文件时需要注意的是 吧之前rel属性里面的stylesheet 修改成 stylesheet/less

less.js是用来编译less文件的 把less编译成相对应的css文件

方法2

直接使用vscode里面的插件 只要生成了less文件 或者对less文件进行修改 那么就会同步生成css文件
使用插件把less编译成css文件之后 导入css文件即可

Less语法

变量
固定写法 @变量名:属性值
用法：在需要 使用的时候 直接使用这个变量
普通变量
less 以@开头定义变量，并且使用时直接键入@名称。注意：作为属性值的变量不能添加大括号
@color:#333;
Div{Background：@color}

选择器变量
让选择器变成一个动态的。
作为选择器的变量在使用的时候需要添加大括号（{}），变量的前面可以添加选择操作符。

@mySelector: #wrap;         

@Wrap: wrap;
@{mySelector}{ color: #999;}              
.@{Wrap}{
        color:#ccc;
      }
	//生成的 CSS
	 #wrap{
        color: #999;
      }
      .wrap{
        color:#ccc;
      }

属性变量
属性变量使用的时候也需要添加大括号（{}）。
@borderStyle: border-style;

@Soild:solid;

@{borderStyle}: @Soild;

Url变量
项目结构改变时，可以方便我们修改，目的是为了方便项目的维护。
@images: “…/img”;
需要加引号

background: url("@{images}/dog.png");

变量名 必须使用大括号包裹
申明变量
定义：@name：{
  Key：value；
  Key：value；
}
如
 @Rules:{
          width: 200px;
          height: 200px;
          border: solid 1px red;
      };                                                             
      #con{
        @Rules();
      }
//生成的 CSS
	#con{
        width: 200px;
        height: 200px;
        border: solid 1px red;
      }

嵌套
&符号，表示的是上1级选择器的名字。
和js里面的this的意思是一样的 表示的是当前的选择器所选中的元素 写在当前元素的里面

注释
/**/ 是css里面的注释 所以在less里面用了之后 编译就会把它一起拿到css文件里面去

// 是js中的注释 编译之后就隐藏在css文件中没有出现

组件

组合起来的控件 （至少包含两个标签） 可以实现一个具体的功能
很多网站上都有使用相同的结构，（重复使用） 那么就提前写好 需要使用的时候 根据需求进行修改

常用的bootstrap组件

下拉菜单 不同于select标签
导航条
表单组
分页
媒体对象(图文列表)

bootstrap3和bootstrap4的区别

1.引入的文件不一样 bootstrap完全舍弃了IE8 引入jQuery精简版 多引入了popper.js

jquery引入的文件是精简版的文件 这个精简版的和完整版的区别在于 精简版的完全舍弃了IE8 主要针对移动版

2.新增很多容器 是关于不同的屏幕的居中显示 container 容器宽度变成了1140px
3.栅格系统的变化 多分出了一个档

xs	.col	<576
sm	.col-sm-	>576&&<768
md	.col-md-	>768&&<992
lg	.col-lg	>992&&<1200
xl	.col-xl-	>1200

新增了一个类 col 默认平分屏幕宽度(flex：1) 但是hicol类 有一个特点 就是不会换行，如果需要换行 那么就使用一个.w-100 加一个额外标签

4.控制在不同屏幕显示隐藏的类
bootstrap3： hiddden-sm visible-sm 不具备向上兼容和向下兼容的功能
bootstrap4: 显示隐藏变成了 d-sm-none d-sm-block 而且具备向上兼容和向下兼容的功能