Analyse complète des compétences application_javascript du composant de mise en page Bootstrap

L'exemple de cet article présente l'application des composants de mise en page Bootstrap et est partagé avec tout le monde pour votre référence. Le contenu spécifique est le suivant

.

Exemples d'application d'icônes de police

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

Exemple de menu déroulant

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

Barre d'outils de boutons et groupe de boutons

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

Menu déroulant des boutons

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

Groupe de zones de saisie dans le formulaire

<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 (page à onglet)

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

Barre de navigation

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

Barre de navigation réactive

La partie jaune doré suivante est la différence avec la barre de navigation générale

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

Fil d'Ariane

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

Pagination et tournage de pages

<!--以下所有示例都可以用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>

Balises

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

Insigne

Les badges sont plus élégants que les étiquettes et sont principalement utilisés pour mettre en évidence les éléments nouveaux ou non lus

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

Écran extra large

<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就会得到一个不带圆角且占更多宽度的超大屏幕-->

Exemple de titre de page

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

Vignette

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

Avertissement

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

Barre de progression

<!--一般进度条-->
<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>

Étiquettes médias

.media : Cette classe permet de faire flotter le multimédia (images, vidéos, audio) dans les objets multimédias à gauche ou à droite du bloc de contenu.
.media-list : Si vous avez besoin d'une liste où chaque élément fait partie d'une liste non ordonnée, vous pouvez utiliser cette classe. Peut être utilisé pour les listes de commentaires et les listes d’articles.

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

Groupe de listes

<!--一般列表组-->
<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>

Panneau

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

effet bien

Well est un conteneur qui fait apparaître le contenu en retrait ou illustré dc6dce4a544fdca2df29d5ac0ea9906b

.

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

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.