communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > Utiliser Bootstrap pour la typographie

Utiliser Bootstrap pour la typographie

PHP中文网
Libérer： 2017-06-22 11:12:42
original
1547 Les gens l'ont consulté

Mots précédents

<p> Cet article présentera en détail le contenu lié à la typographie dans Bootstrap

<p>

Titre

<p>[h]

<p> HTML Toutes les balises de titre de <h1> à <h6> peuvent être utilisées

<p> Par défaut, la taille de police de h1 à h6 est la suivante 

2em -> 1.5em -> 1.17em -> 1em -> 0.83em -> 0.67em;
Copier après la connexion
<p>　Dans la situation initiale, 1em = 16px, la conversion est la suivante 

32px -> 24px -> 18.72px -> 16px -> 13.28px -> 10.72px;
Copier après la connexion
<p>Boostrap a réinitialisé la taille de police de h1-h6, comme indiqué ci-dessous 

36px -> 30px -> 24px -> 18px -> 14px -> 12px;
Copier après la connexion
<p> De plus, les classes .h1 à .h6 sont également fournies pour donner au texte de l'attribut en ligne un style de titre En plus des différents attributs d'affichage, d'autres attributs du même style. comme <h1> à <h6> 

h1,.h1{
    font-size: 36px;
    margin-top: 20px;
    margin-bottom: 10px;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}
Copier après la connexion
<p> [small]

<p> Vous pouvez également inclure des balises <small> ou attribuer des .small éléments du La classe peut être utilisée pour marquer les sous-titres. La balise <small> a le même style que l'élément de classe .small 

h1 small,.h1 small, h1 .small, .h1 .small{
    font-size: 65%;
    font-weight: normal;
    line-height: 1;
    color: #777;
}
Copier après la connexion
<h1>标题一 <small>副标题一</small></h1><h2>标题二 <small>副标题二</small></h2><h3>标题三 <small>副标题三</small></h3><h4>标题四 <small>副标题四</small></h4><h5>标题五 <small>副标题五</small></h5><h6>标题六 <small>副标题六</small></h6>
Copier après la connexion
<p><br>

<p>

Paragraphe

<p>[body]

<p>Par défaut, la taille de la police de la page est de 16 px et la hauteur de ligne (sous chrome) est de 1,334

<p>Bootstrap will global font-size est défini sur 14px et line-height est défini sur 20px. Ces attributs sont directement affectés à l'élément <body> et à tous les éléments de paragraphe 

<span style="color: #000000;">body{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #333;
    background-color: #fff;<br>　　 margin:0;
}</span>
Copier après la connexion
<p>[p]

<p> De plus, l'élément <p> (paragraphe) est également défini sur une marge inférieure (marge) de 1/2 hauteur de ligne (c'est-à-dire 10 px) 

p{
    margin: 0 0 10px;
}
Copier après la connexion
<p>[.lead]

<p> En ajoutant le .lead classe, vous pouvez mettre en surbrillance le paragraphe 

.lead {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.4;
}
Copier après la connexion
<p>一般内容</p><p class="lead">中心内容</p><p>一般内容</p>
Copier après la connexion
<p><br>

<p>

Texte en ligne

<p> 【Marquer le texte】

<p> Le texte doit être marqué, utilisez la balise 

mark, .mark {
    padding: .2em;
    background-color: #fcf8e3;
}
Copier après la connexion
<p>【Supprimer le texte】

<p> Pour le texte supprimé, utilisez la balise

<p>【Texte inutile】

<p> Pour le texte inutile, utilisez la balise

<p>【Insérer du texte】

<p> Extra Pour insérer du texte, utilisez la balise

<p>【Texte souligné】

<p> Pour ajouter du soulignement au texte, utilisez la balise 🎜>【Petit texte】

<p> Pour le texte en ligne ou en bloc qui n'a pas besoin d'être souligné, utilisez la balise <small> taille de police du conteneur parent. Les éléments <small> imbriqués dans l'élément titre sont définis avec des tailles de police différentes.

<p> Vous pouvez également donner aux éléments en ligne la classe .small pour remplacer n'importe quel élément <small>

<p>

small, .small {
    font-size: 85%;
}
Copier après la connexion
【Emphasis】
<p> En ajoutant font -weight value met l'accent sur un morceau de texte

<p>【italique】

