Einführung in die Grundstile von BootStrap

Verwendung grundlegender Bootstrap-Stile

1. Vorbereitungsarbeit

1. Responsives Layout

Bootstrap ist ein responsives Layout-Framework, das sich automatisch an die Anzeige verschiedener Gerätegrößen anpassen kann Modus, Verwendung: Fügen Sie den folgenden Code in das Head-Tag ein:

[Verwandte Empfehlungen: Bootstrap-Tutorial]

wobei initial-scale=1 bedeutet, dass das Skalierungsverhältnis 1 ist.

2. Einführung von bootstrap.css

Sie können die Datei „bootstrap.css“ lokal herunterladen, um sie lokal zu importieren, oder Sie können CDN zum Importieren verwenden. Die CDN-Importmethode lautet wie folgt:

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Vor- und Nachteile der Verwendung von CDN: 1. Es muss in einer Netzwerkumgebung eingeführt werden. 2. Wenn sich Dateien auf dem lokalen Server befinden, ist die Ladegeschwindigkeit sehr hoch, z. B. bei einem CDN Server in Qingdao Wenn die Datei „bootstrap.css“ auf der Website vorhanden ist, importieren Benutzer im Raum Qingdao die Datei sehr schnell. Andernfalls ist die Geschwindigkeit langsamer und die Ladeverzögerung höher. 3. Es gibt keine Code-Eingabeaufforderung Webstorm-Software bei Verwendung von CDN zum Laden von CSS-Dateien. Wenn Sie Code benötigen, wird empfohlen, bootstrap.css lokal herunterzuladen und dann zu importieren.

3. Führen Sie bootstrap.js und jQuery.js ein.

Sie können die Dateien „bootstrap.js“ und „jQuery.js“ lokal herunterladen oder auch CDN zum Importieren verwenden Die Importmethode lautet wie folgt:

<!-- jQuery 某些bootstrap插件需要使用 -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 所有的bootstrap插件都需要引入 -->
<script src="js/bootstrap.min.js"></script>

Hinweis: Versuchen Sie, die Einleitung der js-Datei am Ende des Body-Tags zu platzieren, um die Leistung des Browser-Renderings zu verbessern die Seite.

2. In der Entwicklung häufig verwendete Stile

1. Rastersystem

Bootstrap bietet ein reaktionsfähiges, mobilgeräteorientiertes, fließendes Rastersystem, das einfach als Bildschirm oder Wenn die Größe des Ansichtsfensters zunimmt, teilt das System es automatisch in bis zu 12 Spalten auf.

• „row“ muss in .container (feste Breite) oder .container-fluid (100 % Breite) eingeschlossen sein, um eine ordnungsgemäße Ausrichtung und Polsterung zu gewährleisten. Fluid-Layout-Container (.container-fluid). Ändern Sie das äußerste Layout-Element .container in .container-fluid, um das Rasterlayout mit fester Breite in ein Layout mit 100 % Breite umzuwandeln. Der Unterschied zu .container besteht darin, dass die maximale Breite des Containers immer auf 100 % des Gerätebildschirms eingestellt ist.

• Spalten in einem Rastersystem stellen den Bereich dar, den sie abdecken, indem sie Werte von 1 bis 12 angeben. Beispielsweise können drei Spalten gleicher Breite mit drei .col-xs-4 s erstellt werden.

• Wenn eine „Zeile“ mehr als 12 „Spalten“ enthält, werden die Elemente, die die zusätzlichen „Spalten“ enthalten, als Ganzes behandelt.

Das Code-Snippet lautet wie folgt:

<p class="container">
//将一行按照8:4分成两列
  <p class="row">
    <p class="col-md-8">.col-md-8</p>
    <p class="col-md-4">.col-md-4</p>
  </p>
//将一行三等分为三列
  <p class="row">
    <p class="col-md-4">.col-md-4</p>
    <p class="col-md-4">.col-md-4</p>
    <p class="col-md-4">.col-md-4</p>
  </p>
//将一行等分为两列
  <p class="row">
    <p class="col-md-6">.col-md-6</p>
    <p class="col-md-6">.col-md-6</p>
  </p>
</p>

Grid-Parameter

Sie können Bootstrap in anzeigen Einzelheiten finden Sie in der folgenden Tabelle. Wie das Rastersystem auf Geräten mit mehreren Bildschirmen funktioniert;

Der Kompatibilitätsmodus ist abwärtskompatibel. Wenn Sie beispielsweise .col-md- verwenden, wird es weiterhin in einem mittleren Bildschirmlayout angeordnet Wenn der Bildschirm klein oder ultraklein ist, ist er gestapelt. Wenn .col-xs- festgelegt ist, wird das festgelegte Layout auf allen Geräten angezeigt rückwärtskompatibel;

Das Rasterlayout verwendet ein linksschwebendes Layout, indem Sie den Klassenattributwert als

.col-md-offset-5 definieren Die 5 leeren Felder auf der linken Seite des Rasters, .col-md-push-3, bedeuten, dass das Raster um 3 Felder nach rechts verschoben wird, .col-md-pull-3 bedeutet, dass das Raster um 3 Felder verschoben wird nach links;

	超小屏幕 手机 (<768px)	小屏幕 平板 (≥768px)	中等屏幕 桌面显示器 (≥992px)	大屏幕 大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container 最大宽度	None （自动）	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列（column）数	12
最大列（column）宽	自动	~62px	~81px	~97px
槽（gutter）宽	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

通过栅格系统的布局方式，可以很简洁的设计出自己需要的响应式布局排版，能够在不同设备上达到不同的显示效果。

通过下面的实例说明栅格布局在手机、平板、电脑设备上的动态布局的强大：

<p class="container">
 <p class="row">
   <p class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</p>
   <p class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</p>
 </p>
</p>

其中第三行的class属性值表示的意思是，在超小屏幕（<768px）上显示为12个栅格，在小屏幕（>768px）上显示为6个栅格，在中等屏幕（>=992px）上显示的为8个栅格，大屏幕上未定义，根据栅格的向后兼容，在大屏幕上显示的为中等屏幕的布局。

媒体查询

很容易理解，如下代码：

-width: @screen-sm--width: @screen-md--width: @screen-lg-min) { ... }

e.g:
p{
/* 中等屏幕（桌面显示器，大于等于 992px） 此时执行{}里面的样式*/

@media (min-width: @screen-md-min) { width:100% }

/* 大屏幕（大桌面显示器，大于等于 1200px） 此时执行{}里面的样式*/

@media (min-width: @screen-lg-min) { width:80%}}

 2、表格的常用样式

基础样式.table

带条纹区分行的表格.table-striped

带边框的表格.table-border

带鼠标悬停是区分的表格.table-hover

 

表格行显示的样式，通过设置tr的class属性值来控制，常用属性值有.info/.success/.warning/.active/.danger

 

Das obige ist der detaillierte Inhalt vonEinführung in die Grundstile von BootStrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!