Bootstrap verwendet einige HTML5-Elemente und CSS-Eigenschaften und muss daher den HTML5-Dokumenttyp verwenden.
<!DOCTYPE html> <html lang="zh-CN"> ... </html>
Um die von Bootstrap entwickelte Website mobilfreundlich zu gestalten und eine ordnungsgemäße Darstellung und Skalierung des Touchscreens sicherzustellen, müssen Sie das Viewport-Meta-Tag im Kopf der Webseite hinzufügen, wie unten gezeigt:
<meta name="viewport" content="width=device-width, //视口宽度为设备宽度
initial-scale=1.0, //缩放程度
maximum-scale=1.0, //最大缩放级别（可选）
user-scalable=no">//禁止页面缩放（可选）
Bootstrap verwendet Normalize, um eine browserübergreifende Konsistenz herzustellen. Normalize.css ist eine kleine CSS-Datei, die eine bessere browserübergreifende Konsistenz im Standardstil von HTML-Elementen bietet.
Über das Layout
Bootstrap bietet ein reaktionsfähiges, mobiles, flüssiges Rastersystem, das automatisch in bis zu 12 Spalten unterteilt wird, wenn die Bildschirm- oder Ansichtsfenstergröße zunimmt.
img-responsive wird für img-Elemente verwendet
Containerelement, das zum Umschließen von Inhalten auf der Seite verwendet wird
<div class="container"> <div class="row"> <div class="col-xs-6 col-md-2 col-md-offset-1"></div> <div class="col-xs-6 col-md-3"></div> <div class="col-xs-6 col-md-3"></div> <div class="col-xs-6 col-md-3"></div> </div> <div class="row">...</div> </div> <div class="container">.... <!--以上代码在手机上就是两行两列，在电脑上是一行四列，其中第一列前面有空白，比其它列宽度小三分之一--> //可使用.col-md-push-* 和 .col-md-pull-* 这种类设定显示，col-md-push-6按照我个人的理解，是在左面浮动了6列，然后再插入元素，col-md-pull-3则是在右边浮动了3列，然后从右往左插入元素
@media (min-width: @screen-sm-min) und (max-width: @screen-sm-max) { ... }
//Für alle Geräte mit min-width: @screen-sm-min, wenn die Breite des Bildschirms kleiner als @screen-sm-max ist, wird eine gewisse Verarbeitung durchgeführt.
Über den Schriftsatz
<small>本行内容是在标签内</small><br> <strong>本行内容是在标签内</strong><br> <em>本行内容是在标签内，并呈现为斜体</em><br> <p class="text-left">向左对齐文本</p> <p class="text-center">居中对齐文本</p> <p class="text-right">向右对齐文本</p> <p class="text-muted">本行内容是减弱的</p>灰 <p class="text-primary">本行内容带有一个 primary class</p>蓝 <p class="text-success">本行内容带有一个 success class</p>绿 <p class="text-info">本行内容带有一个 info class</p>深蓝 <p class="text-warning">本行内容带有一个 warning class</p>黄 <p class="text-danger">本行内容带有一个 danger class</p>红
Bootstrap definiert den Stil des -Elements als gestrichelten Rahmen, der am unteren Rand des Textes erscheint. Der vollständige Text wird angezeigt, wenn die Maus darüber bewegt wird (sofern Sie Text für das -Element hinzufügen). abbr> Titelattribut). Um eine kleinere Schriftgröße für Text zu erhalten, fügen Sie .initialism zu hinzu.
<abbr title="World Wide Web">WWW</abbr><br> <abbr title="Real Simple Syndication" class="initialism">RSS</abbr>
<blockquote>这是一个带有源标题的引用。<small>Someone famous in Source Title</small></blockquote>
zeigt Code inline an, zeigt mehrere Codezeilen an</strong></span><br />
</li>
</ul>
<p><strong>Über das Formular</strong></p>
<p style="text-align: center"><img id="theimg" alt="" onclick="window.open(this.src)" src="http://files.jb51.net/file_images/article/201602/201621793115393.png?201611793123" /></p>
<p style="text-align: center"><img id="theimg" alt="" onclick="window.open(this.src)" src="http://files.jb51.net/file_images/article/201602/201621793141588.png?201611793156" /></p>
<p>Indem Sie eine beliebige .table in eine auf .table reagierende Klasse einschließen, können Sie dafür sorgen, dass die Tabelle horizontal scrollt, damit sie auf kleine Geräte (weniger als 768 Pixel) passt. Bei der Anzeige auf großen Geräten mit einer Breite von mehr als 768 Pixel werden Sie keinen Unterschied feststellen. <br />
</p>
<div class="jb51code">
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;">
<div class="table-responsive">
<table class="table">
<caption>响应式表格布局</caption>
<thead>
<tr>
<th>产品</th>
<th>付款日期</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td>产品1</td>
<td>23/11/2013</td>
<td>待发货</td>
</tr>
</tbody>
</table>
</div>
Nach dem Login kopierenÜber das Formular