Maison > Article > interface Web > Utiliser Bootstrap pour la typographie
Utiliser Bootstrap pour la typographie
- PHP中文网original
- 2017-06-22 11:12:421512parcourir
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;
32px -> 24px -> 18.72px -> 16px -> 13.28px -> 10.72px;
36px -> 30px -> 24px -> 18px -> 14px -> 12px;
.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;
}<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;
}<h1>标题一 <small>副标题一</small></h1><h2>标题二 <small>副标题二</small></h2><h3>标题三 <small>副标题三</small></h3><h4>标题四 <small>副标题四</small></h4><h5>标题五 <small>副标题五</small></h5><h6>标题六 <small>副标题六</small></h6>
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 globalfont-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><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;
}.lead classe, vous pouvez mettre en surbrillance le paragraphe
.lead {
margin-bottom: 20px;
font-size: 16px;
font-weight: 300;
line-height: 1.4;
}<p>一般内容</p><p class="lead">中心内容</p><p>一般内容</p>
Texte en ligne
<p> 【Marquer le texte】 <p> Le texte doit être marqué, utilisez la balisemark, .mark {
padding: .2em;
background-color: #fcf8e3;
}small, .small {
font-size: 85%;
}【Emphasis】<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>
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;
}<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>
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;
}<p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">Capitalized text.</p>
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;
}[Acronyme].initialism
.initialism {
font-size: 90%;
text-transform: uppercase;
}
<abbr title="attribute">attr</abbr> <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
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;
}
<p><br>
<p>
<p> 还可以使用 引用
<p>【默认样式的引用】 <p> 将任何 HTML 元素包裹在中即可表现为引用样式。对于直接引用，建议用 <p> 标签blockquote { padding: 10px 20px; margin: 0 0 20px; font-size: 17.5px; border-left: 5px solid #eee; }<p><br> <p>【多种引用样式】 <p> 对于标准样式的<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote>，可以通过几个简单的变体就能改变风格和内容 <p> 1、命名来源 <p> 添加
.pre-scrollable 类，其作用是设置 max-height 为 350px ，并在垂直方向展示滚动条。
.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}<div>For example, <code><section></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"><p>Sample text here...</p>
<p>Sample text here...</p>
y = mx + b
This text is meant to be treated as sample output from a computer program.
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!
Déclaration：
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