<p> Utilisez l'italique pour mettre en valeur un morceau de texte

<p> [Remarque] Vous pouvez utiliser en toute sécurité dans l'étiquette HTML5. est utilisé pour mettre en évidence des mots ou des phrases sans aucune emphase ; tandis que la balise est principalement utilisée pour le discours, le vocabulaire technique, etc.

<p>

<div>You can use the mark tag to <mark>highlight</mark> text.</div><div><del>This line of text is meant to be treated as deleted text.</del></div><div><s>This line of text is meant to be treated as no longer accurate.</s></div><div><ins>This line of text is meant to be treated as an addition to the document.</ins></div><div><u>This line of text will render as underlined</u></div><div><small>This line of text is meant to be treated as fine print.</small></div><div><strong>rendered as bold text</strong></div><div><em>rendered as italicized text</em></div>
Copier après la connexion
<p><br>

<p>Alignement

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

<p>

.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.text-justify {
    text-align: justify;
}
.text-nowrap {
    white-space: nowrap;
}
Copier après la connexion
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
Copier après la connexion
<p><br>

<p>Cas

Grâce à ces classes, vous pouvez changer la casse du texte

<p>

.text-lowercase {
    text-transform: lowercase;
}
.text-uppercase {
    text-transform: uppercase;
}
.text-capitalize {
    text-transform: capitalize;
}
Copier après la connexion
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
Copier après la connexion
<p><br>

<p>Abréviations

Lorsque vous survolez les abréviations et les abréviations, le contenu complet sera affiché. implémente des styles améliorés pour l'élément HTML

. L'élément d'abréviation a l'attribut <p> 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 (également visible pour les utilisateurs utilisant une technologie d'assistance), mais vous devez inclure l'attribut titre <abbr>title[Abréviation de base]

<p>

abbr[title], abbr[data-original-title] {
    cursor: help;
    border-bottom: 1px dotted #777;
}
Copier après la connexion
[Acronyme]
<p> L'ajout de la classe

à l'abréviation peut réduire légèrement la taille de la police<p>.initialism

.initialism {
    font-size: 90%;
    text-transform: uppercase;
}
Copier après la connexion
<abbr title="attribute">attr</abbr>
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
Copier après la connexion
<p><br>

<p>Adresse

Que les informations de contact soient présentées dans un format le plus proche d'une utilisation quotidienne. Ajoutez

à la fin de chaque ligne pour conserver le style souhaité <p><br>

address {
    margin-bottom: 20px;
    font-style: normal;
    line-height: 1.42857143;
}
Copier après la connexion
<p><br>

<p> 

引用

<p>【默认样式的引用】 

<p>　　将任何 HTML 元素包裹在
中即可表现为引用样式。对于直接引用，建议用 <p> 标签

blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
}
Copier après la connexion
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
Copier après la connexion
<p><br>

<p>【多种引用样式】

<p>　　对于标准样式的
，可以通过几个简单的变体就能改变风格和内容

<p>　　1、命名来源

<p>　　添加
用于标明引用来源。来源的名称可以包裹进 标签中

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
Copier après la connexion
<p>　　2、另一种展示风格

<p>　　通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果

<blockquote class="blockquote-reverse">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
Copier après la connexion
.blockquote-reverse, blockquote.pull-right {
    padding-right: 15px;
    padding-left: 0;
    text-align: right;
    border-right: 5px solid #eee;
    border-left: 0;
}
Copier après la connexion
<p><br>

<p> 

列表

<p>【无序列表】

<p>　　排列顺序无关紧要的一列元素 

