Bootstrap utilise certains éléments HTML5 et propriétés CSS, il doit donc utiliser le type de document HTML5.
<!DOCTYPE html> <html lang="zh-CN"> ... </html>
Afin de rendre le site Web développé par Bootstrap adapté aux mobiles et de garantir une bonne mise à l'échelle du dessin et de l'écran tactile, vous devez ajouter la balise méta viewport à l'en-tête de la page Web, comme indiqué ci-dessous :
<meta name="viewport" content="width=device-width, //视口宽度为设备宽度
initial-scale=1.0, //缩放程度
maximum-scale=1.0, //最大缩放级别（可选）
user-scalable=no">//禁止页面缩放（可选）
Bootstrap utilise Normalize pour établir une cohérence entre navigateurs. Normalize.css est un petit fichier CSS qui offre une meilleure cohérence entre navigateurs dans le style par défaut des éléments HTML.
À propos de la mise en page
Bootstrap fournit un système de grille fluide réactif et mobile qui est automatiquement divisé en 12 colonnes maximum à mesure que la taille de l'écran ou de la fenêtre d'affichage augmente.
img-responsive est utilisé pour les éléments img
Élément conteneur utilisé pour envelopper le contenu sur la page
<div class="container"> <div class="row"> <div class="col-xs-6 col-md-2 col-md-offset-1"></div> <div class="col-xs-6 col-md-3"></div> <div class="col-xs-6 col-md-3"></div> <div class="col-xs-6 col-md-3"></div> </div> <div class="row">...</div> </div> <div class="container">.... <!--以上代码在手机上就是两行两列，在电脑上是一行四列，其中第一列前面有空白，比其它列宽度小三分之一--> //可使用.col-md-push-* 和 .col-md-pull-* 这种类设定显示，col-md-push-6按照我个人的理解，是在左面浮动了6列，然后再插入元素，col-md-pull-3则是在右边浮动了3列，然后从右往左插入元素
@media (min-width : @screen-sm-min) et (max-width : @screen-sm-max) { ... }
//Pour tous les appareils avec min-width : @screen-sm-min, si la largeur de l'écran est inférieure à @screen-sm-max, un certain traitement sera effectué.
À propos de la composition
<small>本行内容是在标签内</small><br> <strong>本行内容是在标签内</strong><br> <em>本行内容是在标签内，并呈现为斜体</em><br> <p class="text-left">向左对齐文本</p> <p class="text-center">居中对齐文本</p> <p class="text-right">向右对齐文本</p> <p class="text-muted">本行内容是减弱的</p>灰 <p class="text-primary">本行内容带有一个 primary class</p>蓝 <p class="text-success">本行内容带有一个 success class</p>绿 <p class="text-info">本行内容带有一个 info class</p>深蓝 <p class="text-warning">本行内容带有一个 warning class</p>黄 <p class="text-danger">本行内容带有一个 danger class</p>红
Bootstrap définit le style de l'élément comme une bordure en pointillés qui apparaît au bas du texte, le texte intégral apparaissant lorsque la souris passe dessus (à condition que vous ajoutiez du texte pour l'élément < abbr> attribut de titre). Pour obtenir une taille de police plus petite pour le texte, ajoutez .initialism à .
<abbr title="World Wide Web">WWW</abbr><br> <abbr title="Real Simple Syndication" class="initialism">RSS</abbr>
<blockquote>这是一个带有源标题的引用。<small>Someone famous in Source Title</small></blockquote>
affiche le code en ligne, affiche plusieurs lignes de code</strong></span><br />
</li>
</ul>
<p><strong>À propos du formulaire</strong></p>
<p style="text-align: center"><img id="theimg" alt="" onclick="window.open(this.src)" src="http://files.jb51.net/file_images/article/201602/201621793115393.png?201611793123" /></p>
<p style="text-align: center"><img id="theimg" alt="" onclick="window.open(this.src)" src="http://files.jb51.net/file_images/article/201602/201621793141588.png?201611793156" /></p>
<p>En enveloppant n'importe quel .table dans une classe .table-responsive, vous pouvez faire défiler le tableau horizontalement pour l'adapter aux petits appareils (moins de 768 px). Vous ne verrez aucune différence lors de l'affichage sur de grands appareils d'une largeur supérieure à 768 pixels. <br />
</p>
<div class="jb51code">
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;">
<div class="table-responsive">
<table class="table">
<caption>响应式表格布局</caption>
<thead>
<tr>
<th>产品</th>
<th>付款日期</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td>产品1</td>
<td>23/11/2013</td>
<td>待发货</td>
</tr>
</tbody>
</table>
</div>
Copier après la connexionÀ propos du formulaire