Bootstrap css入门及布局

Bootstrap

CSS组件

本章目标

会使用下拉菜单组件制作下拉菜单
会使用输入框和小图标组件制作搜索框
会使用导航和导航条组件制作响应式导航条
会使用缩略图和媒体对象组件制作图文混合的列表
会使用列表组件制作列表

Bootstrap组件

Bootstrap组件是Bootstrap框架的核心之一。可以利用Bootstrap组件构建出绚丽的页面
常用的组件：Icon图标（Glyphicon）、下拉菜单（Dropdown）、输入框（Input group）、导航（Nav）、导航条（Navbar）、缩略图（Thumbnail）、媒体对象（Media object）、列表组（Listgroup）、分页导航（Pagination）

小图标

图标（icon）是一个优秀网站不可缺少的一组元素，小图标的点缀可以使网站瞬间提升一个档次
Bootstrap给我们提供了250种小图标，这些小图标可以作用在内联元素上，给网页增加更多活力
<span class=" glyphicon  glyphicon-home"></span>
## 小图标应用注意事项 ##
图标类不能和其他组件直接联合使用
不能在同一个元素上与其他类同存在
创建一个嵌套的span元素，并将图标应用到这个span上
只对内容为空的元素起作用
对引入的图标位置有规定
图标字体全部位于../fonts/目录内，相对于预编译版CSS文件的应该是同级目录

小图标的应用

小图标应用场景
icon和导航组合
icon和按钮组合
icon和输入框组合

下拉菜单

在网页交互的时候经常会需要上下文菜单或者隐藏/展开菜单
下拉菜单的 JavaScript 插件能让它具有交互性

下拉菜单使用方法

名为.dropdown样式所在的是大容器
.dropdown-menu是放菜单li的容器
.open可以控制菜单展开与否
<div class="dropdown open">   <!-- open控制菜单收缩展开-->
    <button class="btn btn-default" data-toggle="dropdown" >
        Dropdown   <span class="caret"></span>      <!-- 向下小三角-->
    </button>
    <ul class="dropdown-menu">
      <li class="active"><a href="#">Action</a></li>  
        <li><a href="#">Another action</a></li>
        <li class="divider"></li>        <!-- 分界线-->
    </ul>
</div>

分离式按钮下拉菜单

<div class="btn-group">
    <button type="button" class="btn btn-danger">Action</button>
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" >
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
         <li><a href="#">Action</a></li>
    </ul>
</div>

输入框

输入框组件是通过在文本输入框input前面、后面或是两边加上文字或按钮
其实有的时候，我们需要将文本输入框（Input group）和文字或者小icon组合在一起使用（称之addon）
<div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" placeholder="Username">
</div>
<br/>
<div class="input-group">
    <input type="text" class="form-control" placeholder="请输入要搜索的内容" >
    <span class="input-group-addon" >百度一下</span>
</div>

使用输入框须知

请避免在select元素上使用该功能，因为Webkit浏览器不完全支持input-group组件的特性
不要直接将.input-group和.form-group混合使用，因为.input-group是一个独立的组件
不要将表单组件或栅格列类直接和输入框混合使用，而是将输入框组件嵌套到表单组件或栅格相关元素的内部

输入框尺寸大小

输入框组件也可以设置大小，在.input-group-addon样式容器上添加相应的尺寸类，其内部包含的元素将自动调整自身的尺寸，不需要为输入框组件中的每个元素重复地添加控制尺寸的类
<div class="input-group input-group-lg">…</div>
<div class="input-group input-group-sm">…</div>

按钮作为addon

<div class="input-group">
    <input type="text" class="form-control" placeholder="请输入要搜索的内容">
    <span class="input-group-btn">   <!-- 容易出错点：写成input-group-addon-->
        <button class="btn btn-primary" type="button">百度一下</button>
    </span>
</div>

导航

导航（Nav）是网站最重要的组成部分，可以便于用户查找网站所提供的各项功能服
Bootstrap中导航组件都依赖一个.nav类，状态也是公共的
常见的导航类型
选项卡导航（nav-tabs）
胶囊式选项卡导航（nav-pills）
自适应导航（nav-justified）
二级导航

选项卡导航

<ul class="nav nav-tabs ">
    <li  class="active"><a href="#">主页</a></li>
    <li><a href="#">微博</a></li>
    <li><a href="#">图书</a></li>
    <li><a href="#">关于我们</a></li>
</ul>

胶囊式选项卡导航

<ul class="nav nav-pills ">
    <li  class="active"><a href="#">主页</a></li>
    省略其他li项
</ul>

自适应导航

<ul class="nav nav-tabs nav-justified">
    <li  class="active"><a href="#">主页</a></li>
    省略其他li项
</ul>

二级导航

