Introduction à Bootstrap


Qu'est-ce que Bootstrap ?

Bootstrap est un framework front-end pour le développement rapide d'applications Web et de sites Web. Bootstrap est basé sur HTML, CSS et JAVASCRIPT.

Historique

Bootstrap a été développé par Mark Otto et Jacob Thornton de Twitter. Bootstrap est un produit open source publié sur GitHub en août 2011.

Pourquoi utiliser Bootstrap ?

  • Mobile-first  : depuis Bootstrap 3, le framework inclut des styles mobiles-first dans toute la bibliothèque.

  • Prise en charge des navigateurs : tous les principaux navigateurs prennent en charge Bootstrap.

    Internet Explorer

  • Facile pour démarrer : Tant que vous avez des connaissances de base en HTML et CSS, vous pouvez commencer à apprendre Bootstrap.

  • Conception réactive : le CSS réactif de Bootstrap s'adapte aux ordinateurs de bureau, aux tablettes et aux téléphones mobiles. Pour plus d’informations sur la conception réactive, consultez Bootstrap Responsive Design.

  • Il fournit une solution concise et unifiée permettant aux développeurs de créer des interfaces.

  • Il contient de puissants composants intégrés et est facile à personnaliser.

  • Il propose également une personnalisation basée sur le Web.

  • Il est open source.

Contenu du package Bootstrap

  • Structure de base : Bootstrap fournit un package avec un système de grille, un style de lien, la base structure du fond. Ceci sera expliqué en détail dans la section Structure de base de Bootstrap.

  • CSS : Bootstrap est livré avec les fonctionnalités suivantes : paramètres CSS globaux, définition de styles d'éléments HTML de base, classes extensibles et système de grille avancé. Ceci sera expliqué en détail dans la section Bootstrap CSS.

  • Composants : Bootstrap contient plus d'une douzaine de composants réutilisables pour la création d'images, de menus déroulants, de navigation, de boîtes d'alerte, de boîtes contextuelles, etc. Ceci sera expliqué en détail dans la section Composants de mise en page.

  • Plugins JavaScript : Bootstrap comprend plus d'une douzaine de plugins jQuery personnalisés. Vous pouvez inclure tous les plug-ins directement ou les inclure individuellement. Ceci sera expliqué en détail dans la section Bootstrap Plugin.


  • Personnalisation : Vous pouvez personnaliser les composants Bootstrap, les variables LESS et les plugins jQuery pour obtenir votre propre version.


Exemples en ligne

Le tutoriel Bootstrap sur ce site contient des centaines d'exemples.

Vous pouvez utiliser notre éditeur en ligne pour modifier le code en ligne et cliquer sur le bouton Exécuter pour voir les résultats.

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
  <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="jumbotron">
    <h1>我的第一个 Bootstrap 页面</h1>
    <p>重置窗口大小，查看响应式效果！</p> 
  </div>
  <div class="row">
    <div class="col-sm-4">
      <h3>第一列</h3>
      <p> php中文网</p>
      <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
    </div>
    <div class="col-sm-4">
      <h3>第二列</h3>
      <p> php中文网</p>
      <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
    </div>
    <div class="col-sm-4">
      <h3>第三列</h3>        
      <p> php中文网</p>
      <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
    </div>
  </div>
</div>

</body>
</html>

Exécuter des instances»

Cliquez sur le bouton « Exécuter des instances » pour afficher les instances en ligne

Plus d'instances

Instances 

<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8"> 
    <title>Bootstrap 实例</title>
    <!-- 包含头部信息用于适应不同设备 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 包含 bootstrap 样式表 -->
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
  </head>

  <body>
    <div class="container">
      <h2>表格</h2>
      <p>创建响应式表格 (将在小于768px的小型设备下水平滚动)。另外：添加交替单元格的背景色：</p>      
      <div class="table-responsive">          
       <table class="table table-striped table-bordered">
         <thead>
           <tr>
             <th>#</th>
             <th>Name</th>
             <th>Street</th>
           </tr>
         </thead>
         <tbody>
           <tr>
             <td>1</td>
             <td>Anna Awesome</td>
             <td>Broome Street</td>
           </tr>
           <tr>
             <td>2</td>
             <td>Debbie Dallas</td>
             <td>Houston Street</td>
           </tr>
           <tr>
             <td>3</td>
             <td>John Doe</td>
             <td>Madison Street</td>
           </tr>
         </tbody>
       </table>
      </div>

      <h2>图像</h2>
      <p>创建相应式图片(将扩展到父元素)。 另外：图片以椭圆型展示：</p>            
      <img src="cinqueterre.jpg" class="img-responsive img-circle" alt="Cinque Terre" width="304" height="236"> 
      
      <h2>图标</h2>
      <p>插入图标:</p>      
      <p>云图标: <span class="glyphicon glyphicon-cloud"></span></p>      
      <p>信件图标: <span class="glyphicon glyphicon-envelope"></span></p>            
      <p>搜索图标: <span class="glyphicon glyphicon-search"></span></p>
      <p>打印图标: <span class="glyphicon glyphicon-print"></span></p>      
      <p>下载图标：<span class="glyphicon glyphicon-download"></span></p>      
    </div>

    <!-- JavaScript 放置在文档最后面可以使页面加载速度更快 -->
    <!-- 可选: 包含 jQuery 库 -->
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- 可选: 合并了 Bootstrap JavaScript 插件 -->
    <script src="http://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>

</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Cliquez Bouton "Essayez-le" pour voir comment cela fonctionne.