06-BOOTSTRAP

Posted 2021-04-29 李才哥

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了06-BOOTSTRAP相关的知识，希望对你有一定的参考价值。

当前浏览器不支持播放音乐或语音，请在微信或其他浏览器中播放 06-BOOTSTRAP

Bootstrap 框架 , 响应式

1、什么是响应式

响应式：Responsive Web Page，又称为自适应网页，一个页面既可以在PC浏览器中正常访问，也可以在手机/平板中正常访问。而且会配合不同的设备有不同的显示结果。

响应式网页的特点：

1、页面上的图片和文字要随着屏幕的尺寸而发生改变

2、页面的布局也会随着屏幕的尺寸而发生变化

2、如何测试响应式的网页

1、使用真实的物理设备

优势：测试结果真实可靠

不足：设备太多，成本太大，测试任务量大

2、使用第三方的模拟设备

优势：无须添加更多设备

不足：效率偏低，会有结果偏差

3、使用浏览器自带的设备模拟器(Emulator)

优势：简单，功能丰富

不足：会有结果偏差

3、视口 - Viewport

ios中的Safari中提出的概念

在移动设备中，浏览器里显示网页的一块区域(PC端会忽略此概念)

视口的尺寸：

1、在IE中：宽度是 1024px

2、非IE中：宽度是 980px

对于响应式的网页，要设置的视口信息如下：

1、视口的宽度：与设备的物理宽度保持一致

2、视口的初始化缩放倍率：原始大小(不缩放显示)

3、不允许用户手动缩放视口的大小：不允许手动缩放网页

在html中指定视口信息：

1、视口的宽度 : width

取值：

1、device-width

2、具体数值

2、视口的初始化缩放倍率：initial-scale

取值：

以数字来表示缩放倍率

取值为 1 的话，表示原始大小显示

3、手动缩放视口大小：user-scalable

取值：

1/0/yes/no

1 和 yes ：表示允许手动缩放视口大小

0 和 no ：表示不允许手动缩放视口大小

content="width=device-width,initial-scale=1,user-scalable=0">

以上代码，移动端响应式必备!!!

4、如何编写响应式网页(重点)

1、必须声明视口(已解决)

2、文字尽量使用相对尺寸(em,rem)，尽量不用绝对尺寸(px,pt)

em:使用当前元素父元素文字大小的倍数

rem:使用当前网页根元素(html)定义的文字大小的倍数

3、容器元素尽量使用相对尺寸(%,auto),尽量不用绝对尺寸(px)

4、图片元素尽量使用相对尺寸(%,auto),尽量不用绝对尺寸(px)

img{

width:50px;/*不推荐：绝对尺寸*/

width:50%;/*推荐：占父元素宽度的50%*/

max-width:50%;/*推荐：占父元素宽度的50%，

但最大不能超过图像本身的大小*/

}

ex:

1.jpg 的图像 100px * 100px ，将其放在 80px*80px 元素内，将 1.jpg 的max-width:50%;的话，1.jpg 显示宽度 40px * 40px

如果将1.jpg 放在 800px * 800px 元素内，将1.jpg 的max-width:50%;的话，1.jpg显示宽度为 100px*100px

如果将1.jpg 放在 800px * 800px 元素内，将1.jpg 的width:50%;的话，1.jpg显示宽度为 400px*400px

5、页面元素尽量使用流式布局

流式布局的特点：

1、元素默认是靠向容器的左上方开始排列的

2、横向排列，排列不下时则换行

方法1:float

方法2:display:inline-block;

方法3:弹性布局要配合着 flex-wrap:wrap;

6、响应式网页都要使用CSS3 Media Query的技术来判断设备的尺寸 - 最重要

ex:

1、设备的宽度 w <= 767px 背景色红色

2、设备的宽度768px<=w<=991px背景色绿色

3、设备的宽度w>=992px 背景色为粉色

5、CSS3 Media Query

