Bootstrap-Grundlayout, das Sie jeden Tag erlernen müssen_Javascript-Kenntnisse-js-Tutorial-php.cn

Dieses Mal möchte ich hauptsächlich etwas über das Setzen lernen. Das meiste davon ist auch in den grundlegenden Tags von HTML vorhanden, daher ist es relativ einfach. Um die Vollständigkeit der Serie sicherzustellen, werde ich es auch überprüfen und aufzeichnen. Der Hauptinhalt ist wie folgt:

1.Titel
2. Seitentext
3. Schwerpunkt
4.Abkürzungen
5. Adresse
6. Zitat
7. Liste

1. Titel
Es können alle Titel-Tags in HTML von

verwendet werden. Darüber hinaus werden Klassen von .h1 bis .h6 bereitgestellt, um dem Text des Inline-Attributs einen Titelstil zu geben.

<div class="container"> 
  <h1 class="page-header">标题</h1>
  <h1>h1. Bootstrap heading</h1>
  <h2>h2. Bootstrap heading</h2>
  <h3>h3. Bootstrap heading</h3>
  <h4>h4. Bootstrap heading</h4>
  <h5>h5. Bootstrap heading</h5>
  <h6>h6. Bootstrap heading</h6>
 </div>

Nach dem Login kopieren

Sehen wir uns den Effekt direkt an

Der Titel kann auch das -Tag oder das .small-Element enthalten, das zur Kennzeichnung von Untertiteln verwendet werden kann.

 <div class="container"> 
  <h1 class="page-header">标题</h1>
  <h1>h1. Bootstrap heading</h1><small>Secondary text</small>
  <h2>h2. Bootstrap heading</h2><small>Secondary text</small>
  <h3>h3. Bootstrap heading</h3><small>Secondary text</small>
  <h4>h4. Bootstrap heading</h4><small>Secondary text</small>
  <h5>h5. Bootstrap heading</h5><small>Secondary text</small>
  <h6>h6. Bootstrap heading</h6><small>Secondary text</small>
 </div>

Nach dem Login kopieren

2. Seitentext
Bootstrap legt die globale Schriftgröße auf 14 Pixel und die Zeilenhöhe auf 1,428 fest. Diese Eigenschaften werden direkt zugewiesen. Darüber hinaus wird

(Absatz) auch mit einem unteren Rand festgelegt, der der halben Zeilenhöhe (d. h. 10 Pixel) entspricht.

 <h1 class="page-header">页面主体</h1>
  <div style="border:1px solid ">
   <p style="border:1px solid ">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
 
 Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
 
 Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
 </div>

Nach dem Login kopieren

Das erkennt man an der Wirkungsanzeige.

Leittext
Absätze können durch Hinzufügen von .lead hervorgehoben werden.

 <h1 class="page-header">Lead Body Copy</h1>
  <div style="border:1px solid ">
   <p class="lead" style="border:1px solid ">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
 
 Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
 
 Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
 </div>
 <h1></h1>

Nach dem Login kopieren

Sie können den offensichtlichen Effekt erkennen, wenn Sie ihn mit dem Hauptteil der Seite oben vergleichen.

3. Schwerpunkt
Verwenden Sie einfach HTML-Tags zur Hervorhebung und verleihen Sie ihnen ein wenig Stil.
1. Kleiner Text
Für Inline- oder Blocktext, der nicht hervorgehoben werden muss, verwenden Sie das Tag , um ihn einzuschließen. Der darin enthaltene Text wird dann auf 85 % der Schriftgröße des übergeordneten Containers eingestellt. Verschachtelte -Elemente innerhalb des Titelelements werden auf unterschiedliche Schriftgrößen eingestellt.
Sie können Inline-Elemente auch .small anstelle von -Tags angeben.

<small>This line of text is meant to be treated as fine print.</small>

Nach dem Login kopieren

2. Fokus
Heben Sie einen Text hervor, indem Sie die Schriftstärke erhöhen.

