简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > js tutoriel > le corps du texte

Comment utiliser CSS dans les compétences Bootstarp_javascript

WBOY
Libérer： 2016-05-16 15:15:11
original
1259 Les gens l'ont consulté

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>
Copier après la connexion

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">//禁止页面缩放（可选）
Copier après la connexion

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

    La ligne
  • doit être placée dans le conteneur et est utilisée pour créer des groupes horizontaux de colonnes.
  • Les classes de grille prédéfinies, telles que .row et .col-xs-4, peuvent être utilisées pour créer rapidement des dispositions de grille.

  • Les lignes et les colonnes peuvent être imbriquées les unes dans les autres, et l'adaptation après l'imbrication est basée sur l'élément parent, et non sur la largeur de l'appareil
  • Pour créer trois colonnes égales, utilisez trois col-xs-4, ou 12 col-xs-1 pour 12 colonnes. 
<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列，然后从右往左插入元素
Copier après la connexion
  • Les requêtes multimédias sont des "règles CSS conditionnelles" très sophistiquées. Cela ne fonctionne qu'avec certains CSS en fonction de certaines conditions spécifiées. Si ces conditions sont remplies, le style correspondant est appliqué.

@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

  • À propos du texte
<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>红
Copier après la connexion

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>
Copier après la connexion

  • À l'aide de la balise , vous pouvez afficher les informations de contact sur votre page Web.
  • Utilisez la balise comme citation
<blockquote>这是一个带有源标题的引用。<small>Someone famous in Source Title</small></blockquote>
Copier après la connexion
  • list-unstyled est utilisé pour la liste ul sans style, list-inline est utilisé pour la liste horizontale ul
  • le pré-défilement rend le pré-défilement
  • 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&#63;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&#63;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

  • Ajoutez l'attribut role="form" au formulaire et la structure de formulaire de base de Bootstrap sera appliquée. À ce stade, la valeur par défaut est un formulaire vertical
    • .
  • Placez les étiquettes et les contrôles dans un
    avec la classe .form-group. Ceci est nécessaire pour obtenir un espacement optimal.
  • Ajoutez la classe .form-control à tous les éléments de texte ,