CSS3 媒体查询技术

作用：可以根据不同的媒体类型以及特性去执行不同的CSS

语法：

通过 @media 的规则进行声明

@media MEDIA-TYPE and (MEDIA-FEATURE) and (MEDIA-FEATURE)

MEDIA-TYPE : 媒体类型

取值：

1、all，默认值，表示所有设备

2、screen ：屏幕(PC , PAD , PHONE)

3、tv ：电视设备

MEDIA-FEATURE : 媒体特性(属性)

取值：

1、width ：指定浏览器宽度大小

2、min-width ：判断指定浏览器窗口宽度最小值

3、max-width ：判断指定浏览器窗口宽度最大值

ex:

1、在屏幕(PC,PAD,PHONE)下,宽度在767px以内，将body的背景色改为红色

@media screen and (max-width:767px){

body{

background:red;

}

h1{

font-size:1.5em;

}

2、在屏幕(PC,PAD,PHONE)下,宽度在768~991之间，将body的背景改为绿色

@media screen and (min-width:768px) and (max-width:991px){

body{

background:green;

}

h1{

font-size:1.8em;

}

3、在屏幕(PC,PAD,PHONE)下,宽度在992px以上，将body的背景色改为粉色

@media screen and (min-width:992px){

body{

background:pink;

}

h1{

font-size:2em;

}

@media 具体使用：

1、有选择性的执行CSS片段中的内容

<style>

@media screen and (min-width:768px){

}

@media screen and (max-width:767px){

}

</style>

2、有选择性的执行某个外部CSS文件

当屏幕的尺寸在768px以上时，执行1.css中的内容

不足：即使不满足当前设备条件的CSS也会被请求，但不会被执行

复习：

1、视口

content="width=device=width,initial-scale=1,user-scalable=0">

2、如何编写响应式网页

1、视口的声明

2、尺寸尽量使用相对尺寸

1、文字尺寸：em ，rem

2、容器尺寸：%,auto

3、图片尺寸：%,auto (max-width)

3、页面尽量采用流式布局

4、CSS3 Media Query

@media MEDIA-TYPE and (MEDIA-FEATURE)

w <= 767px : PHONE

768px <= w <= 991px : PAD

w >= 992px : PC

=======================================

1、Twritter Bootstrap

CSS 框架，由上千个 class 来组成

官网：http://getbootstrap.com

中文：http://www.bootcss.com

API ：Application Programming Interface

Bootstrap :

1、CSS重写

2、定义了一部分元素的样式

表格，表单，按钮，图片 ... ...

3、响应式的布局效果

栅格布局系统

重点：bootstrap.css 文件 - 提供了上千个 class

行为动作：依赖于 JS 库 - jQuery

Boostrap分为5部分：

1、起步 - 引入Bootstrap框架到网页中

2、全局CSS样式 - 用于改变页面元素样式的css

3、组件 - 使用复杂结构拼出的特殊效果

4、JS插件 - 定义页面元素的行为

5、定制 - 自定义Bootstrap的效果(改源码)

2、Bootstrap第一步 - 起步

1、<html lang="zh-cn">

指定当前文档的基础语言

作用：

1、为浏览器自动翻译功能指定语言基础

2、为读屏软件指定发音基础

2、视口 <meta name="viewport">

3、跨浏览器(IE)兼容性设置

1、x-ua-compatible

x : Cross

ua: User Agent

作用：指定用哪个IE的内核来进行页面的渲染

2、IE=edge

指定渲染页面的IE浏览器的内核

IE=6 : 指定使用IE6的内核来渲染页面

在高于IE6(包含)的浏览器中，统一都使用IE6内核渲染

在低于IE6的浏览器中，使用当前浏览器中最高版本的内核进行渲染

IE=7 :

IE=8

IE=9

IE=10

IE=11

IE=edge

4、引入 bootstrap.css

5、引入两个兼容性 JS 文件

作用：让老版本的IE(IE8及以下) 支持 H5的新标记以及 C3 媒体查询技术

1、html5shiv.min.js

第三方JS，自调函数，用于让老版本的IE支持HTML5新标记

2、respond.min.js

第三方JS，自调函数，用于让老版本的IE支持CSS3媒体查询技术

<!--[if lte IE 8]>

<![endif]-->

6、引入两个行为依赖的 JS文件

jQuery.js , bootstrap.js

1、尽量在页面的最底部(</body> 之上)的位置进行引入

2、注意引入顺序

1、先引入jQuery.js 文件

2、再引入bootstrap.js文件

7、引入测试 JS文件

作用：用于检查页面结构是否按照 Bootstrap的要求进行编写的

1、引入 bootlint.js 文件，位于 bootstrap.js之后

2、编写测试代码

bootlint.showLintReportForCurrentDocument([]);

3、Bootstrap第二部 - 全局CSS样式

Bootstrap.css 内容分为2部分：

1、CSS Reset

*{ box-sizing:border-box; }

2、上千个Class

.container

.container-fluid

.btn

... ...

4、全局CSS中的内容

1、Bootstrap 默认将屏幕类型分成四大类

1、大型屏幕(lg [large]) : w >= 1200px

屏幕较宽的PC机显示器

2、中型屏幕(md [middle])

992px <= w <= 1199px

普通PC机显示器

3、小型屏幕(sm [small])

768px <= w <= 991px

各种PAD屏幕

4、超小型屏幕(xs [extra small])

w <= 767px

各种PHONE屏幕

2、Bootstrap提供的两个容器class

1、定宽容器

在不同宽度大小的设备上均提供了固定的宽度值

类：.container

lg : width:1170px;

md : width:970px

sm : width:750px

xs : width:100%

2、变宽容器

在任何设备中，宽度都是100%

类：.container-fluid

3、全局样式 - 按钮

1、Bootstrap中的所有按钮都依赖于 .btn 类

2、页面中允许设置为按钮样式的元素有

1、a 标记

2、button 标记

3、input 标记(button,submit,reset)

3、按钮样式类

.btn

.btn-default : 默认按钮的效果(白底深字)

.btn-primary : 首选项(深蓝底，白字)

.btn-success : 成功(绿色底，白字)

.btn-warning : 警告(黄色底，白字)

.btn-danger : 危险(红色底，白字)

.btn-info : 信息(浅蓝底，白字)

4、不同尺寸的按钮 class

.btn-lg

.btn-sm

.btn-xs

5、块级按钮 class

.btn-block

4、全局样式 - 列表

1、list-unstyled

不带任何标识的列表

2、list-inline

内联列表(行内列表)

3、dl-horizontal

水平定义列表

5、全局样式 - 图片

1、.img-rounded

圆角图片

2、.img-circle ?

圆形图片

3、.img-thumbnail ?

缩略图

4、.img-responsive ?

响应式图片

(10分钟)

6、全局样式 - 表格

所有的Bootstrap的表格全部都依赖于 .table

1、table-bordered

带边框的表格

2、table-striped ?

隔行变色表格(tbody)

3、table-hover ?

带鼠标悬停效果的表格

4、table-responsive ?

响应式表格(为表格父元素增加table-responsive)

7、全局样式 - 辅助类

1、关闭按钮

</button>

8、全局样式 - 栅格布局系统(重点)

1、网页中能够实现布局的技术

1、div + float

好处：效率高

不足：灵活，不易控制

2、table 布局

好处：简单，容易控制

不足：效率低

效率高，兼容容易控制的结构 - 栅格布局系统

3、栅格布局系统

好处：效率高，容易控制，实现响应式

不足：none

本质：就是由div组成的table样式的响应式结构(使用float布局)

2、使用方法

1、栅格布局系统的最外层，必须是bootstrap提供的两种容器之一

.container 或 .container-fluid

2、允许在容器中放置若干 "行"

类：.row , 表示一行

</div>

3、在行(div.row)中，允许放置列,在每行中，最多会等分成12列。所以在创建列的时候要指定列的宽度(当前列要占据几列的宽)

4、列会根据适用的屏幕分成4中类型

类：

1、.col-xs-*

.col-xs-1 : 在超小屏幕中，占一列的宽(width:8.33%)

.col-xs-2 : 在超小屏幕中，占两列的宽(width:16.66%)

......

.col-xs-12: 在超小屏幕中，占12列的宽(width:100%)

2、.col-md-*

.col-md-1 : 在中型屏幕中，占一列的宽(width:8.33%)

3、.col-sm-*

4、.col-lg-*

5、列向右偏移数量

每个列都可以指定向右偏移几列的位置

.col-xs-offset-n : 在 xs 屏幕下，当前列要向右偏移n列的位置

.col-sm-offset-n : 在 sm 屏幕下，当前列要向右偏移n列的位置

.col-md-offset-n : 在 md 屏幕下，当前列要向右偏移n列的位置

.col-lg-offset-n : 在 lg 屏幕下，当前列要向右偏移n列的位置

1、起步

1、<html lang="zh-cn">

2、视口

3、跨浏览器(IE)兼容性

4、Bootstrap.css文件

5、两个兼容性JS文件

1、html5shiv.min.js

2、respond.min.js

6、两个行为依赖JS文件

1、jquery.js

2、bootstrap.js

7、测试的JS文件

bootlint.js

2、全局CSS样式

1、Button

2、Img

3、Table

隔行变色：table-striped

带边框：table-bordered

鼠标悬停：table-hover

响应式表格：table-responsive

4、ul,ol,dl

list-unstyled

list-inline

dl-horizontal

5、栅格布局系统

1、栅格布局系统的最外层必须是 Bootstrap 所提供的容器

2、容器中允许出现若干 "行"

.row

每行都被等分为 12 列

3、在 row 中允许放若干列，但需要指定每列需要占的列宽(1/12)

4、列偏移

指定向右移动几个列的位置

===========================================

1、全局CSS样式 - 栅格布局系统(下)

1、栅格布局系统的嵌套

.col-*-*:相当于是一个容器

.container>.row>.col-*-*>.row>.col-*-*

2、适用于不同屏幕的列的class(xs/sm/md/lg)，可以兼容更大的屏幕

小屏幕的class 可以兼容大屏幕的显示效果

col-xs-6 : 在 xs 屏幕下，占6列的宽

col-lg-8 : 在 lg 屏幕下，占8列的宽

.col-xs-* : 适用于 xs/sm/md/lg

.col-xs-6 : 在 xs/sm/md/lg 都占6列的宽

.col-sm-* : 适用于 sm/md/lg

.col-md-* : 适用于 md/lg

.col-lg-* : 适用于 lg

大屏幕的内容class是不能兼容小屏幕的，所以大屏幕的内容放在小屏幕中都是以 100%的宽度显示的（纵向排列）

3、可以在一个列(div)中，指定在不同屏幕下的宽度占比

在xs中占12列的宽(一行中只显示一列)

在sm中占6列的宽(1行中能显示2列)

在md中占3列的宽(1行中能显示4列)

4、指定列在特定屏幕下隐藏

.hidden-lg : 在 lg 屏幕下隐藏

.hidden-md : 在 md 屏幕下隐藏

.hidden-sm : 在 sm 屏幕下隐藏

.hidden-xs : 在 xs 屏幕下隐藏

2、全局CSS样式 - 表单

Bootstrap中，表单控件与关联的lable(文本)要放在一个表单控件组中(.form-group)

表单控件组中允许包含以下内容：

1、label ：标签文本

2、input ：表单控件元素 (class="form-control")

3、提示文本：可选的，提示的内容(class="help-block")

1、表单分类

1、默认表单 (基本表单)

效果：label，控件，提示的文本，全部都是纵向排列

ex:

<form>

<span class="help-block">提示的文本</span>

</div>

</form>

2、内联表单

.sr-only :

Screen Reader Only

3、水平表单

水平表单 = 表单 + 栅格布局系统

栅格：

最外层：container / container-fluid

行：div.row

列：div.col-*-*

水平表单：

最外层：

.container / .container-fluid

或

行：

div.row 或 div.form-group

一个 .form-group 就是一行

列：

div.col-*-*

或

或

3、Bootstrap - 组件

1、什么是组件

由多个元素所组成的一个复杂的结构

2、组件 - 下拉菜单(Dropdown)

1、结构

将触发器和菜单包裹在一个 .dropdown 或 .dropup 或 position:relative 的元素中

1、外层元素

dropdown ,dropup,position:relative

2、内层元素

1、触发器

由<button> 和 <a> 来充当的

class="dropdown-toggle"

data-toggle="dropdown" : 切换菜单的显示和隐藏的

2、菜单

由 <ul> 或 <div> 来充当

class="dropdown-menu"

由列表作为菜单时，允许为列表项增加以下class来完成特殊效果:

li.divider : 分割线

li.disabled : 禁用菜单项

li.dropdown-header : 标题

3、组件 - 导航(nav)

1、所有的导航都依赖于 .nav

2、导航分类

1、标签页式导航

</li>

<li>

</li>

</ul>

2、胶囊式导航

同上 ...

</ul>

3、实现点击切换效果

4、组件 - 图标字体(glyphicon)

在页面中，显示为图标，但本质是文字。允许为图标设置字体，颜色，大小，阴影，粗斜体....

Web程序中常用的图标字体：

1、Glyphicons 收费

2、FontAwesome 675个免费

使用自定义的图标字体时，一定要先添加图标字体的设置，然后再使用图标字体，从而保证客户端也会有图标字体文件

***.css

@font-face{

font-family:"自定义名称";

src:url('图标字体文件的路径');

}

使用图标字体

选择器{

font-family:"自定义名称";

}

如何在网页中使用图标字体：

1、创建一个元素，必须保证为空

2、让元素的class="glyphicon glyphicon-*"

练习：

1、在页面中创建多个按钮，每个按钮上显示一个图标

首页(房子)，配置(齿轮)，刷新，定位，购物车，发邮件，照相机，播放相关(播放，暂停，上一曲，下一曲 ...)

1、简单组件

1、路径导航

<li>

</li>

<li>

</li>

<a></a>

</li>

</ul>

2、分页

1、默认分页

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

2、翻页效果

<li>

</li>

<li>

</li>

</ul>

3、标签

所有的标签都依赖于 .label

不同颜色的标签：

.label-default

.label-primary

.label-success

.label-danger

.label-info

.label-warning

4、徽章

.badge

5、巨幕

.jumbotron

6、页头

.page-header

7、水井

.well

8、进度条

外层：.progress

内层：

.progress-bar

配合不同颜色的类一起使用

.progress-bar-info

.progress-bar-success

.progress-bar-danger

.progress-bar-warning

附加带条纹的类

.progress-bar-striped

附加被激活的效果的类

.active

2、组件 - 按钮组

1、作用

将多个按钮放在一个组中(btn-group)

2、语法

1、基本按钮组

</div>

2、可以将多个按钮组合并进一个按钮工具栏

将多个 .btn-group 放在一个 .btn-toolbar的元素中

3、按钮组的尺寸

为.btn-group 增加 .btn-group-* 设置尺寸

.btn-group-lg : 超大号按钮组

.btn-group-sm : 小号按钮组

.btn-group-xs : 超小号按钮组

4、两端对齐的按钮组 ???

5、垂直显示的按钮组 ???

3、组件 - 警告框

所有的警告框都依赖于 .alert

不同颜色的警告框，增加以下类即可：

.alert-success

.alert-info

.alert-warning

.alert-danger

1、允许被关闭的警告框

1、警告框元素必须依赖 .alert-dismissible

2、触发器元素增加一个属性

data-dismiss="alert"

4、组件 - 缩略图(thumbnail)

1、注意

1、要配合着栅格布局系统一起使用

2、最好将图片设置为 img-responsive

2、语法

1、基本的缩略图

<img >

</a>

2、复杂的缩略图(图片，文字，按钮)

<img>

/*文字区域*/

<h3>缩略图标题</h3>

<p>

<a>

</p>

</div>

5、组件 - 媒体对象(media)

1、媒体对象列表

</li>

</ul>

6、组件 - 列表组(list-group)

ul : class="list-group"

li : class="list-group-item"

7、组件 - 面板

允许呈现出头部、主体、尾部的结构的组件

8、组件 - 导航条

1、基本导航条的实现

1、最外层由nav并且引用 navbar navbar-default 两个类选择器来组成的

2、nav中必须添加一个容器(container/container-fluid)

3、允许在容器中增加网站的品牌或标识内容

将 .navbar-header 的元素放在容器中即可

4、.navbar-header 中的链接/文字/图片要引用 .navbar-brand 的类选择器

2、导航条中的导航(链接列表)

导航条中的导航依赖于 .nav .navbar-nav 即可

3、导航条中的表单

导航条中的表不适用于bootstrap提供的表单类

需要为 navbar 中的 <form>增加 class :.navbar-form

注意：

navbar-form 默认是没有浮动的，需要自己手动指定浮动效果

通过 navbar-left / navbar-right 处理左或右浮动

4、导航条中的按钮

按钮需要增加 .navbar-btn 来处理按钮在导航条中的位置

5、导航条中的文本

文本需要增加 .navbar-text 来处理文本在导航条中的位置

6、导航条中的浮动方式

通过 navbar-left 实现元素左浮动

通过 navbar-right实现元素右浮动

7、实现导航条的固定

为导航条元素增加以下类，来实现固定效果

固定顶端：.navbar-fixed-top

固定底端：.navbar-fixed-bottom

注意：

9、JS 插件 - Plugins

插件 - 提供了一组操作的行为

每种行为基本上都有两种的调用方式：

1、data-*

ex:

data-toggle="dropdown"

data-toggle="tab"

data-dismiss="alert"

2、JS编程方式

通过代码来调用行为

$("选择器"):用于获取指定选择器所对应的元素

$("#nav") : 获取页面中ID为nav的元素

$(".container") : 获取页面中class为container的元素

</script>

10、JS插件 - 工具提示(tooltip)

为元素添加以下内容：

data-toggle="tooltip"/*定义鼠标移入的行为*/

title="提示的文本"

data-placement="top/left/right/bottom"

必须配合 JS 代码一起完成

$("选择器").tooltip();

11、JS插件 - 弹出框(popover)

为元素添加以下内容：

1、data-toggle="popover"

2、data-placement="top/right/bottom/left"

3、title="弹出框标题(可选)"

4、data-content="弹出框中的内容"

必须配合的JS代码

$("选择器").popover();

1、JS插件-标签页

标签页分为两个部分

1、导航部分(nav nav-tabs)

<li>

</li>

</ul>

li 的属性：data-toggle="tab"

a 的属性：href="#显示内容的ID"

2、内容部分

1、外层：<div class="tab-content">

2、在 tab-content中包含任意多的内容模块(class="tab-pane")

2、JS插件-模态对话框

模态框由两部分组成

1、触发器

可以由 a 或 button 来充当

1、<button>

data-toggle="modal"

data-target="#打开的模态框元素的ID"

2、<a>

data-toggle="modal"

href="#打开的模态框元素的ID"

2、模态框

共包含四层结构

1、第一层

作用：提供最基本的遮罩层

属性：

data-backdrop="static"

只能通过关闭按钮关闭对话框，其他方式无法关闭

2、第二层

作用：提供内容区域的尺寸，定位

3、第三层

作用：提供了内容区域的边框，背景，倒角，阴影

4、第四层

作用：定义内容部分了

<div class="modal-header"> : 模态框头部

关闭按钮：

<div class="modal-body">:模态框主体

<div class="modal-footer">:模态框脚注

3、JS插件-折叠插件(Collapse)

1、基本折叠效果

1、触发器元素

1、a 元素充当触发器

属性：

1、data-toggle="collapse"

2、href="#被折叠元素ID"

2、button 元素充当触发器

属性：

1、data-toggle="collapse"

2、data-target="#被折叠元素ID"

2、被折叠元素

属性：

1、class="collapse"

2、id="" ，提供给触发器使用

2、手风琴 - Accordion

3、响应式导航条

1、什么是响应式导航条

当屏幕尺寸>=768px时，可以正常显示所有的内容，当屏幕尺寸<=767时，导航条中只显示品牌和按钮(触发器)

2、结构

响应式导航条由两部分组成

1、.navbar-header

1、.navbar-brand

在任何情况下，都会显示的品牌标识

2、.navbar-toggle

折叠按钮

屏幕尺寸 >= 768时，不显示

屏幕尺寸 <= 767时，显示

2、.navbar-collapse

被折叠的内容

屏幕尺寸>=768时，正常显示

屏幕尺寸<=767时，隐藏,需要通过触发器展开

4、JS插件-图片轮播(Carousel)

1、基本轮播广告

<img >

</div>

<img >

</div>

<img >

</div>

2、指定轮播时间

3、带图片说明文本的轮播

<img>

<h4>说明文本标题</h4>

<p>说明文本的内容</p>

</div>

4、带方向按钮的轮播效果

</a>

</div>

5、带圆点导航的轮播效果

<li

data-slide-to="0"

data-target="#carousel的ID"

class="active"></li>

<li

data-slide-to="0"

data-target="#carousel的ID"></li>

<li

data-slide-to="0"

data-target="#carousel的ID"></li>

</ul>

</div>

============================================

Bootstrap 定制 & Less

1、样式语言的分类

1、静态样式语言：css

可以直接被浏览器解析处理；但CSS并不是合格的"编程语言"，它缺少编程语言中的最基本的要素：变量，运算符 .... 。静态语言的确定：可维护性差

2、动态样式语言

如：Less，Stylus，Sass/Scss ...

不能直接被浏览器运行；必须经过 "编译(Compile)"得到一个静态的样式语言(css),再交给浏览器处理运行

2、Less语言

官网：http://lesscss.org

中文：http://less.bootcss.com

Less是一个CSS预处理语言，必须要经过编译得到一个css文件，再交给浏览器去使用。

Less，扩充了CSS，在静态的语言上增加了一部分动态的内容。Less中是完全兼容和支持CSS的

在Web网页中使用Less的两种方式：

1、在客户端浏览器中编译Less - 不推荐

2、在服务器端编译Less - 推荐

1、编写 xxx.less

2、搭建Less编译器，将 xxx.less 翻译成 xxx.css

3、编写 xxx.html ，并且引入 xxx.css

3、搭建Less编译器

Less编译器是由JS编写的

1、安装独立的JS解释器 - NodeJS

命令行:Win + R , 输入 cmd 进入到命令行窗口

2、搭建 Less 编译器

将提供的 Less编译器.rar 解压即可

3、编写 Less文件

4、将 Less 转换为 CSS

1、在控制台中找到 lessc.cmd 文件的位置

2、输入：

lessc.cmd D:\1.less > D:\1.css

在控制台中，调用 lessc.cmd 程序，将 D:\1.less 文件编译成 D:\1.css 文件

5、在WebStorm中，配置FileWatchers(文件监视器)

由WS自动检测Less文件的编写与更改，自动编译得到css

Ws --> File --> Settings --> Tools --> FileWatchers --> 添加选择Less --> 指定 lessc.cmd 的文件路径即可

重启 WebStorm

4、Less语法

1、Less 完全支持 CSS语法

2、Less 中支持的注释有单行注释和多行注释

多行注释：/* */

单行注释：//

注意：只有多行注释会被编译到 css 中

3、Less 中支持变量(Variable)

变量：在Less中表示的是一个可以变化的数据,并且该数据可以被其他位置进行引用

语法：

@变量名:值;

ex:

1、@jd-color:#e4393c;

2、@border-width:3px;

3、@base-font:"微软雅黑";

4、@border:1px solid @jd-color;

变量的使用：

选择器{

属性名:@变量名;

}

4、Less 中允许使用运算符

+,-,*,/

border-width:3px + 3px;

border-color:#e4393c*1.5;

color:#e4393c/2;

5、Less 中支持在一组样式中混入(Mixin) 另一组样式

选择器1{ ... }

选择器2{

... ...

选择器1;

... ...

}

最终：选择器2中会包含选择器1中定义好的样式

带参数的混合：

在声明选择器的时候，允许使用"参数"来表示暂时不确定的数据，在最终混入的时候，将确定的数据传递进来

语法：

声明：

选择器1(@参数名){

属性名:@参数名;

}

.border(@color){

border:1px solid @color;

}

使用：

选择器2{

... ...

选择器1(值);

}

#top{

.border(#e4393c);

}

background:linear-gradient(to bottom);

1、Less 语法

1、变量

@变量名:值;

2、运算符

+，-，*，/

3、混合

.border{ border:1px solid #ddd ; }

#main{

.border;

}

带参数的混合

.border(@color){

border-color:@color;

}

#main{

.border(#ddd);

}

#top{

.border(#000);

}

====================================

1、Less 语法

1、嵌套

允许在一个选择器中嵌入声明另一个选择器，以便完成后代或子代结构的选择器声明

选择器1{

... ...

选择器2{

... ...

}

>选择器3{

... ...

}

ex:

#top{

color:red;

border-color:#e4393c;

div.topic{

height:30px;

line-height:1;

span.border{

}

>a:hover{

text-decoration:none;

}

#top{

color:red;

border-color:#e4393c;

}

#top div.topic{

height:30px;

line-height:1;

}

#top > a:hover{

text-decoration:none;

}

2、函数

函数：在Less中表示的是一段独立的功能

1、lighten()

颜色减淡函数

ex:

color:lighten(#e4393c,30%);

2、darken()

颜色加深函数

ex:

color:darken(#e4393c,50%);

3、img-width("URL")

计算指定图像的真实宽度

4、img-height("URL")

计算指定图像的真实高度

5、ceil(number)

向上取整，得到的是比number大的最小整数

ex:

ceil(58.5); 结果为：59

6、floor(number)

向下取整，得到的是比number小的最大整数

ex:

floor(58.5);结果为：58

3、文件导入

允许将其他的Less文件导入到当前的Less文件中

语法：

@import "xxxx.less";

2、Bootstrap定制

按自己的需求修改bootstrap的源码，以便达成要的效果

Bootstrap的源码结构：

1、Core variables and mixins

整个Bootstrap中要用到的所有的变量的声明和混合

2、Reset and dependencies

重写以及依赖的文件

3、Core CSS

核心的CSS内容 - 全局CSS样式声明

4、Components

所有的组件 less

一个组件针对一个 less 文件

5、Components & javascript

插件

6、Utility Classes

工具类

06-BOOTSTRAP

（本文所有权归作者所有，如需转载请联系本平台。）

知道你会来

所以我一直在这里等

以上是关于06-BOOTSTRAP的主要内容，如果未能解决你的问题，请参考以下文章