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é

.

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

Étiquettes associées：

bootstrap 布局组件

source：php.cn

Article précédent：Code d'effet pop-up d'image spatiale QQ implémenté par les compétences JS_javascript Article suivant：Plug-in de fonction de stockage temporaire du formulaire JQUERY Sharing_jquery

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur

• Qu'est-ce qu'une NullPointerException et comment y remédier ?
  2024-10-22 09:46:29
• De novice à codeur : votre voyage commence par les principes fondamentaux du C
  2024-10-13 13:53:41
• Débloquer le développement Web avec PHP : guide du débutant
  2024-10-12 12:15:51
• Démystifier C : un chemin clair et simple pour les nouveaux programmeurs
  2024-10-11 22:47:31
• Libérez votre potentiel de codage : programmation C pour les débutants absolus
  2024-10-11 19:36:51
• Libérez votre programmeur intérieur : C pour les débutants absolus
  2024-10-11 15:50:41
• Automatisez votre vie avec C : scripts et outils pour les débutants
  2024-10-11 15:07:41
• PHP Made Easy : vos premiers pas dans le développement Web
  2024-10-11 14:21:21
• Construisez n'importe quoi avec Python : un guide du débutant pour libérer votre créativité
  2024-10-11 12:59:11
• La clé du codage : libérer la puissance de Python pour les débutants
  2024-10-11 12:17:31

Derniers numéros

La page ne peut soudainement plus extraire le CSS ou le bootstrap Je suis donc en train de développer une page, j'en ai fait une partie hier et ça a très bi...

Depuis 2024-04-06 21:58:04

0

1

800

Comment résoudre le mystérieux espace vide en bas de page en CSS J'essaie de créer une page Web simple en utilisant Bootstrap et D3, mais je ne sais pas co...

Depuis 2024-04-06 20:22:15

0

1

454

Personnalisez l'apparence des en-têtes accordéon Bootstrap à l'aide de la classe CollapseDisplay Je souhaite styliser le titre de la carte d'un panneau avec la classeeffondrementshow. Dan...

Depuis 2024-04-06 12:53:11

0

1

376

Le commutateur Bootstrap ne fonctionne pas correctement lorsque la page Web est redimensionnée Description :<navxmlns:sec="http://www.thymeleaf.org/extras/spring-security"c...

Depuis 2024-04-05 08:45:39

0

1

3443

Afficher les fichiers PDF AWS en mode Bootstrap dans Laravel J'ai téléchargé l'URL AWS comme https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/6...

Depuis 2024-04-04 22:16:18

0

1

1450

Rubriques connexes

Plus>

• Que faire si une erreur se produit dans le script de la page actuelle
• Comment ouvrir le registre
• Introduction à la signification des fenêtres de téléchargement cloud
• Comment configurer les variables d'environnement Tomcat
• Comment démarrer le service SVN
• La différence entre UCOS et Linux
• Solution au problème xlive.dll manquant
• Quel est le format png