Comprehensive analysis of Bootstrap layout component application_javascript skills

The example in this article introduces the application of Bootstrap layout components and is shared with everyone for your reference. The specific content is as follows

Application examples of font icons

<button type="button" class="btn btn-default">
  <span class="glyphicon glyphicon-sort-by-attributes"></span>
</button>

Dropdown menu example

<div class="dropdown">
  <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
   data-toggle="dropdown">
   主题
   <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation" class="dropdown-header">下拉菜单标题</li>
   <li role="presentation">
     <a role="menuitem" tabindex="-1" href="#">选项1</a>
   </li>
   <li role="presentation">
     <a role="menuitem" tabindex="-1" href="#">选项2</a>
   </li>
   <li role="presentation"> 
     <a role="menuitem" tabindex="-1" href="#">选项3</a>
   </li>
   <li role="presentation" class="divider"></li><!--分割线-->
   <li role="presentation">
     <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
   </li>
  </ul>
</div>

Button toolbar and button group

<div class="btn-toolbar" role="toolbar"><!--用来嵌套btn-group-->
  <div class="btn-group btn-group-lg">
  <!--btn-group-lg用来控制按钮组的大小,bt-group-vertical是垂直的按钮组,bt-group也可以嵌套bt-group-->
   <button type="button" class="btn btn-default">Button 1</button>
   <button type="button" class="btn btn-default">Button 2</button>
   <button type="button" class="btn btn-default">Button 3</button>
   </div>
   <div class="btn-group btn-group-sm">
   <button type="button" class="btn btn-default">Button 4</button>
   <button type="button" class="btn btn-default">Button 5</button>
   <button type="button" class="btn btn-default">Button 6</button>
  </div>
   <div class="btn-group btn-group-xs">
   <button type="button" class="btn btn-default">Button 7</button>
   <button type="button" class="btn btn-default">Button 8</button>
   <button type="button" class="btn btn-default">Button 9</button>
  </div>
</div>

Button drop-down menu

  <div class="btn-group"><!--加类.dropup可以变成按钮上拉菜单-->
   <button type="button" class="btn btn-default dropdown-toggle"  
     data-toggle="dropdown"> <!-- 加类.btn-xs之类的东西改变按钮大小-->
     默认 <span class="caret"></span>
   </button>
   <ul class="dropdown-menu" role="menu">
     <li><a href="#">功能</a></li>
     <li><a href="#">另一个功能</a></li>
     <li><a href="#">其他</a></li>
     <li class="divider"></li><!--分割线-->
     <li><a href="#">分离的链接</a></li>
   </ul>
  </div>

Input box group in the form

<form class="bs-example bs-example-form" role="form">
   <div class="input-group input-group-lg"><!--input-group-lg调整输入框组大小-->
     <input type="text" class="form-control">
     <span class="input-group-addon">.00</span>
   </div>
   <br>
   <div class="input-group">
     <span class="input-group-addon">
      <input type="checkbox"><!--复选框和单选框都能应用于输入框组-->
     </span>
     <input type="text" class="form-control">
   </div>
    <br>
   <div class="input-group">
     <input type="text" class="form-control">
     <span class="input-group-btn"><!--按钮也能应用于输入框组请注意这里的类变为了input-group-btn，甚至可以加上前面的按钮下拉菜单-->
       <button class="btn btn-default" type="button">
         Go!
       </button>
     </span>
    </div>
  </form>

Navigation (tab page)

<p>标签式的导航菜单</p>
<ul class="nav nav-tabs"><!--加上类nav-justified可以让导航两端对齐-->
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
</ul>
<p>基本的胶囊式导航菜单</p>
<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
</ul>
<p>垂直的胶囊式导航菜单</p>
<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
</ul>

Navigation Bar

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
   <a class="navbar-brand" href="#">W3Cschool</a>
  </div>
  <div>
   <ul class="nav navbar-nav"><!--.navbar-fixed-top和.navbar-fixed-bottom可以使导航栏固定在顶部和底部， .navbar-static-top会使导航栏随页面滚动吗， .navbar-inverse实现背景颜色和文字颜色互换-->
     <li class="active"><a href="#">iOS</a></li>
     <li><a href="#">SVN</a></li>
     <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        Java 
        <b class="caret"></b>
      </a>
      <ul class="dropdown-menu">
        <li><a href="#">jmeter</a></li>
        <li><a href="#">EJB</a></li>
        <li><a href="#">Jasper Report</a></li>
        <li class="divider"></li>
        <li><a href="#">分离的链接</a></li>
      </ul>
     </li>
   </ul>
    <!--导航栏中的表单-->
    <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>
    <!--导航栏按钮-->
    <button type="button" class="btn btn-default navbar-btn">
     导航栏按钮
   </button>
    <!--导航栏文本-->
    <div class="navbar-text navbar-right">
       <p >导航栏文本 <a href="#" class="navbar-link">我是链接</a></p>
      </div>
    <!--navbar-left和navbar-right可以实现向左和向右对齐-->
  </div>
