ディレクトリ
0.はじめに
- 公式がある中国の文書非常に詳細に記述されたが、
- 私は、可能な場合、ここで、情報を入れて、オープンクラスの言及再び、またより引用中国の公式ウェブサイト
1.基本テンプレート
- これが示され、簡単なブートストラップページです
code1
<!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标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- 下载后可以换成相对路径 -->
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1> <!-- 字体做了一定的美化 -->
<!-- (1) 下文的代码，写在此处 -->
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>2.レイアウトコンテナ
- 書かれたコードCODE1で（1）
2.1コンテナ
- デフォルトでは、中心
- 固定幅
- 応答性のレイアウトをサポートしています
<div class="container" style="height:100px;background:red">
container
</div>2.2容器流体
- 100％の幅
- ビューポート全体（ビューポート）を占めます
<div class="container-fluid" style="height:100px;background:green">
container-fluid
</div>3.グリッドシステム
- ブートストラップは、スクリーンまたはビューポート（ビューポート）サイズの増加に伴って、応答して、モバイルデバイスの優先ストリーミンググリッドシステムを提供し、システムは自動的に12の最大に分割され
- それは、使いやすい含まれている定義済みのクラスを、強くあり、より意味的なレイアウトを生成するためのミックスインは、
3.1はじめに
- グリッド・システムは行（行）とカラム（列）のシリーズを組み合わせることにより、ページレイアウトを作成するために使用され、あなたはこれらの内容を置くことができます良いレイアウトを作成します
3.2グリッドパラメータ
- 次の表によるブートストラップ・グリッド・システムの詳細図は、スクリーンデバイスの様々な操作方法であります
| 超小型画面 の携帯電話（<768px） |
小さなスクリーン タブレット（≥768px） |
ミディアムスクリーン デスクトップモニタ（≥992px） |
大画面 の大きなデスクトップモニタ（≥1200px） |
|
|---|---|---|---|---|
| グリッド・システムの挙動 | 常に水平に配置され | 最初に一緒に積み重ね、 それは閾値レベル構成Cよりも大きくなります |
||
.container最大幅 |
なし（自動） | 750px | 970px | 1170px |
| クラス接頭辞 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| 列 の列数 |
12 | |||
| 最大列幅 | オートマチック | 〜62px | 〜81px | 〜97px |
| ガター 幅 |
30px （各列は、15ピクセルの周りにあります） |
|||
| ネスト可能 | それはあります | |||
| オフセット オフセット |
それはあります | |||
| 列の並べ替え | それはあります |
実施例3.3：スタックから水平配列に
- 単一セットの使用
.col-md-*（この範囲は、小さな画面に超小型スクリーン）のグリッドクラスを、あなたは基本的なグリッドシステムを作成することができ、携帯電話やタブレットデバイスに始まる一緒に積層され、デスクトップ（中）画面水平配向デバイスとなります - すべての「列（列）が置かれなければならない」
.row内 - 以下のために、テーブルは、状況をシミュレートするように構成されている
col-md-1いくつかの長さ、私はcm-1代わりにからなります
| スタックから水平に配置します | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| CM-1 | CM-1 | CM-1 | CM-1 | CM-1 | CM-1 | CM-1 | CM-1 | CM-1 | CM-1 | CM-1 | CM-1 |
| COL-MD-8 | COL-MD-4 | ||||||||||
| COL-MD-4 | COL-MD-4 | COL-MD-4 | |||||||||
| COL-MD-6 | COL-MD-6 | ||||||||||
- 例：以下は、3列のレイアウトであります
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-xs-1 col-sm-6" style="background:coral">col-md-3</div>
<div class="col-md-6 col-xs-1 col-sm-3" style="background:rosybrown">col-md-6</div>
<div class="col-md-3 col-xs-1 col-sm-3" style="background:dimgray">col-md-3</div>
</div>
</div>2.4モバイルデバイスとデスクトップ画面
- 表示画面サイズのセットの実際の大きさに応じて
- あなたは、効果を確認するには、ブラウザのサイズを変更することができます
2.5オフセット
- 例を黙れ
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-md-offset-2" style="background:#659">col-md-4</div>
<div class="col-md-4" style="background:red">col-md-4</div>
<div class="col-md-4" style="background:pink">col-md-4</div>
</div>
</div>2.6ネストした列
- 例を黙れ
<div class="container-fluid">
<div class="row">
<div class="col-md-6" style="background:red;height:40px">
<div class="row">
<div class="col-md-6" style="background:blue;height:20px"></div>
</div>
</div>
<div class="col-md-6" style="background:pink;height:40px"></div>
</div>
</div>その他2.7
- 線配置
- 列の並べ替え
- 待って
4.レスポンスツール
- オーダーモバイルデバイスに優しいページの開発作業、メディアクエリの使用をスピードアップし、異なるデバイスのためのこれらのツールを使用することで簡単にページのコンテンツを表示または非表示にすることができます;プリンタがコンテンツを表示または非表示にするためにもツールが含まれています
- 同じサイトの完全に異なるバージョンを作成しないようにするために、このようなツールの使用をターゲット;逆に、これらのツールを使って、異なるデバイス上のプレゼンテーションのさまざまな形態を提供することができます
4.1使用可能なクラス
- 単独で、または、下記の組み合わせのクラスですることで、異なる画面サイズがページを非表示にしたり表示することができますのために
| 超小型の携帯電話の画面 （<768px） |
小さな薄型 （≥768px） |
中等度のデスクトップ画面 （≥992px） |
大画面のデスクトップ （≥1200px） |
|
|---|---|---|---|---|
.visible-xs-* |
目に見えます | 隠します | 隠します | 隠します |
.visible-sm-* |
隠します | 目に見えます | 隠します | 隠します |
.visible-md-* |
隠します | 隠します | 目に見えます | 隠します |
.visible-lg-* |
隠します | 隠します | 隠します | 目に見えます |
.hidden-xs |
隠します | 目に見えます | 目に見えます | 目に見えます |
.hidden-sm |
目に見えます | 隠します | 目に見えます | 目に見えます |
.hidden-md |
目に見えます | 目に見えます | 隠します | 目に見えます |
.hidden-lg |
目に見えます | 目に見えます | 目に見えます | 隠します |
- V3.2.0のバージョンから、のような形を
.visible-*-*、クラスごとに画面サイズが異なる各CSSのための3つのバリエーションがありdisplay、下記の特性：
| クラスタ | CSS display |
|---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
- したがって、超小型スクリーン（
xs）、例えば、利用可能な.visible-*-*カテゴリは.visible-xs-block次のとおり、.visible-xs-inlineおよび.visible-xs-inline-block .visible-xs、.visible-sm、.visible-mdそして.visible-lgクラスも存在します。しかし、V3.2.0バージョンから始めて、もはや推奨されていない以外、<table>要素に関連する例外的な状況では、と彼らは.visible-*-blockほとんど同じ
5.組版
5.1タイトル
- HTMLのすべてのタイトルタグ、
<h1>ために<h6>使用すること - また、また、提供
.h1する.h6インラインテキスト（インライン）を与えるために、このクラスは、タイトルスタイル属性を与えます - ヘッダにさらに含むことができる
<small>ラベルまたは付与.small型素子を、字幕をマークするために使用することができます - 例を黙れ
<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>
<p class="h1 text-center">h1. Bootstrap <small>heading</small></p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>その他5.2
- インラインテキスト要素
- 揃え
- 大文字と小文字の変更
- 略語
- アドレス
- 引用文
- リスト
- 待って
6.フォーム
基本的な6.1の例
- 任意の
<table>ラベルを加え.table基本的なスタイルを付与するためのクラス-補体の量（パディング）、横方向分割線 - 这种方式看起来很多余！？但是官方觉得，表格元素使用的很广泛，如果他们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以他们选择将此样式独立出来
6.2 举例
<!--
table-striped 条纹状表格
table-bordered 带边框的表格
table-hover 鼠标悬停
table-condensed 紧缩表格
-->
<table class="table table-striped table-bordered table-hover table-condensed">
<tr>
<td>序号</td>
<td>姓名</td>
<td>性别</td>
</tr>
<tr>
<td>1</td>
<td>zhangsan</td>
<td>nan</td>
</tr>
<tr>
<td>2</td>
<td>Lisi</td>
<td>nan</td>
</tr>
<tr>
<td>3</td>
<td>Wangwu</td>
<td>nan</td>
</tr>
</table>6.3 其他
- 条纹状表格
- 带边框的表格
- 紧缩表格
- 状态类
- 响应式表格
7. 表单
7.1 基本实例
- 单独的表单控件会被自动赋予一些全局样式。所有设置了
.form-control类的<input>、<textarea>和<select>元素都将被默认设置宽度属性为width: 100%; - 将
label元素和前面提到的控件包裹在.form-group中可以获得最好的排列 - 少废话，上例子
<input type="text" class="form-control">7.2 其他
- 内联表单
- 水平排列的表单
- 下拉列表(select)
- 静态控件
- 焦点状态
- 禁用状态
- 只读状态
- 校验状态
- 等