Bootstrap学习笔记（二）全局CSS样式

学习的是Bootstrap3

 

1、jQuery与Bootstrap区别

jQuery是一个JS框架；

jQueryUI是一个HTML组件库；

Twitter Bootstrap是一个HTML/CSS/JS框架，适用于移动设备优先的响应式网页。

 

2、 Bootstrap2  vs  Bootstrap3

Bootstrap2：面向PC进行了样式设定，同时兼顾PAD和PHONE

Bootstrap3：面向Phone进行样式设定，同时兼顾了PC

 

3、Bootstrap3  vs  Bootstrap4

 

Bootstrap3的4种栅格：

特小（col-xs-） 适配手机(<768px)

小（col-sm-） 适配平板(≥768px)

中（col-md-） 适配电脑(≥992px)

大（col-lg-） 适配宽屏电脑(≥1200px)

 

Bootstrap4的5种栅格：

特小（col-）(<576px)

小（col-sm-）(≥576px)

中（col-md-）(≥768px)

大（col-lg-） (≥992px)

特大（col-xl-）（≥1200px）

 

Bootstrap4特点

新增网格层适配了移动端；

全面引入ES6新特性（重写所有JavaScript插件）；

css文件减少了至少40%；

所有文档都用Markdown编辑器重写；

放弃对IE8的支持

 

4、主要涉及：

  (1)HTML：为H5已有的标签扩展了一些自定义属性   data-*

     <div id="" class="" style="" title="" data-old-width="500">

  (2)CSS： CSS Reset（样式重置）  + 几千个class

  (3)JS：基于jQuery提供了十几个插件函数

 

5、在做项目时，尽量把class给css用来表示样式，把id分给js进行操作

 

