Gemeinschaft
Lernen
Tools-Bibliothek
KI-Tools
Freizeit
suchen
Deutsch
Heim Web-Frontend js-Tutorial So verwenden Sie CSS in Bootstarp_javascript-Kenntnissen

So verwenden Sie CSS in Bootstarp_javascript-Kenntnissen

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
May 16, 2016 pm 03:15 PM
css

Bootstrap verwendet einige HTML5-Elemente und CSS-Eigenschaften und muss daher den HTML5-Dokumenttyp verwenden. 

<!DOCTYPE html>
<html lang="zh-CN">
 ...
</html>
Nach dem Login kopieren

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">//禁止页面缩放（可选）
Nach dem Login kopieren

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

    Die Zeile
  • muss im Container platziert werden und wird zum Erstellen horizontaler Spaltengruppen verwendet.
  • Vordefinierte Rasterklassen wie .row und .col-xs-4 können zum schnellen Erstellen von Rasterlayouts verwendet werden.

  • Zeilen und Spalten können ineinander verschachtelt werden, und die Anpassung nach der Verschachtelung basiert auf dem übergeordneten Element, nicht auf der Gerätebreite
  • Um drei gleiche Spalten zu erstellen, verwenden Sie drei col-xs-4 oder 12 col-xs-1 für 12 Spalten. 
<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列，然后从右往左插入元素
Nach dem Login kopieren
  • Medienabfragen sind sehr ausgefallene „bedingte CSS-Regeln“. Es funktioniert nur mit einigen CSS basierend auf bestimmten festgelegten Bedingungen. Wenn diese Bedingungen erfüllt sind, wird der entsprechende Stil angewendet.

@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

  • Über Text
<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>红
Nach dem Login kopieren

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

  • Mit dem Tag
    können Sie Kontaktinformationen auf Ihrer Webseite anzeigen.
  • Verwenden Sie das Tag als Zitat
<blockquote>这是一个带有源标题的引用。<small>Someone famous in Source Title</small></blockquote>
Nach dem Login kopieren
  • list-unstyled wird für unformatierte Listen-UL verwendet, list-inline wird für horizontale Listen-UL verwendet
  • Vorab scrollbar macht vorab scrollbar
  • 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 src="/static/imghw/default1.png"  data-src="http://files.jb51.net/file_images/article/201602/201621793115393.png&#63;201611793123"  class="lazy"  id="theimg" alt="" onclick="window.open(this.src)" /></p>
<p style="text-align: center"><img src="/static/imghw/default1.png"  data-src="http://files.jb51.net/file_images/article/201602/201621793141588.png&#63;201611793156"  class="lazy"  id="theimg" alt="" onclick="window.open(this.src)" /></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:php;toolbar:false;'>
<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

  • Fügen Sie das Attribut „role="form" zum Formular hinzu und die grundlegende Formularstruktur von Bootstrap wird angewendet. Zu diesem Zeitpunkt ist die Standardeinstellung ein vertikales Formular
  • Fügen Sie die Beschriftungen und Steuerelemente in ein
    mit der Klasse .form-group ein. Dies ist notwendig, um einen optimalen Abstand zu erreichen.
  • Klasse .form-control zu allen Textelementen ,