Layout mit Bootstrap-HTML-Tutorial-php.cn

Vorherige Wörter

<p>In diesem Artikel werden die Inhalte im Zusammenhang mit der Typografie in Bootstrap ausführlich vorgestellt

<p>

Titel

<p>[h]

<p> HTML Alle Titel-Tags in <h1> bis <h6> können verwendet werden

<p> Standardmäßig ist die Schriftgröße von h1 bis h6 wie folgt

2em -> 1.5em -> 1.17em -> 1em -> 0.83em -> 0.67em;

Nach dem Login kopieren

<p>　In der Ausgangssituation, 1em = 16px, ist die Konvertierung wie folgt

32px -> 24px -> 18.72px -> 16px -> 13.28px -> 10.72px;

Nach dem Login kopieren

<p>Boostrap hat die Schriftgröße von h1-h6 zurückgesetzt, wie unten gezeigt

36px -> 30px -> 24px -> 18px -> 14px -> 12px;

Nach dem Login kopieren

<p> Darüber hinaus werden die Klassen .h1 bis .h6 bereitgestellt, um dem Text des Inline-Attributs zusätzlich zu den verschiedenen Anzeigeattributen einen Titelstil zu verleihen als <h1> bis <h6> Die Klasse kann zum Markieren von Untertiteln verwendet werden. Das <small>-Tag hat den gleichen Stil wie das .small-Klassenelement

