bootstrap读书笔记之CSS组件(上)

bootstrap三大核心之二。

包括glyphicon图标,下拉菜单(dropdown),按钮组(button group)....等等。一. 图标字体

bootstrap3提供了200多个免费图标字体。认为它是一个字。

arial-hidden="true"

.sr-only(只读)

1. 引入方法:

bootstrap读书笔记之CSS组件(上)


<i></i>

i标签是已经废弃了的html斜体标签。用span也可以。使用时必须基于glyphiconglyphicon-xxx两个类的样式。

2. 实现机制:

(1)雪碧技术:允许无损放大,减少图片大小,减少网页的请求次数。

把网页的背景图片整合到一张图片中,利用背景定位显示出来。

定位的是做上点坐标,右边为x轴负方向,左边为y轴正方向。

 background:url(路径) no-repeat 0 0;

(2)@font-face,缓存自服务器,字体特性(如可设置颜色)。CSS3的在线字体引入写法是:

在CSS的最上面:导入第三方字体图标

@font-face{ font:字体名称;(自定义名称,避开网络安全字名) src:url(字体文件路径), url(字体文件路径), url(字体文件路径),…;}

@font-face至少.woff,.eot两种格式的字体。一般还要加上SVG字体。

3.应用

在button上应用字体图标:

<button> login</button>

这是在按钮上应用字体图标的案例。可以在login上面加一个空格。不然会和图标挤在一起。

bootstrap读书笔记之CSS组件(上)

还有一种推荐的方式:

<button> <span></span> login </button>

就是把span放到button里边。如果不想看到可以给span加上:sr-only(设备可读,用户看不到)。

再有如:

<button> <span></span> logout


再看copyright图标——

bootstrap读书笔记之CSS组件(上)

<span> 

注意字体图标的原则——让所有人能用——加上title属性

二. 下拉菜单dropdown(需要jq支持)

1. 基本用法

一个下拉菜单的基本实现是,一个按钮,一个隐藏的ul-li,一个响应才做图标。通过jquery的toggle操作显示隐藏。

在bootstrap中,结构也是一样,不同的是,只需要应用三个基本语句就可以实现。

class="dropdown"——包在最外层的div上,这是一个下拉菜单。

ulclass="dropdown-menu"——把ul隐藏起来。

光有ul隐藏还不够,button按钮绑定的行为应该是:data-toggle="dropdown"

bootstrap读书笔记之CSS组件(上)

<div> <button type="button" data-toggle="dropdown"> 纵贯线 <span></span> </button> <ul> <li><a href="javascript:;">周华健</a></li> <li><a href="javascript:;">李宗盛</a></li> <li><a href="javascript:;">罗大佑</a></li> <li><a href="javascript:;">张震岳</a></li> </ul> </div>

效果马上就有了:

bootstrap读书笔记之CSS组件(上)

如果我把div的class属性改为dropup,菜单就变成“上拉菜单”了

对齐——用在ul上

默认是左对齐。

dropdown-menu-left|right

(1)标题

<li></li>

比如给每个成员的li加上dropdown-header:同时还加上各自的作品

bootstrap读书笔记之CSS组件(上)


注意,dropdown-header一般不加a标记

(2)分割线

光是这样看很累,可以加上分割线来区分层级。

<li></li>

bootstrap读书笔记之CSS组件(上)


(3)禁用

<li></li>

不让用,比如我要禁点“一起哈啤”,就给他加上class="disabled"

结果是禁止点击状态:

bootstrap读书笔记之CSS组件(上)


通常应用不同的角色办理。

【例4.1】

现在有一个下拉菜单,一个文本输入框,样式如下:

<div> <div> <button type="button" data-toggle="dropdown"> 纵贯线 <span></span> </button> <ul> <li><a href="javascript:;">周华健</a></li> <li><a href="javascript:;">怕黑</a></li> <li><a href="javascript:;">雨人</a></li> <li></li> <li><a href="javascript:;">李宗盛</a></li> <li><a href="javascript:;">凡人歌</a></li> <li><a href="javascript:;">寂寞难耐</a></li> <li></li> <li><a href="javascript:;">罗大佑</a></li> <li><a href="javascript:;">恋曲1980</a></li> <li><a href="javascript:;">爱人同志</a></li> <li></li> <li><a href="javascript:;">张震岳</a></li> <li><a href="javascript:;">一起哈啤</a></li> <li><a href="javascript:;">公路</a></li> </ul> </div> <div> <div> <div> <form> <input type="text" placeholder="输入姓名"> </form> </div> <div> <button type="button">登录</button> </div> </div> </div> </div>


要求:输入“我是哈啤会员”,点击btn按钮登录后,菜单“一起哈啤”显示可用,否则为不可选状态。

通过jquery实现:

$(function(){ $('#login').click(function(){ if($('#inputName').val()=='我是哈啤会员'){ $("li:contains('一起哈啤')").removeClass('disabled'); } }) })

三. 多级嵌套——3.x版已经删除。(不看)

四. 按钮组——div

1.基本用法

对一系列按钮的容器套用btn——group

<div> <button>Login</button> <button>Register</button> <button>Reset</button> </div>

很有一种手机的感觉。

2.还可以批量修改尺寸:如果加上btn-group-lg/sm/xs等尺寸参数:比如这是使用btn-group-xs的效果。没有md(shi)


注意按钮组的大小设置优先级大于按钮(因为在源码中后定义。)

3.工具栏:
在以上代码的基础上,赋值一组,然后将2组包裹在一个div中,给此div加上class="btn-toolbar"

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzdxpd.html