<blockquote><p>Tutorial-Empfehlung: Bootstrap-Tutorial
Bootstrap? Bootstrap ？
<p>官方介绍：简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
<p>2.Bootstrap 下载
<p>Bootstrap3下载地址：http://v3.bootcss.com/getting...
<p>3.Bootstrap 文件目录结构dist
-css
-bootstrap.css
-bootstrap.css.map
-bootstrap.min.css（常用）
-bootstrap-theme.css
-bootstrap-theme.css.map
-bootstrap-theme.min.css
-fonts
-glyphicons-halflings-regular.eot
-glyphicons-halflings-regular.svg
-glyphicons-halflings-regular.ttf
-glyphicons-halflings-regular.woff
-js
-bootstrap.js
-bootstrap.min.js（常用）
-npm.jsBootstrap依赖<p>要想使用 Bootstrap ，那么必须先引入 jQuery（jquery.min.js）文件。<p>5.使用 Bootstrap<p>压缩版本适于实际应用，未压缩版本适于开发调试过程<!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <!-- 可选的Bootstrap主题文件（一般不用引入） --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
Bootstrap 基本模板<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 基本模板</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html><!DOCTYPE html> <html> ... </html>
<head>之中添加 viewport 元数据标签。<meta name="viewport" content="width=device-width, initial-scale=1">
user-scalable=no可以禁用其缩放（zooming）功能，这样后用户只能滚动屏幕。（看情况而定）<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scala=1, user-scalable=no">
body 元素设置 background-color: #fff;@font-family-base、@font-size-base 和 @line-height-base a变量作为排版的基本参数@link-color ，并且当链接处于 :hover 状态时才添加下划线scaffolding.less 文件中找到对应的源码。.container 容器。Bootstrap提供了两个作此用处的类。注意，由于 padding等属性的原因，这两种容器类不能互相嵌套。<p>.container 类用于固定宽度并支持响应式布局的容器。<div class="container"> ... </div>
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。<div class="container-fluid"> ... </div>
.container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。.row 和 .col-xs-4Offizielle Einführung: Ein einfaches, intuitives und leistungsstarkes Front-End-Entwicklungsframework, das die Webentwicklung schneller und einfacher macht. 🎜🎜2.Bootstrap Download🎜🎜Bootstrap3-Download-Adresse: http://v3.bootcss.com/getting...🎜🎜🎜3.Bootstrap Dateiverzeichnisstruktur🎜/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }Bootstrap Abhängigkeiten🎜🎜Erforderlich Wenn Sie Bootstrap verwenden möchten, müssen Sie zunächst die jQuery-Datei (jquery.min.js) einführen. 🎜🎜5. Verwenden Sie Bootstrap🎜🎜Die komprimierte Version eignet sich für praktische Anwendungen und die unkomprimierte Version eignet sich für Entwicklungs- und Debugging-Prozesse offizielle Website. 🎜@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }Bootstrap Basisvorlage🎜<div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div>
<!-- Stack the columns on mobile by making one full-width and the other half-width --> <div class="row"> <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> <div class="row"> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Columns are always 50% wide, on mobile and desktop --> <div class="row"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div> </div>
viewport zu <head> hinzugefügt werden. 🎜<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>
user-scalable=no setzen, sodass der Benutzer nur auf dem Bildschirm scrollen kann. (Das hängt von der Situation ab) 🎜<h1>h1. Bootstrap heading <small>Secondary text</small></h1> <h2>h2. Bootstrap heading <small>Secondary text</small></h2> <h3>h3. Bootstrap heading <small>Secondary text</small></h3> <h4>h4. Bootstrap heading <small>Secondary text</small></h4> <h5>h5. Bootstrap heading <small>Secondary text</small></h5> <h6>h6. Bootstrap heading <small>Secondary text</small></h6>
background-color für das <code>body-Element: #fff;🎜 Die Variablen @font-family-base, @font-size-base und @line-height-base dienen als Grundparameter für den Schriftsatz🎜@link-color für alle Links fest und fügen Sie Unterstreichungen nur hinzu, wenn sich der Link im Status :hover befindet🎜< /ul>🎜 Die entsprechenden Quellcodes für diese Stile finden Sie in der Datei scaffolding.less. 🎜.container-Container, um den Seiteninhalt und das Rastersystem zu umschließen. Bootstrap stellt hierfür zwei Klassen zur Verfügung. Beachten Sie, dass diese beiden Containerklassen aufgrund von Attributen wie padding nicht ineinander verschachtelt werden können. Die Klasse 🎜🎜.container wird für Container mit fester Breite verwendet, die ein responsives Layout unterstützen. Die Klasse 🎜<p class="lead">...</p>
.container-fluid wird für Container mit 100 % Breite verwendet, die das gesamte Ansichtsfenster einnehmen. 🎜You can use the mark tag to <mark>highlight</mark> text.
.container (feste Breite) oder .container-fluid </code enthalten sein > (100 % Breite), um eine ordnungsgemäße Ausrichtung und Polsterung zu gewährleisten. 🎜</li><li>🎜Erstellen Sie eine Gruppe von „Spalten“ in horizontaler Richtung durch „Zeilen“. 🎜</li><li>🎜Ihr Inhalt sollte in „column“ platziert werden und nur „column“ kann ein direktes untergeordnetes Element von row sein. 🎜</li>< li>🎜Vordefinierte Klassen wie <code>.row und .col-xs-4 können zum schnellen Erstellen von Rasterlayouts mithilfe von im Bootstrap-Quellcode definierten Mixins verwendet werden. Kann zum Erstellen semantischer Layouts verwendet werden 🎜.padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。.col-xs-4..col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present./* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }max-width 从而将 CSS 的影响限制在更小范围的屏幕大小之内@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }| 超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
|---|---|---|---|---|
| 栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C | 同左 | 同左 |
.container 最大宽度 | None （自动） | 750px | 970px | 1170px |
| 类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列（column）数 | 12 | 12 | 12 | 12 |
| 最大列（column）宽 | 自动 | ~62px | ~81px | ~97px |
| 槽（gutter）宽 | 30px （每列左右均有 15px） | 同左 | 同左 | 同左 |
| 可嵌套 | 是 | 是 | 是 | 是 |
| 偏移（Offsets） | 是 | 是 | 是 | 是 |
| 列排序 | 是 | 是 | 是 | 是 |
.col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。<p>
<div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div>
.col-xs-*和 .col-md-*。请看下面的实例，研究一下这些是如何工作的。<p>
<!-- Stack the columns on mobile by making one full-width and the other half-width --> <div class="row"> <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> <div class="row"> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Columns are always 50% wide, on mobile and desktop --> <div class="row"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div> </div>
到 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式<p>
<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>
<small> 标签或赋予 .small 类的元素，可以用来标记副标题。<h1>h1. Bootstrap heading <small>Secondary text</small></h1> <h2>h2. Bootstrap heading <small>Secondary text</small></h2> <h3>h3. Bootstrap heading <small>Secondary text</small></h3> <h4>h4. Bootstrap heading <small>Secondary text</small></h4> <h5>h5. Bootstrap heading <small>Secondary text</small></h5> <h6>h6. Bootstrap heading <small>Secondary text</small></h6>
font-size 设置为 <strong>14px，line-height 设置为 <strong>1.428。这些属性直接赋予 元素和所有段落元素。另外， （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。.lead 类可以让段落突出显示。<p class="lead">...</p>
@font-size-base 和 @line-height-base。第一个变量定义了全局 font-size 基准，第二个变量是 line-height 基准。我们使用这些变量和一些简单的公式计算出其它所有页面元素的 margin、 padding 和 line-height。自定义这些变量即可改变 Bootstrap 的默认样式<mark> 标签You can use the mark tag to <mark>highlight</mark> text.
<del> 标签。<p>
<del>This line of text is meant to be treated as deleted text.</del>
<s> 标签。<p>
<s>This line of text is meant to be treated as no longer accurate.</s>
<ins> 标签<p>
<ins>This line of text is meant to be treated as an addition to the document.</ins>
<u> 标签。<p>
<u>This line of text will render as underlined</u>
<small><strong> 标签<em> 标签
<p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p> <p class="text-justify">Justified text.</p> <p class="text-nowrap">No wrap text.</p>
<p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">Capitalized text.</p>
<blockquote> 来表示引用样式。对于直接引用，建议使用 <p> 标签。<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote>
<ul> <li>...</li> </ul>
<ol> <li>...</li> </ol>
For example, <code><section></code> should be wrapped as inline.
kbd 标签标记用户通过键盘输入的内容。<p>
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br> To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"></pre><div class="contentsignin">Nach dem Login kopieren</div></div> 标签。为了正确的展示代码，注意将尖括号做转义处理。
<var></var> 标签标记变量
<samp></samp>-Tag, um den Inhalt der Programmausgabe zu markieren
Das obige ist der detaillierte Inhalt vonLassen Sie uns über die Wissenspunkte sprechen, die Anfänger mit Bootstrap beherrschen müssen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Clonenode-Nutzung
C-Sprache, um das kleinste gemeinsame Vielfache zu finden
Liste der Mac-Tastenkombinationen
Die Rolle der PHP-Sonde
Lösung für das Problem, dass exe-Dateien im Win10-System nicht geöffnet werden können
Häufig verwendete MySQL-Verwaltungstools
Verwendung der sqrt-Funktion in Java
Lösung zum Neustarten und Auswählen des richtigen Startgeräts
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
