ディレクトリ
ブートストラッププロフィール
- 応答レイアウト：レイアウトを動的にブラウザ画面のサイズをすることができます
- インストール：
- ダウンロードbootstrap3.3.7への公式サイト
- bootstrap.min.cssを残してのcssフォルダ
- 動かないフォルダのフォント
- bootstrap.min.jsを残しフォルダJS
- jQueryのブートストラップフレームはそれほど動的効果は、jQueryのをインポートする必要があり、フレームと、基づいています
- 1. jQueryの、2 CSSファイル、3 JSファイル：インポートするファイル
- ブートストラップ学習コンテンツ：CSSスタイル、コンポーネント、JSプラグイン
ページレイアウト
Normalize.css
- スタイルのブラウザのレンダリングが同じであることを確実にするために、
レイアウトコンテナ
- フレームのフロントエンドを使用した後、すべての調整は、クラスによって、スタイル、すべての属性値にラベルを付けます
<div class="container"></div>右と左のブランク<div class="container-fluid"></div>、フルスクリーン表示
グリッドシステム
デフォルトでは、各ギルドは12ポイントに分け、COL-MD-のNumによって選択することができますが、いくつかのアカウントをしたいです
すでにビットを占め注意は、ビット、および12部の必要性を残しました
格子パラメーター：XS、超小型スクリーン; SM、小さな画面、MD、媒体画面; LG、大画面
コード：
<div class="container"><div class="row">...</div></div>カラムは、オフセット：
<div class="col-md-6 c1 col-md-offset-3"></div>、右に3シフト行で割っネストされた列
<style> .c1 { background-color: red; height: 50px; border: 2px solid black; } </style> <div class = "container"> <div class = "row c1"> <div class = "col-md-3 c1"></div> <div class = "col-md-9 c1"></div> <div class = "col-sm-3 c1"></div> <!--响应式布局--> <div class = "col-sm-9 c1"></div> </div> </div>
報道関係お問い合わせ先
レイアウトの内部に応じて、画面幅未満500pxなど、置換パターンC1に
<style>
@media screen and (max-width: 500px){
.c1 {
background-color: yellow;
height: 50px;
border: 2px dashed purple;
}
}
</style>テキストスタイル
テキストスタイル
<h1>python脱产12期 <small>是最牛逼的</small></h1>、小型ラベルマークサブタイトル
<p class="lead">python脱产12期</p>コンテンツのため、リード段落タグ強調表示されました
<p class="lead">python脱产<mark>12期</mark></p>、マーク・ラベルテキストが強調表示されます
<em>python脱产12期</em>, 斜体
<p class = "text-center">python脱产12期</p>、テキストの配置
<abbr title="一种编程语言">python</abbr>略語
<address>[email protected]</address>、Eメール
<!--引用-->
<blockquote>
<p>人生无处不青山</p>
<footer class="blockquote-reverse">maozedong<cite title="Source Title">主席诗文集</cite></footer>
</blockquote> <code>print('hello world')</code>、単一のコード行
<pre><p>Sample text here...</p></pre>コードの、複数行
表スタイル
表ホバー：ロールオーバー状態に応じて、表の各行
テーブルストライプ：表ストライプ
表-接し：表の罫線
クラス=「成功」：色設定行またはセル
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2"> <!--占8份然后居中-->
<h2 class="text-center">数据展示</h2>
<table class="table table-hover table-striped table-bordered">
<thead>
<tr class="success">
<th>用户名</th>
<th>密码</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr class="info">
<td>jason</td>
<td>123</td>
<td>学习</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>JSプラグイン
モーダルフレーム
スクロールモニタ
タブ
フォームのスタイル
フォームコントロール：フォームはプラススタイルを追加します
フォームグループ：ブロックレベルのラベルが追加され、次にギャップを増加させます
フォームインライン：インラインスタイル、ライン入力ボックス
clearfix：浮動によってもたらされたクリアな影響
プレースホルダ：テキスト空白
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 class="text-center">注册页面</h2>
<form action="" class = "form-inline">
username: <input type="text" class="form-control">
password: <input type="text" class="form-control">
<p class="form-group"><input type="submit" class="btn btn-success"></p>
<p><a href="#" class="btn btn-success btn-lg">点我有你好看</a></p>
</form>
</div>
</div>
</div>例：チェックユーザ名が存在します
プル右：右浮動
エラーチェックのステータスメッセージ：クラス=「 - エラーが発生しました」
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 class="text-center">注册页面</h2>
<form action="">
<div class="form-group">
username: <input type="text" class="form-control" id="d2">
<span style="color: red" class="pull-right"></span>
<br>
<input type="button" class="btn btn-success pull-right" value="注册" id="d1">
</div>
</form>
</div>
</div>
</div>
<script>
$('#d1').on(
'click', function () {
var userVal = $('#d2').val();
if (userVal.length == 0) {
$(this).parent().addClass('has-error').children().eq(1).text('用户名不能为空!')
}
}
);
$('#d2').on(
'focus', function () {
$(this).next().text('').parent().removeClass('has-error')
}
)
</script>パッケージ
フォントのアイコン
アイコンはテキスト処理として使用することができます
<span class="glyphicon glyphicon-user"></span>
アイコンライブラリ：フォント恐ろしい - >ダウンロードフォント - 素晴らしい-4.7.0 - >リンク導入... min.css - >英語検索
ナビゲーション
クラス=「ナビゲーションバー-逆」：アンチ色ナビゲーション
ボタングループ
カラー：btn-色
サイズ：btn-サイズ; BTNブロック、親タグに延伸100％の幅
IMAX
パネル
絵
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">背景色
<p class = "bg-danger">123</p>
！重要：最高の優先順位の実装、インラインスタイルよりも高いです
ビルドページへのライブラリ管理システム
<!--导航条开始-->
<nav class="navbar navbar-inverse"...></nav>
<!--导航条结束-->
<div class="container">
<div class="row">
<div class="col-md-3">
<!--列表组开始-->
<div class="list-group">
</div>
<!--列表组结束-->
</div>
<div class="col-md-9">
<!--面板开始-->
<div class="panel panel-default">
<!--分页开始-->
<div class="text-center">
<nav aria-label="Page navigation">
</nav>
</div>
<!--分页结束-->
</div>
<!--面板结束-->
</div>
</div>
</div>