Inhaltsverzeichnis
Vorherige Wörter
Titel
und allen Absatzelementen
【Text löschen】
. Das Abkürzungselement hat das Attribut
引用
列表
代码
Heim Web-Frontend HTML-Tutorial Layout mit Bootstrap

Layout mit Bootstrap

Jun 22, 2017 am 11:12 AM
bootstrap Satz

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]<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
<p>  还可以使用 .pre-scrollable 类,其作用是设置 max-height 为 350px ,并在垂直方向展示滚动条。

.pre-scrollable {
    max-height: 340px;
    overflow-y: scroll;
}
Nach dem Login kopieren
<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.
Nach dem Login kopieren
<p>

<p> 

Das obige ist der detaillierte Inhalt vonLayout mit Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Wie man vertikale Zentrierung von Bootstrap macht Wie man vertikale Zentrierung von Bootstrap macht Apr 07, 2025 pm 03:21 PM

Verwenden Sie Bootstrap, um die vertikale Zentrierung zu implementieren: FlexBox-Methode: Verwenden Sie den D-Flex, den Justify-Content-Center und die Ausrichtungsklassen aus Align-Item-Center, um Elemente in den Flexbox-Behälter zu platzieren. Methode für Ausstellungs-Iitem-Center-Klassen: Bei Browsern, die Flexbox nicht unterstützen, verwenden Sie die Klasse aus Align-items-Center-Klasse, vorausgesetzt, das übergeordnete Element hat eine definierte Höhe.

So verwenden Sie die Bootstrap -Taste So verwenden Sie die Bootstrap -Taste Apr 07, 2025 pm 03:09 PM

Wie benutze ich die Bootstrap -Taste? Führen Sie Bootstrap -CSS ein, um Schaltflächenelemente zu erstellen, und fügen Sie die Schaltfläche "Bootstrap" hinzu, um Schaltflächentext hinzuzufügen

So ändern Sie Bootstrap So ändern Sie Bootstrap Apr 07, 2025 pm 03:18 PM

Um die Größe der Elemente in Bootstrap anzupassen, können Sie die Dimensionsklasse verwenden, einschließlich: Einstellbreite:.

So fügen Sie Bilder auf Bootstrap ein So fügen Sie Bilder auf Bootstrap ein Apr 07, 2025 pm 03:30 PM

Es gibt verschiedene Möglichkeiten, Bilder in Bootstrap einzufügen: Bilder direkt mit dem HTML -IMG -Tag einfügen. Mit der Bootstrap -Bildkomponente können Sie reaktionsschnelle Bilder und weitere Stile bereitstellen. Legen Sie die Bildgröße fest und verwenden Sie die IMG-Fluid-Klasse, um das Bild anpassungsfähig zu machen. Stellen Sie den Rand mit der img-beliebten Klasse ein. Stellen Sie die abgerundeten Ecken ein und verwenden Sie die IMG-Rund-Klasse. Setzen Sie den Schatten, verwenden Sie die Schattenklasse. Größen Sie die Größe und positionieren Sie das Bild im CSS -Stil. Verwenden Sie mit dem Hintergrundbild die CSS-Eigenschaft im Hintergrund.

So richten Sie das Framework für Bootstrap ein So richten Sie das Framework für Bootstrap ein Apr 07, 2025 pm 03:27 PM

Um das Bootstrap -Framework einzurichten, müssen Sie die folgenden Schritte befolgen: 1. Verweisen Sie die Bootstrap -Datei über CDN; 2. Laden Sie die Datei auf Ihrem eigenen Server herunter und hosten Sie sie. 3.. Fügen Sie die Bootstrap -Datei in HTML hinzu; 4. Kompilieren Sie Sass/weniger bei Bedarf; 5. Importieren Sie eine benutzerdefinierte Datei (optional). Sobald die Einrichtung abgeschlossen ist, können Sie die Grid -Systeme, -Komponenten und -stile von Bootstrap verwenden, um reaktionsschnelle Websites und Anwendungen zu erstellen.

So erhalten Sie die Bootstrap -Suchleiste So erhalten Sie die Bootstrap -Suchleiste Apr 07, 2025 pm 03:33 PM

So verwenden Sie Bootstrap, um den Wert der Suchleiste zu erhalten: Bestimmt die ID oder den Namen der Suchleiste. Verwenden Sie JavaScript, um DOM -Elemente zu erhalten. Holen Sie sich den Wert des Elements. Führen Sie die erforderlichen Maßnahmen aus.

So laden Sie Dateien auf Bootstrap hoch So laden Sie Dateien auf Bootstrap hoch Apr 07, 2025 pm 01:09 PM

Die Datei -Upload -Funktion kann über Bootstrap implementiert werden. Die Schritte sind wie folgt: Startstrap CSS und JavaScript -Dateien einführen; Dateieingabefelder erstellen; Datei -Upload -Schaltflächen erstellen; Behandeln Sie Datei -Uploads (verwenden Sie FormData, um Daten zu sammeln und dann an den Server zu senden). benutzerdefinierter Stil (optional).

So überprüfen Sie das Bootstrap -Datum So überprüfen Sie das Bootstrap -Datum Apr 07, 2025 pm 03:06 PM

Befolgen Sie die folgenden Schritte, um Daten in Bootstrap zu überprüfen: Führen Sie die erforderlichen Skripte und Stile ein. Initialisieren Sie die Datumsauswahlkomponente; Legen Sie das Data-BV-Datatattribut fest, um die Überprüfung zu ermöglichen. Konfigurieren von Überprüfungsregeln (z. B. Datumsformate, Fehlermeldungen usw.); Integrieren Sie das Bootstrap -Verifizierungs -Framework und überprüfen Sie automatisch die Datumseingabe, wenn das Formular eingereicht wird.

See all articles