</nav>

Responsive navigation bar

The following golden yellow part is the difference from the general navigation bar

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
   <button type="button" class="navbar-toggle" data-toggle="collapse" 
     data-target="#example-navbar-collapse">
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span><!--下面有几个选项这里就有几个iconbar-->
   </button>
   <a class="navbar-brand" href="#">W3Cschool</a>
  </div>
  <div class="collapse navbar-collapse" id="example-navbar-collapse">
   <ul class="nav navbar-nav">
     <li class="active"><a href="#">iOS</a></li>
     <li><a href="#">SVN</a></li>
     <li><a href="#">Troy</a></li>
   </ul>
  </div>
</nav>

Breadcrumbs

<ol class="breadcrumb">
 <li><a href="#">Home</a></li>
 <li><a href="#">2013</a></li>
 <li class="active">十一月</li>
</ol>

Pagination and page turning

<!--以下所有示例都可以用disabled和active类来控制激活和禁用-->
<!--分页-->
<ul class="pagination"><!--pagination-sm和pagination-lg来控制分页的大小-->
 <li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul>
<!--翻页-->
<ul class="pager">
 <li><a href="#">Previous</a></li>
 <li><a href="#">Next</a></li>
</ul>
<!--翻页-->
<ul class="pager">
 <li class="previous"><a href="#">&larr; Older</a></li>
 <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

Tags

<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">危险标签</span>

Badge

Badges are sleeker than labels and are primarily used to highlight new or unread items

<ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
  <li class="active">
   <a href="#">
     <span class="badge pull-right">42</span>
     首页
   </a>
  </li>
  <li><a href="#">简介</a></li>
  <li>
   <a href="#">
     <span class="badge pull-right">3</span>
     消息
   </a>
  </li>
</ul>

Extra large screen

<div class="jumbotron">
  <div class="jumbotron">
   <h1>欢迎登陆页面！</h1>
   <p>这是一个超大屏幕（Jumbotron）的实例。</p>
   <p><a class="btn btn-primary btn-lg" role="button">
     学习更多</a>
   </p>
  </div>
</div>
<!--翻过来jumbotron包着jumbotron就会得到一个不带圆角且占更多宽度的超大屏幕-->

Page Title Example

<div class="page-header">
  <h1>页面标题实例
   <small>子标题</small>
  </h1>
</div>

Thumbnail

<div href="#" class="thumbnail">
     <img src="/wp-content/uploads/2014/06/kittens.jpg" 
     alt="通用的占位符缩略图">
   </div>
    <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>

Warning

<div class="alert alert-success alert-dismissable"><!--alert-dismissable为可删除警告-->
  <button type="button" class="close" data-dismiss="alert" 
   aria-hidden="true">
   &times;
  </button>
  成功！很好地完成了提交。
</div>
<div class="alert alert-info alert-dismissable">
  <button type="button" class="close" data-dismiss="alert" 
   aria-hidden="true">
   &times;
  </button>
  <a href="#" class="alert-link">成功！很好地完成了提交。</a><!--警告中的标签-->
</div>
<div class="alert alert-warning alert-dismissable">
  <button type="button" class="close" data-dismiss="alert" 
   aria-hidden="true">
   &times;
  </button>
  警告！请不要提交。
</div>
<div class="alert alert-danger alert-dismissable">
  <button type="button" class="close" data-dismiss="alert" 
   aria-hidden="true">
   &times;
  </button>
  错误！请进行一些更改。
</div>

Progress bar

<!--一般进度条-->
<div class="progress progress-striped active"><!--progress-striped为加条纹,加active条纹会产生动画效果-->
  <!--progress-bar-info progress-bar-warning progress-bar-danger progress-bar-success 会给进度条不同颜色，不加就是最基本的-->
  <div class="progress-bar progress-bar-success" role="progressbar" 
   aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"   
   style="width: 90%;">
   <span class="sr-only">90% 完成（成功）</span>
  </div>
</div>
<!---堆叠的进度条-->
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" 
   aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
   style="width: 40%;">
   <span class="sr-only">40% 完成</span>
  </div>
  <div class="progress-bar progress-bar-info" role="progressbar" 
   aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"   
   style="width: 30%;">
   <span class="sr-only">30% 完成（信息）</span>
  </div>
  <div class="progress-bar progress-bar-warning" role="progressbar" 
   aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"   
   style="width: 20%;">
   <span class="sr-only">20% 完成（警告）</span>
  </div>
</div>

Media Tags

.media: This class allows multimedia (images, videos, audio) in media objects to be floated to the left or right of the content block.
.media-list: If you need a list where each item is part of an unordered list, you can use this class. Can be used for comment lists and article lists.

