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

本是古典何须时尚 2022-04-13 14:26 341阅读 0赞

**学习的是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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70][]

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-\*

(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;

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70]: /images/20220413/00b0111cd2d4413bb92aa737866f5b40.png

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关【Bootstrap】008-全局样式：图片

相关【Bootstrap】007-全局样式：按钮

相关【Bootstrap】005-全局样式：表格

相关 bootstrap的全局CSS样式以及组件的使用

相关 CSS全局样式：

相关 bootstrape的CSS样式二

相关【Bootstrap框架】——全局CSS样式（Global CSS Style）

相关 BootStrap复习之全局CSS样式

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

相关前端Bootstrap——全局CSS样式-排版