bootstrap读书笔记之CSS组件（上）

bootstrap三大核心之二。

包括glyphicon图标，下拉菜单（dropdown），按钮组（button group）....等等。一. 图标字体

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

arial-hidden="true"

.sr-only（只读）

1. 引入方法：

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

2. 实现机制：

（1）雪碧技术：允许无损放大，减少图片大小，减少网页的请求次数。

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

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

（2）@font-face，缓存自服务器，字体特性（如可设置颜色）。CSS3的在线字体引入写法是：

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

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

3.应用

在button上应用字体图标：

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

还有一种推荐的方式：

login

就是把span放到button里边。如果不想看到可以给span加上：sr-only（设备可读，用户看不到）。

再有如：

再看copyright图标——

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

二. 下拉菜单dropdown（需要jq支持）

1. 基本用法

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

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

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

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

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

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

对齐——用在ul上

默认是左对齐。

dropdown-menu-left|right

（1）标题

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

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

（2）分割线

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

（3）禁用

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

结果是禁止点击状态：

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

【例4.1】

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

<div class="col-sm-4">
<div class="row">
<div class="col-sm-9">
<form class="navbar=form">
<input type="text" class="form-control" placeholder="输入姓名">

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

通过jquery实现：

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

四. 按钮组——div class="btn-group"

1.基本用法

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

很有一种手机的感觉。

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

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

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

说白了就是打横来。 【应用】按钮组可以和下拉菜单配合使用。那看起来就像个导航了。

4.垂直分组btn-group-vertical 对button外包的div使用。

但是使用这种方式做的垂直导航不多。

但是使用这种方式做的垂直导航不多。

5. 自适应的分组按钮：btn-group-justify 让按钮的宽度自适应——注意此功能仅限于a标记类型的btn！

四. 按钮式的下拉菜单（胶囊式的按钮）

依赖js组件，而且一般用于实现是分裂式的。

1.基本实现思路 一个按钮组，实际包括两个按钮。一个是内容，一个显示三角符号（class="caret"）。就像下面一样：

接下来实现菜单点击按钮，出现一个ul-li序列。对绿色按钮做——data-toogle="dropdown"

按钮组控件本身也支持下拉菜单的触发，所以不需要class=dropdown了

同理，在button-group上加上dropup代表向上弹出。

五.输入框组——input-group系列

用于单行文本输入框和其它小的组件（比如说span）进行排列。只支持文本输入框

1. input-group-addon——直接添加到span标签

你也可以为span里面加单选框（radio）和复选框（checkbox），但是样式相当难看。

看上去好神奇的样子，那能为span加诸如的图标字体吗？——抱然而真的不能用。

2. input-group-btn——直接添加到span标签，但是里面包了一个按钮

为什么要额外设置多一个input-group-addon？

.btn的样式过于复杂了。为了避免冲突，需要额外指定一个类。

注意：

（1） input-group-btn不是直接用，button按钮上面，同时，button按钮至少要加个btn的class，三者是配合使用的。

（2）input输入框组支持定义大小——和btn-group一样，支持input-group-lg/sm/xs+默认 四个大小样式。

【例4.2】 在上面代码的基础上，当输入正确邮箱时

唯一需要注意的是，这里的button按钮应使用location.href作为跳转。

3.与其它组件结合

（1）下拉菜单结合addon

把上面的代码修改以下，直接给按钮加上一个data-toggle="dropdown"，然后把容器由span改成div。

在input-gro