《深入理解Bootstrap》学习笔记（五）

287 查看

第四章 CSS组件
——4.1 小图标
——4.2 下拉菜单
——4.3 按钮组
——4.4 按钮下拉菜单
——4.5 输入框组
——4.6 导航
——4.7 导航条
——4.8 面包屑导航
——4.9 分页导航
——4.10 标签
——4.11 徽章
——4.12 大屏幕展播
——4.13 页面标题
——4.14 缩略图
——4.15 警告框
——4.16 进度条
——4.17 媒体对象
——4.18 列表组
——4.19 面板
——4.20 洼地

4.1 小图标
任何元素标签引入class样式glyphicon glyphicon-*均可获取小图标

    <div class="glyphicon glyphicon-search"></div>
    <p class="glyphicon glyphicon-search"></p>
    <i class="glyphicon glyphicon-search"></i>
    <span class="glyphicon glyphicon-search"></span>

4.2 下拉菜单
下拉菜单要配合下拉菜单Js插件使用，这里只讲解下拉菜单写法，第五章JavaScript插件会详细讲解下拉菜单配合Js的用法。

    <div class="dropdown">
        <ul class="dropdown-menu">
            <li class="dropdown-header">蔬菜</li>
            <li class="active"><a href="javascript:void(0)">白菜</a></li>
            <li class="disabled"><a href="javascript:void(0)">萝卜</a></li>
            <li><a href="javascript:void(0)">土豆</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">水果</li>
            <li><a href="#">苹果</a></li>
            <li><a href="#">香蕉</a></li>
            <li><a href="#">橘子</a></li>
        </ul>
    </div>

下拉菜单默认左对齐（pull-left），样式pull-right可使下拉菜单右对齐。
4.3 按钮组

基本用法

    <div class="btn-group">
        <button type="button" class="btn btn-default">left</button>
        <button type="button" class="btn btn-default">left</button>
        <button type="button" class="btn btn-default">left</button>
    </div>

按钮工具栏

    <div class="btn-toolbar">
        <div class="btn-group">
            <button type="button" class="btn btn-default">left</button>
            <button type="button" class="btn btn-default">left</button>
            <button type="button" class="btn btn-default">left</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-default">left</button>
            <button type="button" class="btn btn-default">left</button>
            <button type="button" class="btn btn-default">left</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-default">left</button>
            <button type="button" class="btn btn-default">left</button>
            <button type="button" class="btn btn-default">left</button>
        </div>
    </div>

按钮尺寸设置
bootstrap提供了四种按钮组尺寸：btn-group-lg、普通、btn-group-sm、btn-group-xs
嵌套分组
将下拉菜单与按钮组结合。

    <div class="btn-group">
        <button class="btn btn-default" type="button">首页</button>
        <button class="btn btn-default" type="button">个人简介</button>
        <button class="btn btn-default" type="button">作品</button>
        <div class="btn-group">
            <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button"> 
                图书<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>
            </ul>
        </div>
    </div>

垂直分组

<div class="btn-group-vertical">
   <button class="btn btn-default" type="button">首页</button>
   <button class="btn btn-default" type="button">个人简介</button>
   <button class="btn btn-default" type="button">作品</button>
</div>

自适应分组

    <div class="btn-group btn-group-justified">
        <button type="button" class="btn btn-default">left</button>
        <button type="button" class="btn btn-default">left</button>
        <button type="button" class="btn btn-default">left</button>
    </div>

4.4 按钮下拉菜单
将按钮和下拉菜单结合。

<div class="btn-group">
  <button type="button" class="btn btn-success dropdown-toggle" data-toggle= "dropdown">
    Success <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

默认下拉菜单为向下显示，将最外层的dropdown换位dropup样式就可向上显示。尺寸大小问题与按钮大小一致。
4.5 输入框组
注意按钮组（btn-group）和输入框组（input-group）的不同。

<div class="input-group">
    <span class="input-group-addon">$</span>
    <input type="text" class="form-control">
    <span class="input-group-addon">.00</span>
</div>

input-group-addon样式也可以放按钮、单选框、复选框、小图标等元素。
4.6 导航
导航特效也需要和Js插件配合才可实现导航选项卡功能，这里只展示导航的样式。
选项卡导航

<ul class="nav nav-tabs ">
    <li class="active"><a href="#">主页</a></li>
    <li><a href="#">个人信息</a></li>
    <li class="disabled"><a href="#">作品</a></li>
    <li><a href="#">图书</a></li>
</ul>

胶囊式选项卡导航

