>

美洲杯在线投注_2019美洲杯外围投注[投注官网]

热门关键词: 美洲杯在线投注,2019美洲杯外围投注[投注官网]

《深入理解bootstrap》读书笔记:第4章 CSS组件(上

- 编辑:美洲杯在线投注 -

《深入理解bootstrap》读书笔记:第4章 CSS组件(上

bootstrap三大核心之二。

《深入理解bootstrap》读书笔记:第4章 CSS组件(上),css组件

bootstrap三大核心之二。

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

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

一. 图标字体

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

arial-hidden="true"

.sr-only(只读)

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

1. 引入方法:

篮球世界杯在线投注 1  

1 <i class="glyphicon glyphicon-search"></i>

篮球世界杯在线投注 2

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

arial-hidden="true"

2. 实现机制:

.sr-only(只读)

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

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

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

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

1. 引入方法:

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

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

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

 

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

篮球世界杯在线投注 3

3.应用

在button上应用字体图标:

1 <button class="btn btn-default glyphicon glyphicon-log-in"> login</button>

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

篮球世界杯在线投注 4

还有一种推荐的方式:

1 2 3 4 <button class="btn btn-default">                 <span class="glyphicon glyphicon-log-in"></span>                 login </button>

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

再有如:

1 2 3 4 <button class="btn btn-danger">                 <span class="glyphicon glyphicon-log-out"></span>                 logout            </button>

篮球世界杯在线投注 5

再看copyright图标——篮球世界杯在线投注 6

1 <span class="glyphicon glyphicon-copyright-mark">

 

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

 

<i class="glyphicon glyphicon-search"></i>

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

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

1. 基本用法

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

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

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

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

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

篮球世界杯在线投注 7

 

 

1 2 3 4 5 6 7 8 9 10 11 12 <div class="dropdown">                 <button type="button" class="btn btn-default" data-toggle="dropdown">                     纵贯线                     <span class="caret"></span>                 </button>                 <ul class="dropdown-menu">                    <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>

效果马上就有了:

篮球世界杯在线投注 8

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

对齐——用在ul上

默认是左对齐。

dropdown-menu-left|right

2. 实现机制:

(1)标题

1 <li class="dropdown-header"></li>

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

篮球世界杯在线投注 9

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

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

(2)分割线

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

1 <li class="divider"></li>

篮球世界杯在线投注 10

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

(3)禁用

1 <li class="disabled"></li>

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

结果是禁止点击状态:

篮球世界杯在线投注 11

 

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

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

【例4.1】

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 <div class="row">     <div class="dropdown col-sm-4">          <button type="button" class="btn btn-default" data-toggle="dropdown">              纵贯线              <span class="caret"></span>          </button>          <ul class="dropdown-menu">             <li class="dropdown-header"><a href="javascript:;">周华健</a></li>             <li><a href="javascript:;">怕黑</a></li>             <li><a href="javascript:;">雨人</a></li>             <li class="divider"></li>             <li class="dropdown-header"><a href="javascript:;">李宗盛</a></li>             <li><a href="javascript:;">凡人歌</a></li>             <li><a href="javascript:;">寂寞难耐</a></li>             <li class="divider"></li>             <li class="dropdown-header"><a href="javascript:;">罗大佑</a></li>             <li><a href="javascript:;">恋曲1980</a></li>             <li><a href="javascript:;">爱人同志</a></li>             <li class="divider"></li>             <li class="dropdown-header"><a href="javascript:;">张震岳</a></li>             <li class="disabled"><a href="javascript:;">一起哈啤</a></li>             <li><a href="javascript:;">公路</a></li>         </ul>     </div>       <div class="col-sm-4">      <div class="row">          <div class="col-sm-9">             <form class="navbar=form">                 <input type="text" class="form-control" placeholder="输入姓名">             </form>          </div>         <div class="col-sm-3">              <button type="button" class="btn btn-default btn-block btn-primary">登录</button>         </div>         </div>     </div> </div>

篮球世界杯在线投注 12

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

通过jquery实现:

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

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

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

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

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

1.基本用法

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

1 2 3 4 5 <div class="btn-group">     <button class="btn btn-primary">Login</button>     <button class="btn btn-default">Register</button>     <button class="btn btn-danger">Reset</button> </div>

篮球世界杯在线投注 13

很有一种手机的感觉。

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

篮球世界杯在线投注 14

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

3.工具栏:

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

1 2 3 4 5 6 7 8 9 10 11 12 <div class="toolbar">     <div class="btn-group btn-group-xs">         <button class="btn btn-primary">Login</button>         <button class="btn btn-default">Register</button>         <button class="btn btn-danger">Reset</button>     </div>     <div class="btn-group btn-group-xs">         <button class="btn btn-primary">Login</button>         <button class="btn btn-default">Register</button>         <button class="btn btn-danger">Reset</button>     </div> </div>

篮球世界杯在线投注 15

说白了就是打横来。

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <div class="btn-group btn-group-xs">     <button class="btn btn-primary">Login</button>     <button class="btn btn-default">Register</button>     <button class="btn btn-danger">Reset</button>     <div class="dropdown btn-group btn-group-xs">         <button type="button" class="btn btn-default btn-group-xs" data-toggle="dropdown">             纵贯线             <span class="caret"></span>         </button>         <ul class="dropdown-menu">            <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> </div>

篮球世界杯在线投注 16

 

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

4.垂直分组btn-group-vertical

对button外包的div使用。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <div class="btn-group btn-group-xs btn-group-vertical">     <button class="btn btn-primary">Login</button>     <button class="btn btn-default">Register</button>     <button class="btn btn-danger">Reset</button>     <div class="dropdown btn-group btn-group-xs">         <button type="button" class="btn btn-default btn-group-xs" data-toggle="dropdown">             纵贯线             <span class="caret"></span>         </button>         <ul class="dropdown-menu">            <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> </div>

 

篮球世界杯在线投注 17

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

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

5. 自适应的分组按钮:btn-group-justify

让按钮的宽度自适应——注意此功能仅限于a标记类型的btn!

1 2 3 4 5 6 <div class="btn-group btn-group-justified" style="width:600px;height:100px">             <a class="btn btn-primary">Login</a>             <a class="btn btn-default">Register</a>             <a class="btn btn-danger">Reset</a>                       </div>

篮球世界杯在线投注 18

3.应用

四. 按钮式的下拉菜单(胶囊式的按钮)

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

篮球世界杯在线投注 19

在button上应用字体图标:

1.基本实现思路

一个按钮组,实际包括两个按钮。一个是内容,一个显示三角符号(class="caret")。就像下面一样:

1 2 3 4 5 6 <div class="btn-group ">     <button class="btn btn-deafault">Search</button>     <button class="btn btn-success">         <span class="caret"></span>     </button> </div>

篮球世界杯在线投注 20

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

 

篮球世界杯在线投注 21

1 2 3 4 5 6 7 8 9 10 11 <div class="btn-group">     <button type="button" class="btn btn-deafault">Search</button>     <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">         <span class="caret"></span>     </button>     <ul class="dropdown-menu">         <li><a href="javascript:;">link1</a></li>         <li><a href="javascript:;">link2</a></li>         <li><a href="javascript:;">link3</a></li>     </ul> </div>

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

 

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

<button class="btn btn-default glyphicon glyphicon-log-in"> login</button>

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

用于单行文本输入框和其它小的组件(比如说span)进行排列。只支持文本输入框<input type="text">。

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

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

 

1 2 3 4 <div class="input-group">             <span class="input-group-addon">Email</span>             <input type="email" class="form-control" placeholder="Enter your Email"> </div>

篮球世界杯在线投注 22

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

看上去好神奇的样子,那能为span加诸如<span class="input-grpup-addon"><i class="glyphicon glyphicon-search"></i></span>的图标字体吗?——抱然而真的不能用。

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

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

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

1 2 3 4 5 <div class="input-group">     <span class="input-group-addon">Email</span>     <input type="email" class="form-control" placeholder="Enter your Email">     <span class="input-group-btn"><button class="btn">GO</button></span> </div>

篮球世界杯在线投注 23

注意:

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

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

篮球世界杯在线投注 24

【例4.2】

在上面代码的基础上,当输入正确邮箱时(if(this.value!="" && !( this.value!="" && !/[[email protected]](http://www.bkjia.com/cdn-cgi/l/email-protection) \.[a-zA-Z]{2,4}$/.test(this.value) ))),按钮变为可用(移除.disabled),点击可以为此地址法邮件(通常用于提交验证邮件)。用脚本实现之。

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

 

1 2 3 4 5 6 7 8 9 10 11 12 13 $(function(){     $('.form-control:input').keyup(function(){         if(this.value!="" && !( this.value!="" && !/[email protected] .[a-zA-Z]{2,4}$/.test(this.value) )){             $('button').removeClass().addClass('btn btn-success');             var address=this.value;             $('button').click(function(){                 location.href='mailto:' address;             })         }else{             $('button').html('GO').removeClass().addClass('btn btn-warning').addClass('disabled');         }     }) })

篮球世界杯在线投注 25

 

还有一种推荐的方式:

3.与其它组件结合

<button class="btn btn-default">

 login
</button>

(1)下拉菜单结合addon

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

1 2 3 4 5 6 7 8 9 10 11 12 <div class="input-group">     <input type="email" class="form-control" placeholder="Enter your Email">     <div class="input-group-btn"><button class="btn" data-toggle="dropdown">GO     <span class="caret"></span>     </button>     <ul class="dropdown-menu">         <li>1</li>         <li>2</li>         <li>3</li>     </ul>     </div> </div>

 

篮球世界杯在线投注 26  

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

(2)分裂式按钮

在input-group-btn下,组合的按钮也是可以分裂式的。无需再给父级容器加btn-group。同时应该注意到,不同点在于按钮的圆角被去掉了。

篮球世界杯在线投注 27

 

再有如:

六. 导航(基本)

导航是所有组件的重点。对于导航有套用的预置类.nav,但是它并不生产直观样式,只是各种导航实现的前提条件。导航的结构和正常差不多,本质是通过ul-li体系实现。组件的动效依赖jquery。

 

选项卡:<ul class="nav nav-tabs"><li role="presentation" class="active"></li></ul>

胶囊式导航:<ul class="nav nav-pills">

堆叠式导航(垂直标签页):<ul class="nav nav-pills nav-stacked">

自适应导航(两端对齐):<ul class="nav nav-tabs nav-justified">

<button class="btn btn-danger">

 logout

1.选项卡—— .nav-tabs

实现方式:

  1. <div>
  2. <ulclass="nav nav-tabs">
  3. <li><ahref="#">Home</a></li>
  4. <li><ahref="#">Pofile</a></li>
  5. <liclass="active"><ahref="#">Message</a></li>
  6. </ul>
  7. </div>

样式如下,配合.active来使用message当前处于激活状态。 篮球世界杯在线投注 28    

篮球世界杯在线投注 29

2.胶囊式导航——nav-pills

很生动形象的词。上面代码中,把ul的class改为nav-pills就可以实现了。

篮球世界杯在线投注 30

 

再看copyright图标——篮球世界杯在线投注 31

3.垂直标签——nav-stacked

同样也是应用在ul上。但注意,.active样式在此不生效,图中只是悬停的效果。

篮球世界杯在线投注 32

 

<span class="glyphicon glyphicon-copyright-mark"> 

4.两端对齐

整个nav占据了屏幕的一行,同时自动分配宽度。当屏幕较小时,自动垂直排列。同样,途中的阴影只是鼠标悬停的效果,

篮球世界杯在线投注 33

 

 

 

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

5. 初步小结:

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

(1)以上四类可以混搭使用。要想使用.active类样式,可以在tab/pills的框架下使用。

比如class="nav nav-pills nav-justified"

  1. 基本用法

【例4.3】拼凑一个二级导航:

任务描述:在一个胶囊内拼凑一个耳机导航,实现下拉菜单功能:

根据框架可以写出下列代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <div>     <h2>这是胶囊式导航 <small>class="nav nav-pills"</small></h2>     <ul class="nav nav-pills">         <li><a data-toggle="tab" href="#">Home</a></li>         <li><a data-toggle="tab" href="#">Pofile</a></li>         <li class="active dropdown">             <a data-toggle="tab" href="#">                 Message                 <span class="caret"></span>             </a>             <ul class="dropdown-menu">                 <li><a href="#">link1</a></li>                 <li><a href="#">link2</a></li>                 <li><a href="#">link3</a></li>             </ul>         </li>     </ul> </div>

 

但还是发现,第7行的data-toggle已经有了一个"tab",再添加“dropdown”导致双方都不生效。尝试使用分段式按钮,但是发现按钮的表现和胶囊按钮的区别还是有的。所以二者只能取一。至于active类,以后可以用js实现。

 

所以最终代码是:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <div>     <h2>这是胶囊式导航 <small>class="nav nav-pills"</small></h2>     <ul class="nav nav-pills">         <li><a  href="#">Home</a></li>         <li><a  href="#">Pofile</a></li>         <li class="dropdown btn-group">             <a data-toggle="dropdown" href="#">                 Message                 <span class="caret"></span>             </a>             <ul class="dropdown-menu">                 <li><a href="#">link1</a></li>                 <li><a href="#">link2</a></li>                 <li><a href="#">link3</a></li>             </ul>         </li>     </ul> </div>

 

 

 进一步思考:在此基础上做出三级菜单。三级菜单需要.dropdown-submenu实现,但是bootstrap3已经删除了相关类。这时需要在css中引入旧版中.dropdown-submenu的样式:

 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 .dropdown-submenu {     positionrelative; } .dropdown-submenu > .dropdown-menu {     top0;     left100%;     margin-top-6px;     margin-left-1px;     -webkit-border-radius: 0 6px 6px 6px;     -moz-border-radius: 0 6px 6px;     border-radius: 0 6px 6px 6px; } .dropdown-submenu:hover > .dropdown-menu {     displayblock; } .dropdown-submenu > a:after {     displayblock;     content" ";     floatright;     width0;     height0;     border-colortransparent;     border-stylesolid;     border-width5px 0 5px 5px;     border-left-color#ccc;     margin-top5px;     margin-right-10px; } .dropdown-submenu:hover > a:after {     border-left-color#fff; } .dropdown-submenu.pull-left {     floatnone; } .dropdown-submenu.pull-left > .dropdown-menu {     left-100%;     margin-left10px;     -webkit-border-radius: 6px 0 6px 6px;     -moz-border-radius: 6px 0 6px 6px;     border-radius: 6px 0 6px 6px; }

篮球世界杯在线投注, 

结构实现:(关键语句在第17行)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 <div>     <h2>这是胶囊式导航 <small>class="nav nav-pills"</small></h2>     <ul class="nav nav-pills">         <li><a  href="#">Home</a></li>         <li><a  href="#">Pofile</a></li>         <li class="dropdown btn-group">             <a data-toggle="dropdown" href="#">                 Message                 <span class="caret"></span>             </a>             <ul class="dropdown-menu">                 <li><a href="#">link1</a></li>                 <li><a href="#">link2</a></li>                                   <li class="divider"></li>                   <li class="dropdown-submenu">                     <a tabindex="-1" href="javascript:;">link4</a>                     <ul class="dropdown-menu">                         <li><a tabindex="-1" href="javascript:;">link4-1</a></li>                         <li class="divider"></li>                         <li class="dropdown-submenu">                             <a href="javascript:;">link4-2</a>                             <ul class="dropdown-menu">                                 <li><a href="javascript:;">link4-2-1</a></li>                             </ul>                         </li>                     </ul>                 </li>                   </ul>         </li>     </ul> </div>

 

效果:

篮球世界杯在线投注 34

 

 

(2)借助js插件实现真正的,但只是初步的导航交互——

在ul-li-a体系下,给a标签加上属性:data-toggle="tab"——注意堆叠导航和自适应导航无效(还是本来的效果)

篮球世界杯在线投注 35

(3)禁止点击——还是disabled类

注意,禁止点击disabled类只是一个效果,而不能阻止点击事件的触发。需要在js中重新定义。

 

 

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

七. 导航条(navbar)

导航条的特性在于:比导航多了一个“条”。相对于导航多了一块背景——

 

篮球世界杯在线投注 36

      以下是根据基本结构做出来的导航条效果

1 2 3 4 5 6 7 8 9 10 11 12 13 <div>     <h2>这是基本导航条 <small> .navbar-fixed-top可以固定在上方</small></h2>     <nav class="navbar navbar-default" role="navigation">         <div class="navbar-header">         <a class="navbar-brand" href="#">Brand</a>         <ul class="nav navbar-nav">             <li class="disabled"><a href="#">disabled</a></li>             <li><a href="#">normal</a></li>             <li class="active"><a data-toggle="tab" href="#">Message</a></li>         </ul>         </div>     </nav> </div>

篮球世界杯在线投注 37

 如果我们给nav标签加上.navbar-fixed-top,可以固定到最上面。但是这样做本质是定位,会覆盖掉原本处于顶端的内容。 篮球世界杯在线投注 38   官方建议:原本顶部内容,或者body的padding-top设为70px。如果是顶部内容是header,偏移30px就够了。

 

nav-header不一定是必要的

nav-brand用于放置网站品牌,换行不会被消失

导航条的颜色由两个类决定:(1).navbar-dfault;(2).navbar-inverse:控制反色。比如加了.navbar-inverse后:

篮球世界杯在线投注 39

 

 

 

 

下拉二级菜单的实现:只要对li应用dropdown体系就可以实现:

1 2 3 4 5 6 7 8 9 10 11 12 <li class="dropdown">     <a href="#" data-toggle="dropdown">         <span class="glyphicon glyphicon-music"></span>         Music         <span class="caret"></span>     </a>     <ul class="dropdown-menu">         <li><a href="#">link1</a></li>         <li><a href="#">link2</a></li>         <li><a href="#">link3</a></li>     </ul> </li>

篮球世界杯在线投注 40

 

 

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

1. 导航条表单

最常用的就是网易登陆框,附在导航条上面。

——<from class="navbar-form" role="reseach">

(1)逻辑上表单也是ul-li的一部分,所以表单放在li里面。但是注入输入框之类的控件在小屏幕中会自动填充100%的宽度,所以要给li加上container-fluid类(注意container类不行)

(2)接下来是按钮,还记得input-group-btn否?按钮应该是和输入框挤在一块的。

1 2 3 4 5 6 7 8 9 <li class="container-fluid">     <form class="navbar-form input-group">         <input class="form-control" type="search" placeholder="Search">         <span class="input-group-btn"><button type="submit" class="btn btn-default">             <span class="glyphicon glyphicon-search"></span>         </button></span>     </form>       </li>

篮球世界杯在线投注 41

 

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

2.基本导航元素

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

(1)导航条按钮

——<button class="btn btn-default navbar-btn">

多了一个样式叫navbar-btn

按钮也是ul-li体系的一部分,所以也要放到一个li中,比如说,做一个ul class="navbar-right",下面放一个li的建议按钮——

1 2 3 4 5 <ul class="nav navbar-nav navbar-right">     <li class="container-fluid">         <button class="btn btn-info navbar-btn">Suggest</button>     </li> </ul>

篮球世界杯在线投注 42

   

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

(2)导航条文本

——<p class="navbar-text">

主要是宽高符合导航条。比如说在之前的表单前面在新建一个li,输入<p class="navbar-text">Search</p>

就表现出和其它菜单一样的样式。

篮球世界杯在线投注 43

还是不理想,如果search是和导航是一个紧贴着,应该用addon加上去!

篮球世界杯在线投注 44

 相对好点)  

篮球世界杯在线投注 45

(3)非导航连接

——<a href="#" class="navbar-link">

表现和导航条文本差不多。

<div class="dropdown">
 <button type="button" class="btn btn-default" data-toggle="dropdown">
 纵贯线

 </button>
 <ul class="dropdown-menu">
 <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>

3.位置——做的是固定定位

排列

.navbar-left/right

固定

.navbar-fixed-top/bottom

(注意body的padding)

效果马上就有了:

4.自适应导航条

实现一个在小屏幕手机常见的菜单按钮是在一个button中放三个<span class="navbar-icon">(“三道杠”)。然后设置较小的时候出现。——button class="navbar-toggle"

 

1 2 3 4 5 <button class="navbar-toggle">     <span class="icon-bar"></span>     <span class="icon-bar"></span>     <span class="icon-bar"></span> </button>

进一步编写可收缩的菜单html,需要对ul外包一个div,并对其应用.collapase .navbar-collapase

1 2 3 4 5 6 7 8 9 10 11 12 13 <div class="collapse navbar-collapse">                         <!-- 用于导航条的展开面板 -->                         <ul class="nav navbar-nav">                             <li><a href="#">                                 <span class="glyphicon glyphicon-home"></span>                                 Home                             </a></li>                             <li><a href="#">                                 <span class="glyphicon glyphicon-music"></span>                                 Music                             </a></li>                         </ul>                     </div>

这样home和music都会在屏幕缩小时收缩。然而点击三道杠,不弹出菜单,点击时需要插件,而插件由打扰开头,所以button按钮需要有data-toggle="collapse"和data-target="展开的菜单"。展开的菜单是个选择器,给ul父级命名id="#divNav",可以直接应用

data-target="#divNav"。

篮球世界杯在线投注 46

     

全部代码如下:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <nav class="navbar navbar-default navbar-fixed-top" role="navigation">         <div class="container-fluid">             <div class="navbar-header">                 <a class="navbar-brand" href="#">Brand</a>                 <button class="navbar-toggle" data-toggle="collapse" data-target="#divNav">                     <span class="icon-bar"></span>                     <span class="icon-bar"></span>                     <span class="icon-bar"></span>                 </button>             </div>             <div class="collapse navbar-collapse" id="divNav">                 <!-- 用于导航条的展开面板 -->                 <ul class="nav navbar-nav">                     <li><a href="#">                         <span class="glyphicon glyphicon-home"></span>                         Home                     </a></li>                     <li><a href="#">                         <span class="glyphicon glyphicon-music"></span>                         Music                     </a></li>                 </ul>             </div>                   </div>           </nav>

如果希望菜单偏移到右边,可以对ul使用navbar-right

 

篮球世界杯在线投注 47

八. 面包屑导航

breadcrumb——很形象的名字,一路撒面包,只能从面包原路返回。只是一个层级的路径关系,不能说是一个标准的导航

1 2 3 4 5 6 <ol class="breadcrumb">     <li><a href="#">level1</a></li>     <li><a href="#">level2</a></li>     <li><a href="#">level3</a></li>     <li class="active">>level4</li> </ol>

篮球世界杯在线投注 48

 

 

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

九.  分页导航

当商品较多时,索引容纳不下,需要用分类导航。 <ul class="pager">   /   <ul class="pagination"> <li class="previous"> <li class="next">

1 2 3 4 5 6 7 8 9 <nav>     <ul class="pagination">         <li class="previous"><a href="#">last</a></li>         <li><a href="url?id=1">1</a></li>         <li class="active"><a href="url?id=2">2</a></li>         <li><a href="url?id=3">3</a></li>         <li class="next"><a href="#">next</a></li>     </ul> </nav>

篮球世界杯在线投注 49

 

来自为知笔记(Wiz)

http://www.bkjia.com/Javascript/1165280.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/1165280.htmlTechArticle《深入理解bootstrap》读书笔记:第4章 CSS组件(上),css组件 bootstrap三大核心之二。 包括glyphicon图标,下拉菜单(dropdown),按钮组 (bu...

对齐——用在ul上

默认是左对齐。

dropdown-menu-left|right

(1)标题

<li class="dropdown-header"></li>

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

篮球世界杯在线投注 50

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

(2)分割线

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

<li class="divider"></li>

篮球世界杯在线投注 51

(3)禁用

<li class="disabled"></li>

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

结果是禁止点击状态:

篮球世界杯在线投注 52

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

【例4.1】

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

<div class="row">
 <div class="dropdown col-sm-4">
 <button type="button" class="btn btn-default" data-toggle="dropdown">
 纵贯线

 </button>
 <ul class="dropdown-menu">
 <li class="dropdown-header"><a href="javascript:;">周华健</a></li>
 <li><a href="javascript:;">怕黑</a></li>
 <li><a href="javascript:;">雨人</a></li>
 <li class="divider"></li>
 <li class="dropdown-header"><a href="javascript:;">李宗盛</a></li>
 <li><a href="javascript:;">凡人歌</a></li>
 <li><a href="javascript:;">寂寞难耐</a></li>
 <li class="divider"></li>
 <li class="dropdown-header"><a href="javascript:;">罗大佑</a></li>
 <li><a href="javascript:;">恋曲1980</a></li>
 <li><a href="javascript:;">爱人同志</a></li>
 <li class="divider"></li>
 <li class="dropdown-header"><a href="javascript:;">张震岳</a></li>
 <li class="disabled"><a href="javascript:;">一起哈啤</a></li>
 <li><a href="javascript:;">公路</a></li>
 </ul>
 </div>

 <div class="col-sm-4">
 <div class="row">
 <div class="col-sm-9">
 <form class="navbar=form">
 <input type="text" class="form-control" placeholder="输入姓名">
 </form>
 </div>
 <div class="col-sm-3">
 <button type="button" class="btn btn-default btn-block btn-primary">登录</button>
 </div>
 </div>
 </div>
</div>

篮球世界杯在线投注 53

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

通过jquery实现:

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

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

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

1.基本用法

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

<div class="btn-group">
 <button class="btn btn-primary">Login</button>
 <button class="btn btn-default">Register</button>
 <button class="btn btn-danger">Reset</button>
</div>

很有一种手机的感觉。

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

篮球世界杯在线投注 54

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

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

<div class="toolbar">
 <div class="btn-group btn-group-xs">
 <button class="btn btn-primary">Login</button>
 <button class="btn btn-default">Register</button>
 <button class="btn btn-danger">Reset</button>
 </div>
 <div class="btn-group btn-group-xs">
 <button class="btn btn-primary">Login</button>
 <button class="btn btn-default">Register</button>
 <button class="btn btn-danger">Reset</button>
 </div>
</div>

篮球世界杯在线投注 55

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

<div class="btn-group btn-group-xs">
 <button class="btn btn-primary">Login</button>
 <button class="btn btn-default">Register</button>
 <button class="btn btn-danger">Reset</button>
 <div class="dropdown btn-group btn-group-xs">
 <button type="button" class="btn btn-default btn-group-xs" data-toggle="dropdown">
 纵贯线

 </button>
 <ul class="dropdown-menu">
 <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>
</div>

篮球世界杯在线投注 56

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

<div class="btn-group btn-group-xs btn-group-vertical">
 <button class="btn btn-primary">Login</button>
 <button class="btn btn-default">Register</button>
 <button class="btn btn-danger">Reset</button>
 <div class="dropdown btn-group btn-group-xs">
 <button type="button" class="btn btn-default btn-group-xs" data-toggle="dropdown">
 纵贯线

 </button>
 <ul class="dropdown-menu">
 <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>
</div>

篮球世界杯在线投注 57

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

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

  1. 自适应的分组按钮:btn-group-justify
    让按钮的宽度自适应——注意此功能仅限于a标记类型的btn!
<div class="btn-group btn-group-justified" style="width:600px;height:100px">
 <a class="btn btn-primary">Login</a>
 <a class="btn btn-default">Register</a>
 <a class="btn btn-danger">Reset</a>

 </div>

篮球世界杯在线投注 58

四. 按钮式的下拉菜单(胶囊式的按钮)

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

篮球世界杯在线投注 59

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

<div class="btn-group ">
 <button class="btn btn-deafault">Search</button>
 <button class="btn btn-success">

 </button>
</div>

篮球世界杯在线投注 60

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

篮球世界杯在线投注 61

<div class="btn-group">
 <button type="button" class="btn btn-deafault">Search</button>
 <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">

 </button>
 <ul class="dropdown-menu">
 <li><a href="javascript:;">link1</a></li>
 <li><a href="javascript:;">link2</a></li>
 <li><a href="javascript:;">link3</a></li>
 </ul>
</div>

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

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

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

用于单行文本输入框和其它小的组件(比如说span)进行排列。只支持文本输入框<input type="text">。

  1. input-group-addon——直接添加到span标签
<div class="input-group">
 Email
 <input type="email" class="form-control" placeholder="Enter your Email">
</div>

篮球世界杯在线投注 62

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

看上去好神奇的样子,那能为span加诸如<span><i></i></span>的图标字体吗?——抱然而真的不能用。

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

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

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

<div class="input-group">
 Email
 <input type="email" class="form-control" placeholder="Enter your Email">
 <button class="btn">GO</button>
</div>

篮球世界杯在线投注 63

注意:

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

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

【例4.2】
在上面代码的基础上,当输入正确邮箱时(if(this.value!="" && !( this.value!="" && !/. @. .[a-zA-Z]{2,4}$/.test(this.value) ))),按钮变为可用(移除.disabled),点击可以为此地址法邮件(通常用于提交验证邮件)。用脚本实现之。

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

$(function(){
 $('.form-control:input').keyup(function(){
 if(this.value!="" && !( this.value!="" && !/. @. .[a-zA-Z]{2,4}$/.test(this.value) )){
 $('button').removeClass().addClass('btn btn-success');
 var address=this.value;
 $('button').click(function(){
 location.href='mailto:' address;
 })
 }else{
 $('button').html('GO').removeClass().addClass('btn btn-warning').addClass('disabled');
 }
 })
})

篮球世界杯在线投注 64

3.与其它组件结合

本文由计算机教程发布,转载请注明来源:《深入理解bootstrap》读书笔记:第4章 CSS组件(上