BootStrap组件

1 Glyphicons 字体图标

图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的  标签，并将图标类应用到这个  标签上。

图标类只能应用在不包含任何文本内容或子元素的元素上。

1
2
3
4
5
6
7
8
9
10
11
12
 
<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>
<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true">span>
  <span class="sr-only">Error:span>
  Enter a valid email address
div>

2 下拉菜单

2.1 基本使用

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<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="#">Actiona>li>
    <li><a href="#">Another actiona>li>
    <li><a href="#">Something else herea>li>
    <li role="separator" class="divider">li>
    <li><a href="#">Separated linka>li>
  </ul>
div>

通过为下拉菜单的父元素设置 .dropup 类，可以让菜单向上弹出（默认是向下弹出的）

1
 
<div class="dropup"> ... div>

2.2 对齐

默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐。

1
2
3
 
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
ul>

2.3 标题

在任何下拉菜单中均可通过添加标题来标明一组动作。

1
2
3
4
5
 
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
ul>

2.4 分割线

为下拉菜单添加一条分割线，用于将多个链接分组

1
2
3
4
5
 
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider">li>
  ...
</ul>

2.5 禁用的菜单项

为下拉菜单中的 

  •  元素添加 .disabled 类，从而禁用相应的菜单项

    3 按钮组

    3.1 基本使用

    1
    2
    3
    4
    5
    		 
    <div class="btn-group" role="group" aria-label="...">
      <button type="button" class="btn btn-default">Leftbutton>
      <button type="button" class="btn btn-default">Middlebutton>
      <button type="button" class="btn btn-default">Rightbutton>
    div>

    3.2 按钮工具栏

    把多个按钮组 嵌套在一个工具栏里面

    1
    2
    3
    4
    5
    		 
    <div class="btn-toolbar" role="toolbar" aria-label="...">
      <div class="btn-group" role="group" aria-label="...">...div>
      <div class="btn-group" role="group" aria-label="...">...div>
      <div class="btn-group" role="group" aria-label="...">...div>
    div>

    3.3 尺寸

    只要给 .btn-group 加上 .btn-group-* 类，就省去为按钮组中的每个按钮都赋予尺寸类了，如果包含了多个按钮组时也适用

    1
    2
    3
    4
    		 
    <div class="btn-group btn-group-lg" role="group" aria-label="...">...div>
    <div class="btn-group" role="group" aria-label="...">...div>
    <div class="btn-group btn-group-sm" role="group" aria-label="...">...div>
    <div class="btn-group btn-group-xs" role="group" aria-label="...">...div>

    3.4 嵌套下拉菜单

    想要把下拉菜单混合到一系列按钮中，只须把 .btn-group 放入另一个 .btn-group 中

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    		 
    <div class="btn-group" role="group" aria-label="...">
      <button type="button" class="btn btn-default">1button>
      <button type="button" class="btn btn-default">2button>

      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
          <span class="caret">span>
        button>
        <ul class="dropdown-menu">
          <li><a href="#">Dropdown linka>li>
          <li><a href="#">Dropdown linka>li>
        ul>
      div>
    div>

    3.5 垂直排列

    让一组按钮垂直堆叠排列显示而不是水平排列

    1
    2
    3
    		 
    <div class="btn-group-vertical" role="group" aria-label="...">
      ...
    div>

    3.6 两端对齐排列的按钮组

    元素

    只须将一系列 .btn 元素包裹到 .btn-group.btn-group-justified 中即可

    1
    2
    3
    		 
    <div class="btn-group btn-group-justified" role="group" aria-label="...">
      ...
    div>