<ul class="media-list">
  <li class="media">
   <a class="pull-left" href="#">
     <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" 
     alt="通用的占位符图像">
   </a>
   <div class="media-body">
     <h4 class="media-heading">媒体标题</h4>
     <p>这是一些示例文本。这是一些示例文本。 
      这是一些示例文本。这是一些示例文本。
      这是一些示例文本。这是一些示例文本。
      这是一些示例文本。这是一些示例文本。
      这是一些示例文本。这是一些示例文本。</p>
     <!-- 嵌套的媒体对象 -->
     <div class="media">
      <a class="pull-left" href="#">
        <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" 
        alt="通用的占位符图像">
      </a>
      <div class="media-body">
        <h4 class="media-heading">嵌套的媒体标题</h4>
        这是一些示例文本。这是一些示例文本。
        这是一些示例文本。这是一些示例文本。
        这是一些示例文本。这是一些示例文本。
        这是一些示例文本。这是一些示例文本。
        这是一些示例文本。这是一些示例文本。
        <!-- 嵌套的媒体对象 -->
        <div class="media">
         <a class="pull-left" href="#">
           <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" 
           alt="通用的占位符图像">
         </a>
         <div class="media-body">
           <h4 class="media-heading">嵌套的媒体标题</h4>
           这是一些示例文本。这是一些示例文本。
           这是一些示例文本。这是一些示例文本。
           这是一些示例文本。这是一些示例文本。
           这是一些示例文本。这是一些示例文本。
           这是一些示例文本。这是一些示例文本。
         </div>
        </div>
      </div>
     </div>
     <!-- 嵌套的媒体对象 -->
     <div class="media">
      <a class="pull-left" href="#">
        <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" 
        alt="通用的占位符图像">
      </a>
      <div class="media-body">
        <h4 class="media-heading">嵌套的媒体标题</h4>
        这是一些示例文本。这是一些示例文本。
        这是一些示例文本。这是一些示例文本。
        这是一些示例文本。这是一些示例文本。
        这是一些示例文本。这是一些示例文本。
        这是一些示例文本。这是一些示例文本。
      </div>
     </div>
   </div>
  </li>
  <li class="media">
   <a class="pull-right" href="#">
     <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" 
     alt="通用的占位符图像">
   </a>
   <div class="media-body">
     <h4 class="media-heading">媒体标题</h4>
     这是一些示例文本。这是一些示例文本。
     这是一些示例文本。这是一些示例文本。
     这是一些示例文本。这是一些示例文本。
     这是一些示例文本。这是一些示例文本。
     这是一些示例文本。这是一些示例文本。
   </div>
  </li>
</ul>

List group

<!--一般列表组-->
<ul class="list-group">
  <li class="list-group-item">免费域名注册</li>
  <li class="list-group-item">
   <span class="badge">新</span>
   24*7 支持
  </li>
  <li class="list-group-item">每年更新成本</li>
  <li class="list-group-item">
   <span class="badge">新</span>
   折扣优惠
  </li>
</ul>
<!--自定义列表组-->
<div class="list-group">
  <a href="#" class="list-group-item active">
   <h4 class="list-group-item-heading">
     入门网站包
   </h4>
  </a>
  <a href="#" class="list-group-item">
   <h4 class="list-group-item-heading">
     免费域名注册
   </h4>
   <p class="list-group-item-text">
     您将通过网页进行免费域名注册。
   </p>
  </a>
  <a href="#" class="list-group-item">
   <h4 class="list-group-item-heading">
     24*7 支持
   </h4>
   <p class="list-group-item-text">
     我们提供 24*7 支持。
   </p>
  </a>
</div>

Panel

<div class="panel panel-default"><!--可替代panel-default的类：panel-primary，panel-success，panel-info，panel-warning，panel-danger-->
  <div class="panel-heading">
   <h3 class="panel-title">
     带有 title 的面板标题
   </h3>
  </div>
  <div class="panel-body">
   面板内容
  </div>
  <!---带表格-->
  <table class="table">
   <th>产品</th><th>价格 </th>
   <tr><td>产品 A</td><td>200</td></tr>
   <tr><td>产品 B</td><td>400</td></tr>
  </table>
  <!---带列表组-->
  <ul class="list-group">
   <li class="list-group-item">免费域名注册</li>
   <li class="list-group-item">免费 Window 空间托管</li>
   <li class="list-group-item">图像的数量</li>
   <li class="list-group-item">24*7 支持</li>
   <li class="list-group-item">每年更新成本</li>
  </ul>
   <div class="panel-footer">面板脚注</div>
</div>

well effect

Well is a container that causes content to appear recessed or illustrated. dc6dce4a544fdca2df29d5ac0ea9906b

<div class="well well-lg">您好，我在大的 Well 中！</div>
<div class="well well-sm">您好，我在小的 Well 中！</div>

The above is the entire content of this article, I hope it will be helpful to everyone’s study.