ul, ol {
    margin-top: 0;
    margin-bottom: 10px;
Copier après la connexion
<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit<ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>
Copier après la connexion
<p><br>

<p>【有序列表】

<p>　　顺序至关重要的一组元素。 

<ol>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit</li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ol>
Copier après la connexion
<p><br>

<p>【无样式列表】

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

.list-unstyled {
    padding-left: 0;
    list-style: none;
}
Copier après la connexion
<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit<ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>
Copier après la connexion
<p><br>

<p>【内联列表】

<p>　　通过设置 display: inline-block; 并添加少量的内边距（padding），将所有元素放置于同一行 

.list-inline {
    padding-left: 0;
    margin-left: -5px;
    list-style: none;
}
Copier après la connexion
<ul class="list-inline">
  <li>Lorem ipsum</li>
  <li>Phasellus iaculis</li>
  <li>Nulla volutpat</li>
</ul>
Copier après la connexion
<p><br>

<p>【描述】 

<p>　　带有描述的短语列表。

dl {
    margin-top: 0;
    margin-bottom: 20px;
}
dt {
    font-weight: bold;
}
dt, dd {
    line-height: 1.42857143;
}
dd {
    margin-left: 0;
}
Copier après la connexion
<dl>
  <dt>Description lists</dt>
  <dd>A description list is perfect for defining terms.</dd>
  <dt>Euismod</dt>
  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
  <dd>Donec id elit non mi porta gravida at eget metus.</dd>
  <dt>Malesuada porta</dt>
  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
Copier après la connexion
<p><br>

<p>【水平排列的描述】

<p>　　.dl-horizontal 可以让
内的短语及其描述排在一行。开始是像
的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行

.dl-horizontal dt {float: left;
    width: 160px;
    overflow: hidden;
    clear: left;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dl-horizontal dd {
    margin-left: 180px;
}
Copier après la connexion
<dl class="dl-horizontal">
  <dt>Description lists</dt>
  <dd>A description list is perfect for defining terms.</dd>
  <dt>Euismod</dt>
  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
  <dd>Donec id elit non mi porta gravida at eget metus.</dd>
  <dt>Malesuada porta</dt>
  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
  <dt>Felis euismod semper eget lacinia</dt>
  <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
</dl>
Copier après la connexion
<p><br>

<p> 

代码

<p>【内联代码】

<p> 　　通过 标签包裹内联样式的代码片段。

code {
    padding: 2px 4px;
    font-size: 90%;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
}
Copier après la connexion
<p>【用户输入】

<p>　　通过 标签标记用户通过键盘输入的内容。

kbd {
    padding: 2px 4px;
    font-size: 90%;
    color: #fff;
    background-color: #333;
    border-radius: 3px;-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
}
Copier après la connexion
<p>【代码块】

<p>　　多行代码可以使用 
 标签。为了正确的展示代码，注意将尖括号做转义处理。</p>
<div class="cnblogs_code"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">pre {
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.42857143;
    color: #333;
    word-break: break-all;
    word-wrap: break-word;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
}
Copier après la connexion
<p>　　还可以使用 .pre-scrollable 类，其作用是设置 max-height 为 350px ，并在垂直方向展示滚动条。

.pre-scrollable {
    max-height: 340px;
    overflow-y: scroll;
}
Copier après la connexion
<p>【变量】

<p>　　通过 标签标记变量

<p>【程序输出】

<p>　　通过 标签来标记程序输出的内容

<div>For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div>
<div>To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
    To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
</div>
<div>
    <pre class="brush:php;toolbar:false">&lt;p&gt;Sample text here...&lt;/p&gt;
    
&lt;p&gt;Sample text here...&lt;/p&gt;
    y = mx + b
    This text is meant to be treated as sample output from a computer program.
Copier après la connexion
<p><br>

<p> 

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：
bootstrap composition
source：php.cn
Article précédent：Comment insérer du contenu dans la page en CSS3 Article suivant：La conversion entre les unités px, em et pt et leurs différences
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
La page ne peut soudainement plus extraire le CSS ou le bootstrap Je suis donc en train de développer une page, j'en ai fait une partie hier et ça a très bi...
Depuis 2024-04-06 21:58:04
0
1
800
Comment résoudre le mystérieux espace vide en bas de page en CSS J'essaie de créer une page Web simple en utilisant Bootstrap et D3, mais je ne sais pas co...
Depuis 2024-04-06 20:22:15
0
1
454
Personnalisez l'apparence des en-têtes accordéon Bootstrap à l'aide de la classe CollapseDisplay Je souhaite styliser le titre de la carte d'un panneau avec la classeeffondrementshow. Dan...
Depuis 2024-04-06 12:53:11
0
1
376
Le commutateur Bootstrap ne fonctionne pas correctement lorsque la page Web est redimensionnée Description :<navxmlns:sec="http://www.thymeleaf.org/extras/spring-security"c...
Depuis 2024-04-05 08:45:39
0
1
3443
Afficher les fichiers PDF AWS en mode Bootstrap dans Laravel J'ai téléchargé l'URL AWS comme https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/6...
Depuis 2024-04-04 22:16:18
0
1
1450
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal