Kapitel 2: Bootstrap-Seitenlayout style_javascript-Kenntnisse

Bootstrap von Twitter ist derzeit das beliebteste Frontend-Framework. Bootstrap basiert auf HTML, CSS und JAVASCRIPT. Es ist einfach und flexibel und beschleunigt die Webentwicklung.

Lernpunkte:

1. Seitenlayout

In dieser Lektion lernen wir hauptsächlich den Layoutstil im globalen CSS-Stil von Bootstrap, einschließlich regulärer Inhalte wie Titel, Seitenkörper, Ausrichtung und Liste.

1. Seitenlayout

Bootstrap bietet Entwicklern einige häufig gestaltete Seitenlayoutstile zur Verwendung.

1. Seitentext

Bootstrap setzt die globale Schriftgröße auf 14 Pixel und die Zeilenhöhe auf 1,428 (d. h. 20 Pixel);

das Absatzelement wird auf 1/2 Zeilenhöhe (d. h. 10 Pixel) eingestellt; 333.

//创建包含段落突出的文本
<p>Bootstrap 框架</p>
<p class="lead">Bootstrap 框架</p>
<p>Bootstrap 框架</p>
<p>Bootstrap 框架</p>
<p>Bootstrap 框架</p> 

2. Titel

//从 h1 到 h6
<h1>Bootstrap 框架</h1>//36px
<h2>Bootstrap 框架</h2>//30px
<h3>Bootstrap 框架</h3>//24px
<h4>Bootstrap 框架</h4>//18px
<h5>Bootstrap 框架</h5>//14px
<h6>Bootstrap 框架</h6>//12px 

Aus der Anzeige von Elementen in Firebug haben wir erfahren, dass Bootstrap CSS-Stile für h1 ~ h6 rekonstruiert hat und auch die normale Inline-Elementdefinition class=(.h1 ~ h6) unterstützt, um dieselbe Funktion zu erreichen.

//内联元素使用标题字体
<span class="h1">Bootstrap</span> 

Hinweis: Das Anzeigen von Elementen über Firebug zeigt auch, dass die Schriftfarbe, der Schriftstil und die Zeilenhöhe alle festgelegt sind und somit Einheitlichkeit gewährleisten, während die nativen Elemente auf der Grundlage der im System integrierten Elemente bestimmt werden bevorzugte Schriftart. Die Farbe ist am schwärzesten.

Zwischen h1 ~ h6-Elementen können Sie auch ein kleines Element als Untertitel einbetten,

//在标题元素内插入 small 元素
<h1>Bootstrap 框架 <small>Bootstrap 小标题</small></h1>
<h2>Bootstrap 框架 <small>Bootstrap 小标题</small></h2>
<h3>Bootstrap 框架 <small>Bootstrap 小标题</small></h3>
<h4>Bootstrap 框架 <small>Bootstrap 小标题</small></h4>
<h5>Bootstrap 框架 <small>Bootstrap 小标题</small></h5>
<h6>Bootstrap 框架 <small>Bootstrap 小标题</small></h6> 

Bei Betrachtung durch Firebug haben wir festgestellt, dass die Größe des kleinen Elements unter h1 ~ h3 nur 65 % des übergeordneten Elements ausmacht. Durch Berechnung (siehe den von Firebug berechneten Stil) beträgt das kleine Element unter h1 ~ h3 dann 23,4 px, 19,5px, 15,6px; die Größe kleiner Elemente unter h4 ~ h6 macht jeweils nur 75% des übergeordneten Elements aus: 13,5px, 10,5px, 9px. Der kleine Stil unter h1 ~ h6 wurde ebenfalls geändert, die Farbe wird hellgrau: #777, die Linienhöhe beträgt 1 und die Dicke beträgt 400.

3. Inline-Textelemente

//添加标记，<mark>元素或.mark 类
<p>Bootstrap<mark>框架</mark></p> 
//各种加线条的文本
<del>Bootstrap 框架</del>//删除的文本
<s>Bootstrap 框架</s>//无用的文本
<ins>Bootstrap 框架</ins>//插入的文本
<u>Bootstrap 框架</u>//效果同上，下划线文本 
//各种强调的文本
<small>Bootstrap 框架</small>//标准字号的 85%
<strong>Bootstrap 框架</strong>//加粗 700
<em>Bootstrap 框架</em>//倾斜 

4. Ausrichtung

//设置文本对齐
<p class="text-left">Bootstrap 框架</p>//居左
<p class="text-center">Bootstrap 框架</p>//居中
<p class="text-right">Bootstrap 框架</p>//居右
<p class="text-justify">Bootstrap 框架</p>//两端对齐，支持度不佳<p class="text-nowrap">Bootstrap 框架</p>//不换行 

5. Großschreibung

//设置英文文本大小写
<p class="text-lowercase">Bootstrap 框架</p> //小写
<p class="text-uppercase">Bootstrap 框架</p> //大写
<p class="text-capitalize">Bootstrap 框架</p>//首字母大写

6. Abkürzungen

//缩略语
Bootstrap<abbr title="Bootstrap" class="initialism">框架</abbr>

7. Adresstext

//设置地址，去掉了倾斜，设置了行高，底部 20px
<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>

8. Zitattext

//默认样式引用，增加了做边线，设定了字体大小和内外边距
<blockquote>
　　Bootstrap 框架
</blockquote> 
//反向
<blockquote class="blockquote-reverse ">
　　Bootstrap 框架
</blockquote>

9. Listenlayout

//移出默认样式
<ul class="list-unstyled">
　　<li>Bootstrap 框架</li>
　　<li>Bootstrap 框架</li>
　　<li>Bootstrap 框架</li>
　　<li>Bootstrap 框架</li>
　　<li>Bootstrap 框架</li>
</ul> 
//设置成内联
<ul class="list-inline">
　　<li>Bootstrap 框架</li>
　　<li>Bootstrap 框架</li>
　　<li>Bootstrap 框架</li>
　　<li>Bootstrap 框架</li>
　　<li>Bootstrap 框架</li>
</ul> 
//水平排列描述列表
<dl class="dl-horizontal">
　　<dt>Bootstrap</dt>
　　<dd>Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。</dd>
</dl> 

10. Code

//内联代码
<code><section></code> 
//用户输入
press <kbd>ctrl + ,</kbd> 
//代码块
<pre class="brush:php;toolbar:false"><p>Please input...</p>

Bootstrap zählt auch zur Darstellung von Tag-Variablen und zur Darstellung der Programmausgabe auf, schreibt CSS jedoch nicht neu.

Das Obige ist das vom Herausgeber eingeführte Wissen über den Bootstrap-Seitenlayoutstil. Ich hoffe, es wird für alle hilfreich sein!