Bootstrap学习笔记02

自用学习笔记

作者 _Nomo 日期 2016-04-06
前端技术 Bootstrap CSS
Bootstrap学习笔记02

本文续第一篇 Bootstrap学习笔记01
Bootstrap来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的工程师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。

全局CSS样式——表单

(1)默认表单

Bootstrap提供了三种形式的表单,默认表单如下图所示：

  • HTML5中强烈建议表单中要有 label 元素，除了人性化之外还充分为残障人士考虑。(可以使用.sr-only样式隐藏label元素显示)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<h3>默认表单</h3>
  <form>
    <div class="form-group">
      <label for="uname">用户名：</label>
      <input class="form-control" type="text" id="uname">
      <span class="help-block">用户名可以包含数字、字母或下划线</span>
    </div>
    <div class="form-group">
      <label for="upwd">密码：</label>
      <input class="form-control" type="text" id="upwd">
      <span class="help-block">密码长度在6~12位之间</span>
    </div>
    <div class="form-group">
      <div class="checkbox">
        <label>
          <input type="checkbox" >我同意本站的使用条款
        </label>
      </div>
    </div>
    <div class="form-group">
      <input class="btn btn-success" type="button" value="提交"/>
    </div>
  </form>

(2)行内表单

为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<h3>水平表单</h3>
  <form class="form-inline">
    <div class="form-group">
      <!--Srceen Reader Only-->
      <label class="sr-only" for="uname2">用户名：</label>
      <input class="form-control" placeholder="用户名..." type="text" id="uname2">
    </div>
    <div class="form-group">
      <label class="sr-only" for="upwd2">密码：</label>
      <input class="form-control" type="password" placeholder="密码..." type="text" id="upwd2">
    </div>
    <div class="form-group">
      <input class="btn btn-success" type="button" value="提交"/>
    </div>
  </form>

(3)水平表单

水平表单 = 表单 + 栅格系统
.form-horizontal <=> .container
.form-group <=> .row
.col-- <=> .col--
主要的难点就是要控制好栅格系统的嵌套。

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
<h3>水平表单=表单+栅格系统</h3>
  <form class="form-horizontal">  <!--.container-->
    <div class="form-group">  <!--.row-->
      <div class="col-xs-2">  <!--.col-*-*-->
        <label class="control-label" style="width: 100%" for="uname3">用户名：</label>
      </div>
      <div class="col-xs-6">
        <input class="form-control" type="text" id="uname3">
      </div>
      <div class="col-xs-4">
        <span class="help-block">用户名可以包含数字、字母或下划线</span>
      </div>
    </div>
    <div class="form-group">
      <div class="col-xs-2">
        <label class="control-label" for="upwd3" style="width: 100%;">密码：</label>
      </div>
      <div class="col-xs-6">
        <input class="form-control" type="text" id="upwd3">
      </div>
      <div class="col-xs-4">
        <span class="help-block">密码长度在6~12位之间</span>
      </div>
    </div>
    <div class="form-group">
      <div class="col-xs-offset-2 col-xs-10">
        <div class="checkbox">
          <label>
            <input type="checkbox" >我同意本站的使用条款
          </label>
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="col-xs-10 col-xs-offset-2">
        <input class="btn btn-success" type="button" value="提交"/>
      </div>
    </div>
  </form>

Bootstrap中的组件

组件——图标字体

图标字体：是一套字体，不表示文字，而表示图形符号——本质不是图片仍是文字，可以无限缩放、改变颜色。
Bootstrap提供了一套适用于Web开发的图标字体——Glyphicon Halflings字体。

1
2
3
4
5
6
7
<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

如何在页面中使用其他服务器字体：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
使用方法：
(1)准备好服务器端字体文件
(2)在CSS中定义服务器端字体名称
定义一个服务器端字体：
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
}
使用服务器端字体：
.glyphicon {
  font-family: 'Glyphicons Halflings';
 	}
(3)在HTML页面中使用GlyphiconHalflings字体
       字体图标的本质是字体，任何可以出现文字的地方都可以使用图标字体，如<p>...</p>、<button>....</button等。具体使用方法：
  <span class="glyphicon glyphicon-*"></span>
图标字体所在span必须是空的！

组件——按钮组

通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为。
水平按钮组： .btn-group
竖直按钮组： .btn-group-vertical
两端对齐的按钮组: .btn-group.btn-group-jusified