<ul class="nav nav-pills ">
    <li class="active"><a href="#">主页</a></li>
    <li><a href="#">个人信息</a></li>
    <li class="disabled"><a href="#">作品</a></li>
    <li><a href="#">图书</a></li>
</ul>

堆叠式导航
堆叠式导航尽量只在胶囊式导航的基础上实现。

<ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#">主页</a></li>
    <li><a href="#">个人信息</a></li>
    <li><a href="#">作品</a></li>
    <li><a href="#">图书</a></li>
</ul>

自适应导航
在之前两种导航的基础上添加nav-justified样式。
二级导航
可以再一级导航的基础上添加下拉菜单特效实现二级导航。

<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown 
<span
           class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a tabindex="-1" href="#">二级菜单1</a></li>
            <li><a tabindex="-1" href="#">二级菜单2</a></li>
        </ul>
    </li>
</ul>

4.7 导航条
区别导航（nav）和导航条（navbar）。
基础导航条

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">Brand</a>
    </div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">active</a></li>
        <li><a href="#">Link</a></li>
        <li class="disabled"><a href="#">disabled</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</nav>

导航中的表单

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header"><a class="navbar-brand" href="#">Brand</a>
</div>
    <form class="navbar-form navbar-left" role="search">
        <div class="form-group"><input type="text" class="form-control" 
                   placeholder="Search"></div>
        <button type="submit" class="btn btn-default">左按钮</button>
    </form>
    <form class="navbar-form navbar-right" role="search">
        <div class="form-group"><input type="text" class="form-control" 
                   placeholder="Search"></div>
        <button type="submit" class="btn btn-default">右按钮</button>
    </form>
</nav>

导航条顶部固定或底部固定
使用navbar-fixed-top和navbar-fixed-bottom将导航条固定在顶部和底部。
响应式导航条
需要和Js插件配合使用。
导航条总结：导航条组件涉及部分较多，几乎和所有的组件都有关联，下拉菜单、按钮、导航、响应式、图标、颜色、浮动、文本等都可用在导航条中，并且导航条几乎在每个网站都会用到，所以，一定要联系各种导航条的组合使用。
4.8 面包屑导航

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ul>

4.9 分页导航

页码分页

<ul class="pagination">
  <li><a href="#">«上一页</a></li>
  <li class="active"><a href="#">1</a></li>
  <li class="disabled"><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">下一页»</a></li>
</ul>

翻页

<ul class="pager">
    <li><a href="#">上一页</a></li>
    <li><a href="#">下一页</a></li>
</ul>

<ul class="pager">
    <li class="previous"><a href="#">上一页</a></li>
    <li class="next"><a href="#">下一页</a></li>
</ul>

4.10 标签

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
<span class="label label-info">Info</span>

4.11 徽章

<a href="#">Inbox <span class="badge">42</span></a>

4.12 大屏幕展播
.jumbotron样式的应用。
4.13 页面标题

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

4.14 缩略图
给图片等内容加上边框样式。
4.15 警告框
警告框需要和Js插件配合使用。

<div class="alert alert-warning">
    <button type="button" class="close">×</button>
    <strong>Warning!</strong>
    <p>Best check yo self, you're not looking too good.</p>
</div>

4.16 进度条
progress、progress-bar、progress-striped等样式的配合使用。
4.17 媒体对象
内容略。
4.18 列表组

<ul class="list-group">
  <li class="list-group-item">JavaScript编程精解</li>
  <li class="list-group-item">JavaScript设计模式</li>
  <li class="list-group-item">JavaScript启示录</li>
  <li class="list-group-item">当前你正在读的书</li>
  <li class="list-group-item">正在构想的书</li>
</ul>

可与徽章、标签、下拉菜单等组件结合使用。
4.19 面板

<div class="panel panel-default">
    <div class="panel-heading">面板header</div>
    <div class="panel-body">
        这里是面板内容
    </div>
    <div class="panel-footer">面板footer</div>
</div>

面板可做弹出框，可与表格、列表组嵌套使用。
4.20 洼地

<div class="well">
    <p>Some default panel. </p>
    <blockquote>注意，这里是引用内容！</blockquote>
</div>

不是很明白用在什么地方，可以做展示用。

CSS组件总结： CSS组件是Bootstrap三大基础部分之一，针对网站常用模块设置，要想掌握熟练不仅要熟记bootstrap设定的各种样式组合，还要进行大量的联系。笔记做到这里其实已经有凑数的嫌疑了，因为我发现不论我笔记写成什么样都没有完整做一个网站掌握的快。