初心者がBootstrapを使いこなすために必要な知識ポイントについて話しましょう-jsチュートリアル-php.cn

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.js

ログイン後にコピー

4.Bootstrap依存関係

Bootstrapを使用する場合は、まず、jQuery (jquery.min.js) ファイルを導入する必要があります。

5. 使用ブートストラップ

圧縮バージョンは実用的なアプリケーションに適しており、非圧縮バージョンは開発とデバッグに適しています

公式Webサイトからダウンロードしたファイルを直接引用します。
Bootstrap 中国語 Web サイトが提供する無料の CDN サービスを使用してください。

<!-- 新 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>

ログイン後にコピー

6.ブートストラップ 基本テンプレート

<!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&#39;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 id="你好-世界">你好，世界！</h1>

    <!-- jQuery (necessary for Bootstrap&#39;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>

ログイン後にコピー

ブートストラップサンプルの選択:http://v3.bootcss.com/getting - starting/#examples

グローバル CSS スタイル

HTML5 ドキュメントタイプ

ブートストラップで使用される一部の HTML 要素および CSS プロパティで必須ページを HTML5 ドキュメントタイプとして指定します。

<!DOCTYPE html>
<html>
  ...
</html>

ログイン後にコピー

モバイルデバイスが優先

bootstrap3 ではモバイルデバイスが優先されます。適切な描画とタッチスケーリングを確保するには、viewport メタデータタグを <head> に追加する必要があります。

<meta name="viewport" content="width=device-width, initial-scale=1">

ログイン後にコピー

モバイルデバイスのブラウザでは、ビューポートを通じてメタ属性を user-scalable=no に設定してズーム機能を無効にし、ユーザーが画面のスクロールのみを行えるようにすることができます。 (状況によって異なります)

<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 という変数を植字用の基本パラメータとして使用します
すべてのリンクの基本色を設定します@link-color。リンクが :hover 状態にある場合にのみ下線を追加します

これらのスタイルに対応するソースコードは、scaffolding.less ファイルにあります。

Normalize.css

クロスブラウザーのパフォーマンスの一貫性を高めるために、ブートストラップは Nicolas Gallagher## によって開発された Normalize.css を使用します。 # および Jonathan Neal によって管理されている CSS リセットスタイルライブラリ。レイアウトコンテナ

ブートストラップは、ページコンテンツとグリッドシステム用の

.container コンテナをラップする必要があります。 Bootstrap は、この目的のために 2 つのクラスを提供します。 padding などの属性により、これら 2 つのコンテナクラスは相互にネストできないことに注意してください。

.container クラスは、レスポンシブレイアウトをサポートする固定幅のコンテナーに使用されます。

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;div class=&quot;container&quot;&gt;
  ...
&lt;/div&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>

.container-fluid クラスは、幅 100% でビューポート全体を占めるコンテナーに使用されます。

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;div class=&quot;container-fluid&quot;&gt;
  ...
&lt;/div&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>

グリッドシステム

Bootstrap は、画面またはビューポートのサイズに合わせてスケールする、応答性の高いモバイルファーストの流動的なグリッドシステムを提供します。増加すると、システムは自動的に分割します。 12列まで。これには、使いやすい

事前定義クラス と、よりセマンティックなレイアウトを生成するための強力な mixin が含まれています。はじめに

グリッドシステムは、行と列の一連の組み合わせを通じてページレイアウトを作成するために使用されます。コンテンツは、作成されたこれらのレイアウトに配置できます。 Bootstrap グリッドシステムの仕組みを紹介します:

「行」は

(固定幅) または に含まれている必要があります。 (100% 幅) にすると、適切な配置とパディングが施されます。
「行」を経由して横方向に「列」の集合を作成します。
コンテンツは「column」内に配置する必要があり、「column」のみが row の直接の子要素になれます。
事前定義クラス
や .col-xs-4 などを使用すると、グリッドレイアウトをすばやく作成できます。ブートストラップソースコードでは、定義されたミックスインを使用してセマンティックレイアウトを作成することもできます。</li><li>通过为“列（column）”设置 <code>padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.
Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .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.

通过研究后面的实例，可以将这些原理应用到你的代码中。

媒体查询

在栅格系统中，我们在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值。

/* 超小屏幕（手机，小于 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) { ... }

ログイン後にコピー

栅格参数

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

	超小屏幕手机 (<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 内。

<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-*。请看下面的实例，研究一下这些是如何工作的。

<!-- 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>

ログイン後にコピー

排版

标题

HTML 中的所有标题标签， 到 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式

<h1 id="h-nbsp-Bootstrap-nbsp-heading">h1. Bootstrap heading</h1>
<h2 id="h-nbsp-Bootstrap-nbsp-heading">h2. Bootstrap heading</h2>
<h3 id="h-nbsp-Bootstrap-nbsp-heading">h3. Bootstrap heading</h3>
<h4 id="h-nbsp-Bootstrap-nbsp-heading">h4. Bootstrap heading</h4>
<h5 id="h-nbsp-Bootstrap-nbsp-heading">h5. Bootstrap heading</h5>
<h6 id="h-nbsp-Bootstrap-nbsp-heading">h6. Bootstrap heading</h6>

ログイン後にコピー

在标题内还可以包含  标签或赋予 .small 类的元素，可以用来标记副标题。

<h1 id="h-nbsp-Bootstrap-nbsp-heading-nbsp-small-Secondary-nbsp-text-small">h1. Bootstrap heading <small>Secondary text</small></h1>
<h2 id="h-nbsp-Bootstrap-nbsp-heading-nbsp-small-Secondary-nbsp-text-small">h2. Bootstrap heading <small>Secondary text</small></h2>
<h3 id="h-nbsp-Bootstrap-nbsp-heading-nbsp-small-Secondary-nbsp-text-small">h3. Bootstrap heading <small>Secondary text</small></h3>
<h4 id="h-nbsp-Bootstrap-nbsp-heading-nbsp-small-Secondary-nbsp-text-small">h4. Bootstrap heading <small>Secondary text</small></h4>
<h5 id="h-nbsp-Bootstrap-nbsp-heading-nbsp-small-Secondary-nbsp-text-small">h5. Bootstrap heading <small>Secondary text</small></h5>
<h6 id="h-nbsp-Bootstrap-nbsp-heading-nbsp-small-Secondary-nbsp-text-small">h6. Bootstrap heading <small>Secondary text</small></h6>

ログイン後にコピー

页面主体

Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 元素和所有段落元素。另外， （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

中心内容

通过添加 .lead 类可以让段落突出显示。

<p class="lead">...</p>

ログイン後にコピー

使用 Less 工具构建

variables.less 文件中定义的两个 Less 变量决定了排版尺寸：@font-size-base 和 @line-height-base。第一个变量定义了全局 font-size 基准，第二个变量是 line-height 基准。我们使用这些变量和一些简单的公式计算出其它所有页面元素的 margin、 padding 和 line-height。自定义这些变量即可改变 Bootstrap 的默认样式

内联文本元素

标记文本

为了高亮文本，可以使用  标签

You can use the mark tag to <mark>highlight</mark> text.

ログイン後にコピー

被删除的文本

对于被删除的文本，可以使用 <del> 标签。

<del>This line of text is meant to be treated as deleted text.</del>

ログイン後にコピー

无用文本

对于无用文本可以使用 <s> 标签。

<s>This line of text is meant to be treated as no longer accurate.</s>

ログイン後にコピー

插入文本

而外插入文本使用 <ins> 标签

<ins>This line of text is meant to be treated as an addition to the document.</ins>

ログイン後にコピー

带下划线的文本

为文本添加下划线，使用  标签。

<u>This line of text will render as underlined</u>

ログイン後にコピー

小号文本

使用标签 

着重强调

使用标签  标签

斜体

使用  标签

文本对齐

<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> 来表示引用样式。对于直接引用，建议使用  标签。

<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 标签标记用户通过键盘输入的内容。

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">ログイン後にコピー</div></div>

标签。为了正确的展示代码，注意将尖括号做转义处理。

变量

通过 <var></var> 标签标记变量

プログラム出力

プログラム出力の内容をマークするには、<samp></samp> タグを使用します。

次の記事もお楽しみに!

プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。！

以上が初心者がBootstrapを使いこなすために必要な知識ポイントについて話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7529

CakePHP チュートリアル

1378

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

ブートストラップ検索バーを取得する方法 Apr 07, 2025 pm 03:33 PM

ブートストラップを使用して検索バーの値を取得する方法：検索バーのIDまたは名前を決定します。 JavaScriptを使用してDOM要素を取得します。要素の値を取得します。必要なアクションを実行します。

ブートストラップの垂直センタリングを行う方法 Apr 07, 2025 pm 03:21 PM

ブートストラップを使用して垂直センタリングを実装します。FlexBoxメソッド：D-Flex、Justify-Content-Center、Align-Items-Centerクラスを使用して、FlexBoxコンテナに要素を配置します。 ALIGN-ITEMS-CENTERクラス方法：FlexBoxをサポートしていないブラウザの場合、親要素の高さが定義されている場合、Align-Items-Centerクラスを使用します。

ブートストラップにスプリットラインを書く方法 Apr 07, 2025 pm 03:12 PM

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。

ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

ブートストラップのサイズを変更する方法 Apr 07, 2025 pm 03:18 PM

Bootstrapの要素のサイズを調整するには、次のものを含むDimensionクラスを使用できます。

ブートストラップのフレームワークをセットアップする方法 Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。

ブートストラップボタンの使用方法 Apr 07, 2025 pm 03:09 PM

ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します

See all articles

初心者がBootstrapを使いこなすために必要な知識ポイントについて話しましょう

Bootstrap

<strong>グローバル CSS スタイル

HTML5 ドキュメント タイプ

モバイル デバイスが優先

タイプセットとリンク

ブートストラップは、ページ コンテンツとグリッド システム用の

媒体查询

栅格参数

实例：从堆叠到水平排列

实例：移动设备和桌面屏幕

<strong>排版

标题

页面主体

中心内容

使用 Less 工具构建

内联文本元素

标记文本

被删除的文本

无用文本

插入文本

带下划线的文本

小号文本

着重强调

斜体

文本对齐

改变大小写

引用

列表

无序列表

有序列表

代码

内联代码

用户输入

代码块

变量

プログラム出力

次の記事もお楽しみに!

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

HTML5 ドキュメントタイプ

モバイルデバイスが優先

ブートストラップは、ページコンテンツとグリッドシステム用の