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);
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。