ホームページ > 記事 > ウェブフロントエンド > ブートストラップとは何ですか? BootStrap の構造と構成の概要
ブートストラップとは何ですか? BootStrap の構造と構成の概要
- 不言転載
- 2018-10-13 15:51:163315ブラウズ
この記事では、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 プラグを提供します-ins6 .レスポンシブデザイン:複数端末対応
以上がブートストラップとは何ですか? BootStrap の構造と構成の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はsegmentfault.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。