1
2
3
4
5
<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

组件——下拉菜单

下拉菜单必需三级结构：

1
2
3
4
<div class="dropdown">	  相对定位
    <a data-toggle="dropdown">触发元素</a>
    <div/ul class="dropdown-menu">隐藏元素</div/ul>
</div>

注意：data-toggle="dropdown"用于为触发元素绑定事件监听函数。

1
2
3
4
5
6
7
8
9
10
11
12
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

组件——导航(nav)

(1)标签页式导航
<ul class="nav nav-tabs"> 注意 .nav-tabs 类依赖 .nav 基类。

1
2
3
4
5
<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

(2)胶囊式导航
<ul class="nav nav-pills"> HTML 标记相同，但使用 .nav-pills 类。

1
2
3
4
5
<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

组件——响应式导航条

导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。
Bootstrap导航条自带的颜色有： .navbar-default 和 .navbar-inverse 两种。

1
2
3
4
5
6
7
8
9
10
11
<!--响应式导航条的最基本结构：-->
<div class="navbar navbar-两种颜色">
   <div class="container">
      <div class="navbar-header">
         BRAND + TOGGLE
      </div>
      <div class="navbar-collapse">
         菜单+按钮+超链接+表单+...
      </div>
   </div>
</div>

组件——媒体对象

这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右侧对齐的图片（就像博客评论或 Twitter 消息等）。

1
2
3
4
5
6
7
8
9
10
11
<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

组件——面板

虽然不总是必须，但是某些时候你可能需要将某些 DOM 内容放到一个盒子里。对于这种情况，可以试试面板组件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>
<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

组件——折叠组件

点击按钮可以展开(收缩)面板，通过样式 .collapse 和 .in 来控制默认显示还是隐藏。

1
2
3
4
5
6
7
8
9
10
11
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

组件——手风琴效果

手风琴效果是面板组件和折叠组件一起使用来实现的效果。

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
<div class="panel-group" id="yeye">
        <div class="panel panel-danger">
            <div class="panel-heading">
                <a class="panel-title" data-toggle="collapse" href="#yitian" data-parent="#yeye">《倚天屠龙记》</a>
            </div>
            <div class="panel-collapse collapse in" id="yitian">
                <div class="panel-body">
                    金庸小说集：香港经典小说。。。金庸小说集：香港经典小说。。。金庸小说集：香港经典小说。。。金庸小说集：香港经典小说。。。金庸小说集：香港经典小说。。。金庸小说集：香港经典小说。。。金庸小说集：香港经典小说。。。金庸小说集：香港经典小说。。。
                </div>
            </div>
        </div>
        <div class="panel panel-success">
            <div class="panel-heading">
                <a class="panel-title" data-toggle="collapse" href="#tianlong" data-parent="#yeye">《天龙八部》</a>
            </div>
            <div class="panel-collapse collapse" id="tianlong">
                <div class="panel-body">
                    金庸小说集：香港经典小说。。。金庸小说集：香港经典小说。。。金庸小说集：香港经典小说。。。金庸小说集：香港经典小说。。。金庸小说集：香港经典小说。。。金庸小说集：香港经典小说。。。金庸小说集：香港经典小说。。。金庸小说集：香港经典小说。。。
                </div>
            </div>
        </div>
        <div class="panel panel-warning">
            <div class="panel-heading">
                <a class="panel-title" data-toggle="collapse" href="#tianya" data-parent="#yeye">《天涯明月刀》</a>
            </div>
            <div class="panel-collapse collapse" id="tianya">
                <div class="panel-body">
                    金庸小说集：香港经典小说。。。金庸小说集：香港经典小说。。。金庸小说集：香港经典小说。。。金庸小说集：香港经典小说。。。金庸小说集：香港经典小说。。。金庸小说集：香港经典小说。。。金庸小说集：香港经典小说。。。金庸小说集：香港经典小说。。。
                </div>
            </div>
        </div>
    </div>
</div>

Bootstrap——jQuery插件函数

插件函数调用方法

(1)编写JavaScript代码
例如：$(…).dropdown( );
(2)添加data-*属性调用
例如：<a data-toggle="dropdown">触发元素</a>
上述代码在bootstrap.js中有对应的调用：
$('[data-toggle="dropdown]').dropdown( );