h1,.h1{
    font-size: 36px;
    margin-top: 20px;
    margin-bottom: 10px;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

Nach dem Login kopieren

<p>

<p><small>.small

h1 small,.h1 small, h1 .small, .h1 .small{
    font-size: 65%;
    font-weight: normal;
    line-height: 1;
    color: #777;
}

Nach dem Login kopieren

Absatz

<h1>标题一 <small>副标题一</small></h1><h2>标题二 <small>副标题二</small></h2><h3>标题三 <small>副标题三</small></h3><h4>标题四 <small>副标题四</small></h4><h5>标题五 <small>副标题五</small></h5><h6>标题六 <small>副标题六</small></h6>

Nach dem Login kopieren

[Körper]

<p>Standardmäßig beträgt die Schriftgröße der Seite 16 Pixel und die Zeilenhöhe (unter Chrome) beträgt 1,334

Bootstrap Wird global <p> auf 14 Pixel und

auf 20 Pixel eingestellt? Diese Attribute sind direkt dem Element

und allen Absatzelementen

<p>

[p]<p>font-size sowie dem Element line-height (Absatz) zugeordnet ist ebenfalls auf den Wert eingestellt: Unterer Rand (margin) von 1/2 Zeilenhöhe (d. h. 10 Pixel) <body>

<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>

Nach dem Login kopieren

[.lead]<p>

Durch Hinzufügen von <p> Klasse können Sie den Absatz hervorheben <p>

p{
    margin: 0 0 10px;
}

Nach dem Login kopieren

<p>

<p>.lead

.lead {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.4;
}

Nach dem Login kopieren

Inline-Text

<p>一般内容</p><p class="lead">中心内容</p><p>一般内容</p>

Nach dem Login kopieren

【Text markieren】

<p> Text muss markiert werden, verwenden Sie das Tag

<p>

【Text löschen】

<p> Für gelöschten Text verwenden Sie das Tag
<p>【Nutzloser Text】

Für nutzlosen Text verwenden Sie das Tag 🎜>
mark, .mark {     padding: .2em;     background-color: #fcf8e3; }
Nach dem Login kopieren
Extra Um Text einzufügen, verwenden Sie das Tag 🎜>【Kleiner Text】
<p> Für Inline- oder Blocktext, der nicht hervorgehoben werden muss, verwenden Sie das Tag <small>, um ihn zu umbrechen, und der darin enthaltene Text wird auf 85 % des Texts gesetzt Schriftgröße des übergeordneten Containers. Verschachtelte -Elemente innerhalb des Titelelements werden auf unterschiedliche Schriftgrößen eingestellt.
<p>Sie können Inline-Elementen auch die Klasse .small zuweisen, um jedes <small>-Element zu ersetzen.
<p>
<p>
【Hervorhebung】<p>
Durch Hinzufügen Der Wert „font -weight“ hebt einen Textabschnitt hervor <p>
【kursiv】<p>
Verwenden Sie Kursivschrift, um einen Textabschnitt hervorzuheben <p>
[Hinweis] Sie können sicher verwenden im HTML5-Label. wird verwendet, um Wörter oder Phrasen ohne Hervorhebung hervorzuheben, während das -Tag hauptsächlich für Sprache, Fachvokabular usw. verwendet wird. <p>
<p>
<p>

small, .small {     font-size: 85%; }
Nach dem Login kopieren

<p>Ausrichtung
<p> Mit der Textausrichtungsklasse können Sie Text einfach und bequem neu ausrichten
<p>
<p>
<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>
Nach dem Login kopieren
<p>
Groß-/Kleinschreibung<p>
Mit diesen Klassen können Sie die Groß-/Kleinschreibung von Text ändern
<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; }
Nach dem Login kopieren

<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>
Nach dem Login kopieren
<p>
Abkürzungen<p>
Beim Bewegen der Maus über Abkürzungen und Abkürzungen wird der komplette Inhalt angezeigt implementiert erweiterte Stile für das HTML-Element
. Das Abkürzungselement hat das Attribut
und erscheint als heller gepunkteter Rahmen. Wenn die Maus darüber bewegt wird, verwandelt es sich in einen Zeiger mit einem „Fragezeichen“. Wenn Sie den vollständigen Inhalt sehen möchten, können Sie mit der Maus über die Abkürzung fahren (auch sichtbar für Benutzer, die unterstützende Technologien verwenden), Sie müssen jedoch das Titelattribut <p>
[Grundabkürzung]
.text-lowercase {     text-transform: lowercase; } .text-uppercase {     text-transform: uppercase; } .text-capitalize {     text-transform: capitalize; }
Nach dem Login kopieren

[Akronym]
<p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">Capitalized text.</p>
Nach dem Login kopieren

Durch Hinzufügen der Klasse <p> zur Abkürzung kann die Schriftgröße etwas kleiner werden
<p>

<p><abbr>title
<p>

Adresse
abbr[title], abbr[data-original-title] {     cursor: help;     border-bottom: 1px dotted #777; }
Nach dem Login kopieren

Lassen Sie die Kontaktinformationen in einem Format darstellen, das dem täglichen Gebrauch am nächsten kommt. Fügen Sie am Ende jeder Zeile <p> hinzu, um den gewünschten Stil beizubehalten
<p>.initialism

.initialism {     font-size: 90%;     text-transform: uppercase; }
Nach dem Login kopieren
<p>
<p>

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

blockquote {     padding: 10px 20px;     margin: 0 0 20px;     font-size: 17.5px;     border-left: 5px solid #eee; }
Nach dem Login kopieren

<blockquote>   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote>
Nach dem Login kopieren
<p>
<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>
Nach dem Login kopieren
<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>
Nach dem Login kopieren

.blockquote-reverse, blockquote.pull-right {     padding-right: 15px;     padding-left: 0;     text-align: right;     border-right: 5px solid #eee;     border-left: 0; }
Nach dem Login kopieren
<p>
<p>

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

ul, ol {     margin-top: 0;     margin-bottom: 10px;
Nach dem Login kopieren

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

.list-unstyled {     padding-left: 0;     list-style: none; }
Nach dem Login kopieren

<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>
Nach dem Login kopieren
<p>
<p>【内联列表】
<p>　　通过设置 display: inline-block; 并添加少量的内边距（padding），将所有元素放置于同一行

.list-inline {     padding-left: 0;     margin-left: -5px;     list-style: none; }
Nach dem Login kopieren

<ul class="list-inline">   <li>Lorem ipsum</li>   <li>Phasellus iaculis</li>   <li>Nulla volutpat</li> </ul>
Nach dem Login kopieren
<p>
<p>【描述】
<p>　　带有描述的短语列表。

dl {     margin-top: 0;     margin-bottom: 20px; } dt {     font-weight: bold; } dt, dd {     line-height: 1.42857143; } dd {     margin-left: 0; }
Nach dem Login kopieren

<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>
Nach dem Login kopieren
<p>
<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; }
Nach dem Login kopieren

<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>
Nach dem Login kopieren
<p>
<p>

代码
<p>【内联代码】
<p> 　　通过标签包裹内联样式的代码片段。 code {     padding: 2px 4px;     font-size: 90%;     color: #c7254e;     background-color: #f9f2f4;     border-radius: 4px; } Nach dem Login kopieren <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); } Nach dem Login kopieren <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; } Nach dem Login kopieren