Chapitre 2 : Compétences style_javascript de mise en page de page Bootstrap

Bootstrap, de Twitter, est actuellement le framework front-end le plus populaire. Bootstrap est basé sur HTML, CSS et JAVASCRIPT. Il est simple et flexible, ce qui accélère le développement Web.

Points d'apprentissage :

1.Mise en page

Dans cette leçon, nous apprendrons principalement le style de mise en page dans le style CSS global Bootstrap, y compris le contenu régulier tel que le titre, le corps de la page, l'alignement et la liste.

1. Mise en page

Bootstrap fournit des styles de mise en page de page couramment conçus que les développeurs peuvent utiliser.

1. Corps de la page

Bootstrap définit la taille de police globale à 14 px et la hauteur de ligne à 1,428 (c'est-à-dire 20 px) ;

l'élément de paragraphe est défini sur 1/2 hauteur de ligne (c'est-à-dire 10 px) ; 333.

//创建包含段落突出的文本
<p>Bootstrap 框架</p>
<p class="lead">Bootstrap 框架</p>
<p>Bootstrap 框架</p>
<p>Bootstrap 框架</p>
<p>Bootstrap 框架</p> 

2. Titre

//从 h1 到 h6
<h1>Bootstrap 框架</h1>//36px
<h2>Bootstrap 框架</h2>//30px
<h3>Bootstrap 框架</h3>//24px
<h4>Bootstrap 框架</h4>//18px
<h5>Bootstrap 框架</h5>//14px
<h6>Bootstrap 框架</h6>//12px 

Nous avons appris en visualisant des éléments dans Firebug que Bootstrap a reconstruit les styles CSS pour h1 ~ h6 respectivement et prend également en charge la définition d'élément en ligne ordinaire class=(.h1 ~ h6) pour obtenir la même fonction.

//内联元素使用标题字体
<span class="h1">Bootstrap</span> 

Remarque : L'affichage des éléments via Firebug montre également que la couleur de la police, le style de police et la hauteur de ligne sont tous fixes, garantissant ainsi l'uniformité, tandis que les éléments natifs seront déterminés en fonction des paramètres intégrés du système. police préférée. La couleur est la plus noire.

Entre les éléments h1 ~ h6, vous pouvez également intégrer un petit élément en tant que sous-titre,

//在标题元素内插入 small 元素
<h1>Bootstrap 框架 <small>Bootstrap 小标题</small></h1>
<h2>Bootstrap 框架 <small>Bootstrap 小标题</small></h2>
<h3>Bootstrap 框架 <small>Bootstrap 小标题</small></h3>
<h4>Bootstrap 框架 <small>Bootstrap 小标题</small></h4>
<h5>Bootstrap 框架 <small>Bootstrap 小标题</small></h5>
<h6>Bootstrap 框架 <small>Bootstrap 小标题</small></h6> 

Vu via Firebug, nous avons constaté que la taille du petit élément sous h1 ~ h3 ne représente que 65% de l'élément parent. Ensuite, par calcul (voir le style calculé par Firebug), le petit sous h1 ~ h3 est de 23,4. px, 19,5px, 15,6px ; la taille des petits éléments sous h4 ~ h6 ne représente respectivement que 75 % de l'élément parent : 13,5px, 10,5px, 9px. Le petit style sous h1 ~ h6 a également été modifié, la couleur devient gris clair : #777, la hauteur de ligne est de 1 et l'épaisseur est de 400.

3. Éléments de texte en ligne

//添加标记，<mark>元素或.mark 类
<p>Bootstrap<mark>框架</mark></p> 
//各种加线条的文本
<del>Bootstrap 框架</del>//删除的文本
<s>Bootstrap 框架</s>//无用的文本
<ins>Bootstrap 框架</ins>//插入的文本
<u>Bootstrap 框架</u>//效果同上，下划线文本 
//各种强调的文本
<small>Bootstrap 框架</small>//标准字号的 85%
<strong>Bootstrap 框架</strong>//加粗 700
<em>Bootstrap 框架</em>//倾斜 

4. Alignement

//设置文本对齐
<p class="text-left">Bootstrap 框架</p>//居左
<p class="text-center">Bootstrap 框架</p>//居中
<p class="text-right">Bootstrap 框架</p>//居右
<p class="text-justify">Bootstrap 框架</p>//两端对齐，支持度不佳<p class="text-nowrap">Bootstrap 框架</p>//不换行 

5. Capitalisation

//设置英文文本大小写
<p class="text-lowercase">Bootstrap 框架</p> //小写
<p class="text-uppercase">Bootstrap 框架</p> //大写
<p class="text-capitalize">Bootstrap 框架</p>//首字母大写

6. Abréviations

//缩略语
Bootstrap<abbr title="Bootstrap" class="initialism">框架</abbr>

7. Texte de l'adresse

//设置地址，去掉了倾斜，设置了行高，底部 20px
<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>

8. Texte de citation

//默认样式引用，增加了做边线，设定了字体大小和内外边距
<blockquote>
　　Bootstrap 框架
</blockquote> 
//反向
<blockquote class="blockquote-reverse ">
　　Bootstrap 框架
</blockquote>

9. Disposition de la liste

//移出默认样式
<ul class="list-unstyled">
　　<li>Bootstrap 框架</li>
　　<li>Bootstrap 框架</li>
　　<li>Bootstrap 框架</li>
　　<li>Bootstrap 框架</li>
　　<li>Bootstrap 框架</li>
</ul> 
//设置成内联
<ul class="list-inline">
　　<li>Bootstrap 框架</li>
　　<li>Bootstrap 框架</li>
　　<li>Bootstrap 框架</li>
　　<li>Bootstrap 框架</li>
　　<li>Bootstrap 框架</li>
</ul> 
//水平排列描述列表
<dl class="dl-horizontal">
　　<dt>Bootstrap</dt>
　　<dd>Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。</dd>
</dl> 

10.Code

//内联代码
<code><section></code> 
//用户输入
press <kbd>ctrl + ,</kbd> 
//代码块
<pre class="brush:php;toolbar:false"><p>Please input...</p>

Bootstrap énumère également pour représenter les variables de balise et pour représenter la sortie du programme, mais il ne réécrit pas le CSS.

Ce qui précède est la connaissance du style de mise en page Bootstrap introduite par l'éditeur. J'espère que cela sera utile à tout le monde !