<ul class="nav nav-pills ">
    <li class="active"><a href="#">首页</a></li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">其他
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu ">
            <li><a href="#">收藏 </a></li>
       </ul>
    </li>
</ul>

导航条

导航和导航条是一样的吗？
导航条是网站中作为导航页头的响应式基础组件。他们在移动设备上可以折叠（并且可开可关），会随着浏览器宽度增加而逐渐变为水平展开模式
常见的导航条应用
基础条航条
导航条中的表单
导航条中的按钮、文本、链接
顶部固定或底部固定
响应式导航条

基础导航条

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <a href="#" class="navbar-brand">LOGO</a>
    </div>
    <ul class="nav navbar-nav ">
        <li  class="active"><a href="#">主页</a></li>
        <li><a href="#">微博</a></li>
        <li><a href="#">图书</a></li>
    </ul>
</nav>

导航条中的表单

<nav class="navbar navbar-default" role="navigation" >
<!--此处省略了导航的内容-->
    <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-primary">搜索</button>
    </form>
</nav>
navbar-right   控制它右浮动的样式

导航条中的按钮、文本、链接

导航条中，还可以引入文本（navbar-text）、按钮（navbar-btn）和普通链接（navbar-link）
<div class="nav navbar-nav">
        <button class="btn btn-default navbar-btn">button</button>
        <button class="btn bg-primary navbar-text">button</button>
        <button class="btn btn-success navbar-link">button</button>
  </div>
链接文字排版异常，怎么解决？
在navbar-link样式上再应用navbar-text样式

顶部固定或底部固定

<!--顶部固定-->
<nav class="navbar navbar-default navbar-fixed-top">…</nav>
<!--底部固定-->
<nav class="navbar navbar-default navbar-fixed-bottom">…</nav>

响应式导航条

<nav class="nav navbar-inverse ">
    <button  class="navbar-toggle" data-toggle="collapse" 
      data-target=".navbar-collapse" >
            <span class="icon-bar"></span> 
            <span class="icon-bar"></span> 
            <span class="icon-bar"></span> 
            <span class="icon-bar"></span> 
     </button>
    <div class="collapse navbar-collapse navbar-left">...</div>
</nav>

缩略图

<div class="row">
    <div class="col-md-2 col-xs-6">
        <a class="thumbnail" href="#">
            <img src="image/img1.jpg" alt=""/>
        </a>
    </div>
……
</div>

图文混合的缩略图

<div class=" col-md-3 col-xs-6">
        <div class="thumbnail">
            <img src="image/img1.jpg" alt="">
            <div class="caption">
                <h3>左耳</h3>
                <p>放肆青春掀全民追忆</p>
                <p>
                    <a href="#" class="btn btn-primary" role="button">播放</a>
                    <a href="#" class="btn btn-default" role="button">下载</a>
                </p>
</div>

媒体对象2-1

<div class="media">
    <div class="media-left">
        <a href="#">
            <img class="media-object" src="image/pic-samll.jpg" alt="...">
        </a>
    </div>
    <div class="media-body">
        <h4 class="media-heading">谁在制造下跌，散户何去何从</h4>
        <p>大盘分时…</p>
        <small>5分钟前/ 股市</small>
        <small> 评论 | 分享 </small>
    </div>

媒体对象2-2

<div class="media">
    <div class="media-left">
        <img class="media-object" src="image/pic-samll.jpg" alt="">
    </div>
    <div class="media-body">…</div>
</div>
<div class="media">
    <div class="media-body text-right">… </div>
    <div class="media-right">
        <img class="media-object" src="image/pic-samll.jpg" alt="">

列表组2-1

列表组是灵活又强大的组件
大部分列表都是使用ul/li来实现的
基础列表
<ul class="list-group">
    <li class="list-group-item ">同桌的你</li>
    <li class="list-group-item ">花样年华</li>
    <li class="list-group-item">甜蜜蜜</li>
    <li class="list-group-item">向天再借五百年</li>
</ul>

列表组2-2

<ul class="list-group">
    <li class="list-group-item active ">同桌的你
        <!--徽章图标-->
        <span class="badge">12</span>
    </li>
    <!--list-group-item-success 带有样式的列表-->
    <li class="list-group-item list-group-item-success">花样年华
        <span class="badge">5</span>
    </li>
</ul>

分页导航

网页内容很多的时候都会使用分页显示。比如新闻列表、订单记录等
一个用户体验良好的分页组件会使网页的level提高一个等级，Bootstrap为大家提供了两种分页组件
带多个页面的翻页组件
只有上一页和下一页的翻页
<ul class="pagination">
    <li class="disabled"><a href="#">&laquo;</a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href=“#”>2</a></li>……
    <li><a href="#">&raquo;</a></li>
</ul>
<ul class="pager">
    <li><a href="#">上一页</a></li>
    <li><a href="#">下一页</a></li>
</ul>