专栏首页李才哥Bootstrap 响应式框架 第五集
原创

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 我们不一样

    因此,为了向处于美食诱惑之下的亲朋好友们解释软件相关工作的一般概念,这有一个比喻来帮助你。

    李才哥
  • Bootstrap 响应式框架 第四集

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

    李才哥
  • 精通 JavaScript 面试

    对大部分公司来说,招聘技术人员这种事情,管理层就应该放手交给技术团队,只有他们才能够准确地判断应聘者的技术实力。如果你恰巧是应聘者,你也是迟早都要去面试的。不管...

    李才哥
  • Bootstrap幻灯轮播如何支持触屏左右滑动手势?

      最近ytkah在学习用bootstrap搭建网站,Bootstrap能自适应pc端和手机端,并且移动设备优先,适合现如今移动营销。bootstrap是封装好...

    ytkah
  • 点击劫持(ClickJacking)漏洞挖掘及实战案例全汇总

    点击劫持(Click Jacking)是一种视觉上的欺骗手段,攻击者通过使用一个透明的iframe,覆盖在一个网页上,然后诱使用户在该页面上进行操作,通过调整i...

    Jayway
  • 软银数百亿美元投资WeWork?中国联合办公将重构估值体系

    10月10日,《华尔街日报》引述消息人士报道称,软银正在洽购共享办公巨头WeWork的大部分股权,这笔投资总额可能在150亿美元到200亿美元之间,如果该消息坐...

    罗超频道
  • 【爆笑】代码注释可以奇葩到什么程度?看完就知道

    老九君看到过很多有趣的代码注释,有的会让人无语至极,有的简直要笑掉大牙,有的甚至隐藏在源代码中。下面让我们一起见识一下这些“笑料”吧。 ? 可爱型的 ? ? 求...

    老九君
  • 使用Java生成带有下划线字体的文字

    ydymz
  • 人民日报推文:欢迎Google重返中国大陆,但必须遵守中国法律

    近日,谷歌将回归的消息充斥着各大媒体。尽管是否回归还是一个未知数,但是一切迹象表明,谷歌回归只是时间问题。

    大数据文摘

扫码关注云+社区

领取腾讯云代金券