検索

ホームページ  >  記事  >  ウェブフロントエンド  >  初心者がBootstrapを使いこなすために必要な知識ポイントについて話しましょう

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

青灯夜游
青灯夜游転載
2020-09-16 11:09:202277ブラウズ

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

チュートリアルの推奨事項: bootstrap チュートリアル

Bootstrap

Bootstrap の中国語 Web サイト: http ://www.bootcss.com/

1.Bootstrap とは何ですか?

公式紹介: Web 開発をより迅速かつシンプルにする、シンプルで直感的、かつ強力なフロントエンド開発フレームワーク。

2.Bootstrap ダウンロード

Bootstrap3 ダウンロード アドレス: http://v3.bootcss.com/getting...

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.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>你好，世界！</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 メタデータ タグを に追加する必要があります。 

<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

クラスは、レスポンシブ レイアウトをサポートする固定幅のコンテナーに使用されます。 <pre class="brush:js;toolbar:false">&lt;div class=&quot;container&quot;&gt; ... &lt;/div&gt;</pre>

.container-fluid

クラスは、幅 100% でビューポート全体を占めるコンテナーに使用されます。 <pre class="brush:js;toolbar:false">&lt;div class=&quot;container-fluid&quot;&gt; ... &lt;/div&gt;</pre>

グリッド システム

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

事前定義クラス

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

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

<p></p> 「行」は
    .container
  • (固定幅) または

    に含まれている必要があります。 (100% 幅) にすると、適切な配置とパディングが施されます。

    「行」を経由して横方向に「列」の集合を作成します。
  • <p></p>コンテンツは「column」内に配置する必要があり、「column」のみが row の直接の子要素になれます。
  • <p></p> 事前定義クラス
    • .row
  • や

    .col-xs-4 などを使用すると、グリッド レイアウトをすばやく作成できます。ブートストラップ ソース コードでは、定義されたミックスインを使用してセマンティック レイアウトを作成することもできます。

  • 通过为“列（column）”设置 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) 中等屏幕 桌面显示器 (≥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 内。

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

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

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

<!-- 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）属性的文本赋予标题的样式

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

<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> 标签或赋予 .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>

页面主体

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 的默认样式

内联文本元素

标记文本

为了高亮文本，可以使用 <mark></mark> 标签

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

被删除的文本

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

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

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

无用文本

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

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

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

插入文本

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

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

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

带下划线的文本

为文本添加下划线，使用 <u></u> 标签。

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

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

小号文本

使用标签 <small></small>

着重强调

使用标签 <strong></strong> 标签

斜体

使用 <em></em> 标签

文本对齐

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

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

改变大小写

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

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

引用

在你的文档中引用其他的来源，可以使用 <blockquote></blockquote> 来表示引用样式。对于直接引用，建议使用 <p></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 标签标记用户通过键盘输入的内容。

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

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>

代码块

多行代码可以使用 <pre class="brush:php;toolbar:false"></pre> 标签。为了正确的展示代码，注意将尖括号做转义处理。

变量

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

プログラム出力

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

次の記事もお楽しみに!

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

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

html5 jquery css bootstrap less html if for 堆 class var JS number 外边距 margin padding viewport background column http
声明：
この記事はsegmentfault.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
前の記事：Node.js+Chrome+Puppeteer を使用して Web サイトをクロールする次の記事：Node.js+Chrome+Puppeteer を使用して Web サイトをクロールする

関連記事

続きを見る