JS插件——下拉菜单

方式1: <a data-toggle="dropdown"></a>
方式2： $('#linkBtn').dropdown();

JS插件——标签页式导航

方式1： <a data-toggle="tab"></a>
方式2： $('...').tab('show');

JS插件——折叠效果

1
2
3
4
<a data-toggle="collapse" href="#目标元素">触发元素</a>
<button data-toggle="collapse" data-target="#目标元素">触发元素</button>
--------------------------------------
<div id="目标元素" class="collapse in"></div>

JS插件——弹出插件

Bootstrap弹出插件分为三种：
(1)tooltip： 工具提示
(2)popover： 弹出框
(3)modal：模态框

1
2
3
4
5
6
7
8
9
10
<!--使用div实现弹出式模态子窗体必需的结构：-->
<div class="modal">	半透明遮罩层
   <div class="modal-dialog">  大小、位置
      <div class="modal-content">  背景色、边框、倒角、阴影
         <div class="modal-header">头部</div>
            <div class="modal-body">主体</div>
         <div class="modal-footer">尾部</div>
      </div>
   </div>
</div>
  • 模态框实例代码：
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
42
43
<div class="container">
    <h3>模态框</h3>
    <a data-toggle="modal" href="#modal1" class="btn btn-warning">登录</a>
    <button type="button" class="btn btn-success" data-toggle="modal" data-target="#modal2">注册</button>
</div>
<div class="modal fade" id="modal1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <span class="close" data-dismiss="modal">&times;</span>
                <h3 class="modal-title">用户登录</h3>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="login">用户名：</label>
                        <input type="text" class="form-control" id="login"/>
                        <label for="mima">密码：</label>
                        <input type="password" class="form-control" id="mima"/>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox"/>7天内记住密码
                            </label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <a href="#" class="btn btn-success">登录</a>
                <a href="#" data-dismiss="modal" class="btn btn-danger">取消</a>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="modal2">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">注册用户</div>
            <div class="modal-body"></div>
            <div class="modal-footer"></div>
        </div>
    </div>
</div>

JS插件——警告框

Bootstrap中的警告框不是弹出形式的，只是一个div，占用页面的布局空间，可以被关闭。

1
2
<div class="alert  alert-danger/warning/success/info">
</div>

JS插件——轮播广告

轮播广告结构比较杂乱，只要记得：
<div class="carousel"></div> 剩下的通过联想记忆。

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
42
43
44
45
46
47
48
<h3>带小圆点控制按钮的3秒轮播广告</h3>
<div id="my-ad2" class="carousel slide" data-ride="carousel" data-interval="3000">
    <div class="carousel-inner">
        <div class="item active">
            <img src="img/1111.jpg" alt=""/>
            <div class="carousel-caption">
                <h3>《天龙八部》</h3>
                <p>金庸武侠小说，经典武侠小说集。</p>
            </div>
        </div>
        <div class="item">
            <img src="img/2222.jpg" alt=""/>
            <div class="carousel-caption">
                <h3>《倚天屠龙记》</h3>
                <p>金庸武侠小说，经典武侠小说集。</p>
            </div>
        </div>
        <div class="item">
            <img src="img/3333.jpg" alt=""/>
            <div class="carousel-caption">
                <h3>《天涯明月刀》</h3>
                <p>金庸武侠小说，经典武侠小说集。</p>
            </div>
        </div>
        <div class="item">
            <img src="img/4444.jpg" alt=""/>
            <div class="carousel-caption">
                <h3>《侠客行》</h3>
                <p>金庸武侠小说，经典武侠小说集。</p>
            </div>
        </div>
    </div>
    <!--左右箭头不随页面滚动-->
    <a data-slide="prev" href="#my-ad2" class="carousel-control left">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a data-slide="next" href="#my-ad2" class="carousel-control right">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
    <!--远点不随页面滚动-->
    <ul class="carousel-indicators">
        <li data-slide-to="0" data-target="#my-ad2" class="active"></li>
        <li data-slide-to="1" data-target="#my-ad2"></li>
        <li data-slide-to="2" data-target="#my-ad2"></li>
        <li data-slide-to="3" data-target="#my-ad2"></li>
    </ul>
</div>

本次的难点在与后面响应式导航条的复杂设计和模态框，轮播。

分享到：
标签
前端技术 Bootstrap CSS
友情链接