<strong>rendered as bold text</strong>

Nach dem Login kopieren

3.Kursivschrift
Betonen Sie einen Textabschnitt in Kursivschrift.

<em>rendered as italicized text</em>

Nach dem Login kopieren

4. Klasse ausrichten
Mit der Textausrichtungsklasse können Sie Text einfach und bequem neu ausrichten.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

Nach dem Login kopieren

Offensichtlich ist die erste Zeile linksbündig, die zweite Zeile zentriert und die dritte Zeile rechtsbündig.
5. Schwerpunkt auf Klasse
Diese Kurse verwenden Farbe, um Betonung auszudrücken. Kann auch auf Links angewendet werden, sodass die Farbe dunkler wird, wenn die Maus über den Link fährt, genau wie beim Standard-Linkstil.

<h1>强调Class</h1>
 <p class="text-muted">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
 <p class="text-primary">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
 <p class="text-success">.Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
 <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna..</p>
 <p class="text-warning">Maecenas sed diam eget risus varius blandit sit amet non magna..</p>
 <p class="text-danger">.Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
 <h1></h1>

Nach dem Login kopieren

4. Miniaturansichten
Der vollständige Inhalt wird angezeigt, wenn die Maus über Abkürzungen bewegt wird und Bootstrap erweiterte Stile für das HTML-Element implementiert. Das Abkürzungselement hat ein Titelattribut 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, müssen jedoch das Titelattribut einschließen.
Grundlegende Abkürzungen
Wenn Sie den vollständigen Inhalt sehen möchten, können Sie mit der Maus über die Abkürzung fahren, müssen jedoch das Titelattribut einschließen.

<abbr title="attribute">attr</abbr>

Nach dem Login kopieren

Ich kann den Effekt sehen, aber ich kann keinen Screenshot machen.
Initialismus
Durch das Hinzufügen von .initialism zu einer Abkürzung wird die Schriftgröße verkleinert.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

Nach dem Login kopieren

Laden Sie einfach den Code hoch und überzeugen Sie sich selbst von der Wirkung.
5. Adresse
Lassen Sie Kontaktinformationen in einem Format darstellen, das dem alltäglichen Gebrauch am nächsten kommt. Fügen Sie am Ende jeder Zeile
hinzu, um den gewünschten Stil beizubehalten.

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

<address>
 <strong>Full Name</strong><br>
 <a href="mailto:#">first.last@example.com</a>
</address>

Nach dem Login kopieren

六、引用
在你的文档中引用其他来源的内容。
默认样式的引用
将任何HTML裹在

之中即可表现为引用。对于直接引用，我们建议用
标签。
<blockquote>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</blockquote>
Nach dem Login kopieren
引用选项
对于标准样式的
，可以通过几个简单的变体就能改变风格和内容。
命名来源:添加标签来注明引用来源。来源名称可以放在标签里面。

<blockquote> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Someone famous in <cite title="Source Title">Source Title</cite> </blockquote>
Nach dem Login kopieren

会多一个Source Title
另一种展示风格

使用.pull-right可以让引用展现出向右侧移动、对齐的效果。

<blockquote class="pull-right"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </blockquote>
Nach dem Login kopieren

向右对齐移动了额，当然也有相应的pull-left。　　
七、列表
无序列表
顺序无关紧要的一列元素。

<ul> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> </ul>
Nach dem Login kopieren

这个也很明显和Html的一样。
有序列表
顺序至关重要的一组元素。

<ol> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> </ol>
Nach dem Login kopieren

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

<ul class="list-unstyled"> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> </ul>
Nach dem Login kopieren

内联列表
通过设置display: inline-block;并添加少量的内补，将所有元素放置于同一列。

<ul class="list-inline"> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> </ul>
Nach dem Login kopieren

效果当然就是在一行了。

以上就是Bootstrap基础排版的全部内容，希望大家好好阅读，再结合相关文章进行扩展性的学习。