bootstrap詳細(CSS)
13864 ワード
1、引用
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<script src="jquery-3.2.1.min.js">script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js">script>
2、文書タイプ
HTML 5ドキュメントが必要です
3、モバイル機器優先
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
4、レイアウトコンテナ
ビューポートに基づいてコンテナボックスのサイズを決定し、コンテナボックスを中央に配置します.一般的なボックス幅=117 px
"container">
...
5、グリッドシステム
容器内の1行は12格子に分けられ、各行divのclass=“row”であり、各要素divがn格子を占める場合、class=“col-md-n”
holder.js自動生成1枚の図一時占有
<div class="container">
<h1> h1>
<div class="row">
<div class="col-md-3">
<img src="holder.js/100%x200" alt="">
div>
<div class="col-md-3">
<img src="holder.js/100%x200" alt="">
div>
<div class="col-md-3">
<img src="holder.js/100%x200" alt="">
div>
<div class="col-md-3">
<img src="holder.js/100%x200" alt="">
div>
div>
<div class="row">
<div class="col-md-3">
<img src="holder.js/100%x200" alt="">
div>
<div class="col-md-3">
<img src="holder.js/100%x200" alt="">
div>
<div class="col-md-3">
<img src="holder.js/100%x200" alt="">
div>
<div class="col-md-3">
<img src="holder.js/100%x200" alt="">
div>
div>
<div class="row">
<div class="col-md-3">
<img src="holder.js/100%x200" alt="">
div>
<div class="col-md-3">
<img src="holder.js/100%x200" alt="">
div>
<div class="col-md-3">
<img src="holder.js/100%x200" alt="">
div>
<div class="col-md-3">
<img src="holder.js/100%x200" alt="">
div>
div>
div>
col-lg-n:ビューポートが大きい()から折り返しcol-md-n:(推奨)col-sm-n:col-xs-n:ビューポートが小さいから折り返し始めます
col-md-offset-n:要素の左側にn個の格子が空いています
行に含まれる要素に12個以上の格子が含まれている場合は、改行
6、レイアウト
タイトル:.page-header段落:.lead
表:table:変表に縞がある.table-bordered:変格子.table-hover:マウスを上に移動
セルのスタイル:.success:緑.Active:グレー.info:青です.warning:黄色です.danger:赤
<table class="table table-bordered table-hover">
<tr class="warning">
<th>IDth>
<th> th>
<th> th>
tr>
<tr class="active">
<td>111td>
<td>111td>
<td>111td>
tr>
<tr class="success">
<td>111td>
<td>111td>
<td>111td>
tr>
<tr class="info">
<td>111td>
<td>111td>
<td>111td>
tr>
<tr class="danger">
<td>111td>
<td>111td>
<td>111td>
tr>
table>