Bootstrap 响应式框架 第五集

1、JS插件-标签页

标签页分为两个部分

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

<ul class="nav nav-tabs">

<li>

<a href="#"></a>

</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、第一层

<div class="modal" id="模态框ID">

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

属性：

data-backdrop="static"

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

2、第二层

<div class="modal-dialog">

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

3、第三层

<div class="modal-content">

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

4、第四层

作用：定义内容部分了

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

关闭按钮：

<button class="close" data-dismiss="modal">

<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-heade

1、.navbar-brand

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

2、.navbar-toggle

折叠按钮

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

屏幕尺寸 <= 767时，显示

2、.navbar-collapse

被折叠的内容

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

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

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

1、基本轮播广告

<div class="carousel slide" data-ride="carousel">

<!-- 图片轮播区域 -->

<div class="carousel-inner">

<!-- 轮播图片1 -->

<div class="item active">

<img src="">

</div>

<!-- 轮播图片2 -->

<div class="item">

<img src="">

</div>

<!-- 轮播图片3 -->

<div class="item">

<img src="">

</div>

</div>

</div>

2、指定轮播时间

<div class="carousel slide" data-ride="carousel" data-interval="2000">

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

<div class="item">

<img>

<div class="carousel-caption">

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

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

</div>

</div>

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

<div class="carousel slide">

<div class="carousel-inner"></div>

<!-- 方向按钮：左 -->

<a class="carousel-control left" data-slide="prev" href="#最外层元素ID">

<span class="glyphicon glyphicon-chevron-left"></span>

</a>

<!-- 方向按钮：右 -->

</div>

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

<div class="carousel slide">

<!-- 图片轮播区域 -->

<div class="carousel-inner">

<!-- 方向按钮：左 -->

<a href="">

<!-- 方向按钮：右-->

<a href="">

<!-- 导航圆点区域 -->

<ul class="carousel-indicators">

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