ブートストラップフロントエンド開発フレームワーク
推奨される学習URL
- 中国の公式ウェブサイト：http：//www.bootcss.com/
- 公式ウェブサイト：http：//getbootstrap.com
- 推奨用途：http：//bootstrap.css88.com/
ブートストラップの使用
1.推奨されるディレクトリ構造
2.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">
<!--[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]-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
内容
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>
3.ラスタープレフィックス分類
| 〜 | 超小型画面（携帯電話） <768px |
小画面デバイス（タブレット） > = 768px |
中画面（PC） > = 992px |
ワイドスクリーンデバイス > = 1200px |
|---|---|---|---|---|
| 。コンテナの最大幅 | 自動（100％） | 750px | 970px | 1170px |
| クラスプレフィックス | .col-xs- | .col-sm- | .col-md- | .col-lg- |
4.グリッドネストテーブル（詳細に注意してください）
<div class="row">
<div class="col-md-4">
<!-- 最好增加row行，这样可以取消父元素的padding，且高度和父级一样 -->
<div class="row">
<!-- 也是将父容器分12等分 -->
<div class="col-md-6">a</div>
<div class="col-md-6">b</div>
</div>
</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
5.グリッド-列オフセット
<div class="container">
<div class="row">
<div class="col-md-4">左侧</div>
<div class="col-md-4 col-md-offset">右侧</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">中间</div>
</div>
</div>
6.グリッド-列の並べ替え
<div class="container">
<div class="row">
<!-- 将左侧的盒子-推到右侧8个位置 -->
<div class="col-md-4 col-md-push-8">左侧</div>
<!-- 将右侧的盒子-拉回右侧4个位置 -->
<div class="col-md-4 col-md-pull-4">右侧</div>
</div>
</div>
7.レスポンシブツール
| クラス名 | 画面サイズを非表示 |
|---|---|
| .hidden-xs | 超小型画面 |
| .hidden-sm | 小さな画面 |
| .hidden-md | ミドルスクリーン |
| .hidden-lg | 大画面 |
代わりに、クラス名：visible-xsvisible-smvisible-mdvisible-lg
8.コンテナの最大幅を1280pxに変更します
@media screen and (min-width:1280px){
.container{
width: 1280px;
}
}
9.アイコンの使用
// 直接复制图标编码到对应元素
<div class="nav">
<a href="#" class="glyphicon glyphicon-camera">照相机</a>
</div>
効果は次のとおりです。
スタイルを調整します。
.nav a::before{
vertical-align: middle;
padding-right: 5px;
}
効果は次のとおりです。
