慕课网bootstrap二

网格

最常见的是平均分成12份

<div class="container">
    <div class="row">

1. 数据行（.row）必须包含在容器（.container），一边为其赋予合适的对齐方式和内距（padding）。
2. 在行.row中可以添加.column，但列数之和不能超过平分的总列数，比如12
3. 具体内容应当放置在列容器（column）之内，而且只有列才能作为行容器的直接子元素

列偏移

列元素上添加类名col-md-offset-*即可，加起来不要超过12

列排序

就是改变列的方向，改变左右浮动，设置浮动距离
添加类名col-md-push-*（往右）和col-md-pull-*（往左）星号代表移动的列组合数

列的嵌套

外部不能大于12，内部也不能大于12

下拉菜单

bootstrap组件交互效果依赖于jQuery库，要加载jQuery库

1. 使用一个包含类名为dropdown的容器包裹整个下拉菜单元素<div class="dropdown">
2. 使用一个<button>按钮作为父菜单，并且定义类名dropdown-toggle和自定义data-toggle属性，且值必须和最外容器类名一致data-toggle="dropdown"

3. 下拉菜单使用一个ul列表，并且顶一个一个类名为dropdown-menu，<ul class="dropdown-menu">

   选择你喜欢的水果

   • 苹果
   • 香蕉
   • 梨
   • 桃

下拉菜单(下拉分割线)

下拉菜单里组与组之间添加一个空的<li>添加类名devider，
每个组添加一个标题<li> role="presentation" class="dropdown-header">菜单头部</li>

下拉菜单（对齐方式）

默认左对齐

与父容器右对齐
<ul class="dropdown-menu pull-right(dropdown-menu-right)">

下拉菜单（菜单项状态）

<li class="disabled（禁用） active（当前状态）">

按钮组

按钮放在带有类名btn-group的div中，里面的<button class="btn btn-default>"

按钮工具栏

<div class="btn-toolbar">
    <div class="btn-group">
    </div>
</div>

<div class="btn-group btn-group-lg(btn-group-sm)(btn-group-xs)"大，小，超小

按钮（嵌套分组）

<div class="btn-group">
    <button class="btn btn-default" type="button">首页</button>
    <div class="btn btn-default dropdown-toggle" date-toggle="dropdown" type="button">关于我们</button>
        <ul class="dropdown-menu">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
        </ul>
    </div>
</div>

按钮（垂直分组）

把水平分组的btn-group换成btn-group-vertical即可

等分按钮

等分按钮尽量使用<a>标签制作元素按钮，在按钮组btn-group后追加一个btn-group-justified类名

按钮向上向下三角形

<div class="btn-group dropup">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>

向上弹起的下拉菜单

<div class="btn-group dropup">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>

导航（基础样式）

<ul>类中加入nav,nav-tabs,nav-pills
可横向排列按钮，只加nav竖行排列，按钮为块状元素

标签形tabs导航

通过nav-tabs样式来实现，在原导航nav上追加此类名，active和disabled。

胶囊形pills导航

通过nav-tabs样式来实现，在原导航nav上追加此类名，active和disabled。

垂直堆叠的导航

在nav-pills的基础上添加一个nav-stacked类名即可

自适应导航（使用）

自适应导航指导航占据容器全部宽度，而且菜单项可以像表格一样自适应宽度，nav-justified和nav-tabs或者nav-pills配合使用

导航下拉菜单（二级导航）

制作二级导航，只需要将<li>当做父容器，使用dropdown，同时在li中嵌套另一个列表ul

<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="##">CSS3</a></li>
    <li><a href="##">Sass</a></li>
    <li><a href="##">jQuery</a></li>
    <li><a href="##">Responsive</a></li>
  </ul>

使用分割线在导航中添加<li class="nva-divider"></li>就可以饿了

面包屑式导航

为ol加入breadcrumb类：

<ol class="breadcrumb">
    <li><a href="#">首页</a></li>
    <li class="active">书</li>
</ol>

导航条

导航条也是独立组件

基础导航条

1. 首先在制作导航的列表（<ul class="nav">)基础上添加类名navbar-nav
2. 在列表外部添加一个容器（div），并且使用类名navbar-default