6、Bootstrap提供的CSS Reset（前边是元素  {}内是Bootstrap对元素进行的样式修改）

  * { box-sizing: border-box; }

  body { font ...; color: #333; background: ...; margin: 0;}

  h1 { font-size: ;  margin-top: 20px;  margin-bottom: 10px;}

  h2 { font-size: ;  margin-top: 20px;  margin-bottom: 10px;}

  h3 { font-size: ;  margin-top: 20px;  margin-bottom: 10px;}

  h4  { font-size: ;  margin-top: 10px;  margin-bottom: 10px;}

  h5  { font-size: ;  margin-top: 10px;  margin-bottom: 10px;}

  h6  { font-size: ;  margin-top: 10px;  margin-bottom: 10px;}

  a { color:;  text-decoration: ;}

  img { border: 0;  vertical-align: middle; }

  p { margin-bottom:10px; }

 

7、Bootstrap全局CSS样式——按钮

  .btn { padding:;  border: ;}

  .btn-default { color:;  background:;  border-color:;}

按钮颜色（颜色通用）

  .btn-danger    红  危险

  .btn-success   绿 成功

  .btn-warning  黄 警告

  .btn-info      浅蓝 提示

  .btn-primary   深蓝 基础

按钮大小（大小通用）

  .btn-lg             large    大     （超大PC）

  .btn-md（默认）   medium  中     （PC）

  .btn-sm            small    小     （平板）

  .btn-xs            extra small   超小  （手机）

按钮占比

  .btn-block      按钮变成块级（占一整行）

 

通用的两个class

  .pull-left { float: left; }      左浮动的按钮

  .pull-right { float: right; }    右浮动的按钮

 

8、Bootstrap全局CSS样式——图片

  .img-rounded     边框变圆滑

  .img-circle        border-radius：50%

  .img-thumbnail 缩略图片/拇指图片

  .img-responsive  响应式图片

 

9、Bootstrap全局CSS样式——排版和代码

文本颜色

.text-danger

.text-success

.text.warning

.text-info

.text-primary

 

背景颜色

.bg-danger

.bg-success

.bg-warning

.bg-info

.bg-primary

 

文本对齐方式

 .text-left      文本左对齐

 .text-right     文本右对齐

 .text-center     文本居中对齐

 .text-justify     文本两端调整对齐（左右都对齐，都没有锯齿）

 

文本大小写

.text-uppercase    都转大写

.text-lowercase   都转小写

.text-capitalize   每个单词以大写字母开头

 

列表样式

.list-unstyled  去除列表样式

.list-inline     列表变为行内元素

 

10、Bootstrap全局CSS样式——表格

  .table                美观

  .table-bordered 带边框的表格

  .table-responsive 响应式表格（会出现水平滚动条）  注意：使用在table的父元素上，而不是table上

  .table-striped 隔行变色的表格

  .table-hover 带悬停效果的表格

 

11、Bootlint工具:

是一个js，由Bootstrap官方提供，用于检测使用Bootstrap的页面中常见的HTML错误、class使用方面的错误——默认情况下浏览器是检查不出来的。

使用：

首先在项目js文件夹中引入bootlint.js文件（文件在官网上下载）

之后在<script>中加入下面一段话

(function () {

        var s = document.createElement("script");

        s.onload = function () {

            bootlint.showLintReportForCurrentDocument([]);

        };

        s.src = "js/bootlint.js";

        document.body.appendChild(s)

    })();

如果出现错误，在浏览页面时会弹出提示框，之后在控制台中就能看见错误

 

12、面试题：Bootstrap布局系统中容器（container/container-fluid）的特点？

1. 宽度做了媒体查询。

2. 添加了前置和后置内容生成，可以防止子元素的越界、浮动造成的影响。

3.  

13、.container的宽度问题：

当屏幕宽度>1200px（超大PC显示器-lg）：    容器宽1170px

当屏幕宽度>992px（普通PC显示器-md）:    容器宽970px

当屏幕宽度>768px（平板显示器-sm）:        容器宽750px

当屏幕宽度<768px（手机显示器-xs）:         容器宽auto

.container-fluid的宽度：一直都是 width: auto; + before + after

 

 14、Web开发中页面布局可以采用的方式：

 (1)使用TABLE做布局

优势：简单不易出错  不足：加载效率

 (2)使用DIV+CSS做布局

优势：加载速度快、灵活  不足：不易控制

 (3)使用HTML5新标签实现布局，<header><section><nav><footer>......

    大体与div+css差不多，但是用更多标签代替单一的div，有甚多好处

 (4)使用Bootstrap提供的栅格(Grid Layout)布局系统

优势：加载速度快、灵活、支持响应式功能、容易控制（有行/列的概念，但使用DIV+CSS实现）

 

15、Bootstrap全局CSS样式——栅格布局系统(重点)

栅格布局系统的特点：

 (1)所有的行必须放在容器中： .container或.container-fluid

 (2)分为多行(row)，一行中平均分为12列(col)

 (3)网页内容只能放在列(col)中，不能直接放在行(row)

 (4)可以在col中再嵌套row  

 (5)col分为四大类： col-xs   col-sm    col-md   col-lg

 (6)col-md-*  *值可为1~12，值就为某个列的宽度(  */12  )

 (7)可以为一个列指定不同屏幕下的不同宽度   <div class="col-md-2 col-sm-3 col-xs-12"></div>

 (8)向大的屏幕兼容

col-lg-*  只对大PC屏幕有效

col-md-*   对普通PC和大PC屏幕都有效

    col-sm-*   对平板、PC、大PC屏幕都有效

    col-xs-*   对手机、平板、PC大PC屏幕都有效

 (9) .hidden-lg    当前列只在大PC屏幕下隐藏

.hidden-md 当前列只在PC屏幕下隐藏

.hidden-sm 当前列只在平板屏幕下隐藏

.hidden-xs 当前列只在手机屏幕下隐藏

 

补充：CSS相关知识

  (1)如何解决父元素的第一个子元素的margin-top越界问题

    为父元素加border-top: 1px;——有副作用

    为父元素指定padding-top: 1px;——有副作用

    为父元素指定overflow:hidden;——有副作用

    为父元素添加前置内容生成——推荐使用

.parent:before {

content: '  ';

display: table;

}

  (2)如何解决所有的子元素浮动后父元素高度变为0，且影响后续元素

1)为父元素指定overflow:hidden;——有副作用

2)为父元素指定高度：height: xxx;——有局限性

3)为父元素添加后置内容生成——推荐使用

.parent:after {

content: '  ';

display: table;

clear: both;

}