Disposition de base Bootstrap que vous devez acquérir tous les jours_compétences javascript

Cette fois, je veux principalement en savoir plus sur la composition. La plupart de ces éléments existent également dans les balises de base du HTML, c'est donc relativement simple. Afin de garantir l'exhaustivité de la série, je vais également la réviser et l'enregistrer. Le contenu principal est le suivant :

• 1.Titre
• 2. Corps de la page
• 3.Soulignement
• 4.Abréviations
• 5. Adresse
• 6. Citation
• 7. Liste

1. Titre
Toutes les balises de titre en HTML, de

à

De plus, des classes de .h1 à .h6 sont fournies pour donner au texte de l'attribut en ligne un style de titre.

<div class="container"> 
  <h1 id="标题">标题</h1>
  <h1 id="h-Bootstrap-heading">h1. Bootstrap heading</h1>
  <h2 id="h-Bootstrap-heading">h2. Bootstrap heading</h2>
  <h3 id="h-Bootstrap-heading">h3. Bootstrap heading</h3>
  <h4 id="h-Bootstrap-heading">h4. Bootstrap heading</h4>
  <h5 id="h-Bootstrap-heading">h5. Bootstrap heading</h5>
  <h6 id="h-Bootstrap-heading">h6. Bootstrap heading</h6>
 </div> 

Voyons l'effet directement

Le titre peut également contenir la balise ou l'élément .small , qui peut être utilisé pour marquer les sous-titres.

 <div class="container"> 
  <h1 id="标题">标题</h1>
  <h1 id="h-Bootstrap-heading">h1. Bootstrap heading</h1><small>Secondary text</small>
  <h2 id="h-Bootstrap-heading">h2. Bootstrap heading</h2><small>Secondary text</small>
  <h3 id="h-Bootstrap-heading">h3. Bootstrap heading</h3><small>Secondary text</small>
  <h4 id="h-Bootstrap-heading">h4. Bootstrap heading</h4><small>Secondary text</small>
  <h5 id="h-Bootstrap-heading">h5. Bootstrap heading</h5><small>Secondary text</small>
  <h6 id="h-Bootstrap-heading">h6. Bootstrap heading</h6><small>Secondary text</small>
 </div> 

2. Corps de la page
Bootstrap définit la taille de police globale sur 14 pixels et la hauteur de ligne sur 1,428. Ces propriétés sont affectées directement à

De plus,

(paragraphe) est également défini avec une marge inférieure égale à 1/2 hauteur de ligne (c'est-à-dire 10 px).

 <h1 id="页面主体">页面主体</h1>
  <div style="border:1px solid ">
   <p style="border:1px solid ">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
 
 Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
 
 Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
 </div>

C'est évident grâce à l'affichage des effets.

Corps du texte principal
Les paragraphes peuvent être mis en surbrillance en ajoutant .lead.

 <h1 id="Lead-Body-Copy">Lead Body Copy</h1>
  <div style="border:1px solid ">
   <p class="lead" style="border:1px solid ">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
 
 Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
 
 Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
 </div>
 <h1></h1>

Vous pouvez voir l'effet évident en le comparant avec le corps principal de la page ci-dessus.

3.Soulignement
Utilisez simplement des balises HTML pour mettre l’accent et donnez-leur un peu de style.
1. Petit texte
Pour le texte en ligne ou en bloc qui n'a pas besoin d'être souligné, utilisez la balise pour l'envelopper, et le texte qu'il contient sera défini à 85 % de la taille de police du conteneur parent. Les éléments imbriqués dans l'élément titre sont définis avec des tailles de police différentes.
Vous pouvez également attribuer des éléments en ligne .small à la place des balises

<small>This line of text is meant to be treated as fine print.</small>

2. Concentration
Mettez l'accent sur un morceau de texte en augmentant le poids de la police.

<strong>rendered as bold text</strong>

3.Italique
Soulignez un morceau de texte en italique.

<em>rendered as italicized text</em>　　

4. Aligner la classe
Grâce à la classe d'alignement de texte, vous pouvez réaligner le texte facilement et commodément.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

Évidemment, la première ligne est alignée à gauche, la deuxième ligne est centrée et la troisième ligne est alignée à droite.
5. Accent mis sur la classe
Ces cours utilisent la couleur pour exprimer l'accent. Peut également être appliqué aux liens afin que lorsque la souris survole le lien, sa couleur devienne plus sombre, tout comme le style de lien par défaut.

<h1 id="强调Class">强调Class</h1>
 <p class="text-muted">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
 <p class="text-primary">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
 <p class="text-success">.Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
 <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna..</p>
 <p class="text-warning">Maecenas sed diam eget risus varius blandit sit amet non magna..</p>
 <p class="text-danger">.Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
 <h1></h1>

4. Vignettes
Le contenu complet sera affiché lorsque la souris passera sur les abréviations et les abréviations. Bootstrap implémente des styles améliorés pour l'élément HTML L'élément abréviation a un attribut title et apparaît sous la forme d'un léger cadre en pointillés lorsque la souris est déplacée dessus, il se transforme en un pointeur avec un "point d'interrogation". Si vous souhaitez voir le contenu complet, vous pouvez passer la souris sur l'abréviation, mais vous devez inclure l'attribut title.
Abréviations de base
Si vous souhaitez voir le contenu complet, vous pouvez passer la souris sur l'abréviation, mais vous devez inclure l'attribut title.

<abbr title="attribute">attr</abbr>

Je peux voir l’effet, mais je ne peux pas prendre de capture d’écran.
Initialisme
L'ajout de .initialism à une abréviation réduira sa taille de police.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

Téléchargez simplement le code et voyez l'effet vous-même. ​
5. Adresse
Laissez les informations de contact être présentées dans un format qui se rapproche le plus de celui d’une utilisation quotidienne. Ajoutez
à la fin de chaque ligne pour conserver le style souhaité.

<address>
 <strong>Twitter, Inc.</strong><br>
 795 Folsom Ave, Suite 600<br>
 San Francisco, CA 94107<br>
 <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
 <strong>Full Name</strong><br>
 <a href="mailto:#">first.last@example.com</a>
</address>

 

六、引用
在你的文档中引用其他来源的内容。
默认样式的引用
将任何HTML裹在

之中即可表现为引用。对于直接引用，我们建议用

标签。

<blockquote>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

 

引用选项
对于标准样式的

，可以通过几个简单的变体就能改变风格和内容。
命名来源:添加标签来注明引用来源。来源名称可以放在标签里面。

<blockquote>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote>

会多一个Source Title
另一种展示风格

使用.pull-right可以让引用展现出向右侧移动、对齐的效果。   

 <blockquote class="pull-right">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 </blockquote>

向右对齐移动了额，当然也有相应的pull-left。　　
七、列表
 无序列表 
顺序无关紧要的一列元素。

 <ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
 </ul>

这个也很明显和Html的一样。
有序列表
顺序至关重要的一组元素。

<ol>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
 </ol>

同理有序列表
无样式列表
移除了默认的list-style样式和左侧外边距的一组元素（只针对直接子元素）。这这是针对直接子元素，也就是说，你需要对所有嵌套的列表都添加此class才能具有同样的样式。

<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
 </ul>

内联列表
通过设置display: inline-block;并添加少量的内补，将所有元素放置于同一列。

<ul class="list-inline">
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
  </ul>

效果当然就是在一行了。

以上就是Bootstrap基础排版的全部内容，希望大家好好阅读，再结合相关文章进行扩展性的学习。