ブートストラップとは何ですか? BootStrap の構造と構成の概要-jsチュートリアル-php.cn

ブートストラップとは何ですか? BootStrap の構造と構成の概要

不言

リリース： 2018-10-13 16:08:12

転載

3357 人が閲覧しました

この記事では、BootStrap とは何ですか?ブートストラップは何で構成されていますか?困っている友人は参考にしていただければ幸いです。

1. はじめに

Bootstrap は、HTML、CSS、JAVASCRIPT に基づくフロントエンドフレームワークであり、CSS スタイルとそれに対応する jquery コードを事前に定義します。メディアクエリ (css3 メディアクエリ) を使用しているため、応答性の高いレイアウト (複数の端末と互換性があります) (関連する無料ビデオの推奨: bootstrap チュートリアル )

2.BootStrap の構成

1.12 グリッドシステム: 画面を 12 列に分割し、行を使用して要素を整理し、列内にコンテンツを配置します。

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

ログイン後にコピー

2: ブートストラップによって提供されるさまざまな基本レイアウトコンポーネント。

(1)

    <!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <!-- Bootstrap -->
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">

ログイン後にコピー

の導入 (2) デフォルトのスタイルテーブル (tr は行、td は行の列、th はタイトル列で、td と同等)

 <table class="table">
   
 <th scope="row">1</th>

ログイン後にコピー

(3) 境界線付きテーブル

 <table class="table-bordered">

ログイン後にコピー

(4) フォーム

<form>
    <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>

ログイン後にコピー

(5) ボタン

  <button type="submit" class="btn btn-default">Submit</button>
  <button type="submit" class="btn btn-primary">Transfer cash</button>

ログイン後にコピー

3.jquery: すべての JavaScript プラグインブートストラップは Jquery に依存します (jquery ライブラリの紹介に注意してください)

4.css コンポーネント: ブートストラップは多くの CSS コンポーネントを事前実装します

5.javascript プラグイン: ブートストラップはいくつかの JS プラグを提供します-ins

6 .レスポンシブデザイン:複数端末対応

以上がブートストラップとは何ですか? BootStrap の構造と構成の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。