bootstrap复习：组件

Posted 2020-07-01

一、下拉菜单

1.实例：将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 html 代码。为下拉菜单的父元素添加 .dropup 类还可以让菜单向上弹出（默认是向下弹出）。

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
    </button>
</div>

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

<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
  ...
</ul>

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

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="presentation" class="divider"></li>
  ...
</ul>

二、按钮组

1.实例：通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为。

<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>

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

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

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

3.垂直排列：.btn-group-vertical可以让一组按钮垂直堆叠排列显示而不是水平排列。分列式按钮下拉菜单不支持这种方式。

4.两端对齐排列的按钮组：.btn-group-justified可以让一组按钮两端对齐排列。为了将 <button> 元素用于两端对齐的按钮组中，必须将每个按钮包裹进一个按钮组中。

三、输入框组

1.通过在文本输入框 <input> 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为.input-group赋予.input-group-addon 类，可以给.form-group的前面或后面添加额外的元素。

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

2.可以将多选框或单选框作为额外元素添加到输入框组中。

<div class="input-group">
　　<span class="input-group-addon">
　　　　<input type="checkbox" aria-label="...">
　　</span>
　　<input type="text" class="form-control" aria-label="...">
</div>

3.为输入框组添加按钮需要额外添加一层嵌套，不是 .input-group-addon，而是添加 .input-group-btn来包裹按钮元素。

<div class="input-group">
    <span class="input-group-btn">
        <button class="btn btn-default" type="button">GO!</button>
    </span>
    <input type="text"class="form-control" placeholder="Search for...">
</div>

四、导航

Bootstrap 中的导航组件都依赖同一个.nav类，状态类也是共用的。

1.标签页:使用.nav-tabs类可以创建一个普通标签页。

<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.胶囊式标签页：使用使用.nav-pills类可以创建要给胶囊式标签页。

<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>

3.胶囊是标签页也是可以垂直方向堆叠排列的。只需添加.nav-stacked 类。

五、导航条

1.品牌图标：添加.nav-brand类。

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

2.表单：将表单放置于.navbar-form之内可以呈现很好的垂直对齐。

<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">Submit</button>
</form>

3.按钮：对于不包含在 <form> 中的 <button> 元素，加上 .navbar-btn 后，可以让它在导航条里垂直居中。

 4.固定在顶部：添加.navbar-fixed-top可以让导航条固定在顶部。

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

5.固定在底部：添加.navbar-fixed-bottom类可以让导航条固定在底部。

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

6.通过添加.nab-bar-inverse类可以改变导航条的外观。

<nav class="navbar navbar-inverse">
  ...
</nav>

六、分页

1.默认分页：

<nav>
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><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="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

2.尺寸：.pagination-lg或.pagination-sm提供了额外可供选择的尺寸。

3.翻页：默认翻页中，链接居中对齐。

<nav>
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

4.对齐链接：也可以通过.previous与.next将链接向两端对齐。

<nav>
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

七、标签

1.实例：

<h3>Example heading <span class="label label-default">New</span></h3>

八、徽章

1.给链接、导航等元素嵌套 <span class="badge"> 元素，可以很醒目的展示新的或未读的信息条目。

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

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

九、巨幕

这是一个轻量、灵活的组件，它能延伸至整个浏览器视口来展示网站上的关键内容。

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

如果需要让巨幕组件的宽度与浏览器宽度一致并且没有圆角，请把此组件放在所有 .container 元素的外面，并在组件内部添加一个 .container 元素。

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

十、页头

1.实例：

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

十一、缩略图

1.添加.thumbnail类可以创建缩略图。

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

十二、进度条

1.默认样式：

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

2.带有提示的进度条：

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

3.通过添加.progress-bar-striped可以创建进度条动画效果。

4.把多个进度条放进.progress中可以堆叠进度条。

十三、媒体对象

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

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

2.图片或其他媒体类型可以顶部、中部或底部对齐。默认是顶部对齐。

<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>

十四、列表组

1.实例：

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

2.徽章：给列表组加入徽章组件，它会自动被放在右边。

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

十五、面板

1.基本实例：

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

2.带标题的面板：通过添加.panel-heading可以很简单的为面板加入一个标题容器。

3.带脚注的面板：通过添加.panel-footer类，可以为面板加入注脚。

4.带表格的面板：为面板中不需要边框的表格添加.table类。

十六、具有响应式特性的嵌入内容

1.根据被嵌入内容的外部容器的宽度，自动创建一个固定的比例，从而让浏览器自动确定视频或 slideshow 的尺寸，能够在各种设备上缩放。这些规则被直接应用在 <iframe>、<embed>、<video> 和 <object> 元素上。如果你希望让最终样式与其他属性相匹配，还可以明确地使用一个派生出来的 .embed-responsive-item 类。