BootStrapフレームワークの使用概要
115298 ワード
BootStrapフレームワーク
概要:
BootstrapはHTML/CSS/JSに基づくフロントエンドオープンソースフレームワークであり、モバイル端末およびPC端末の応答型ウェブページを迅速に構築できるフロントエンドフレームワークである.
手順の使用
class値
1.テキストの配置
2.リストスタイル
ol/ulラベルのliラベルを変更するためのリストスタイル.
コード:
コードブロックスタイルインラインコード: そのまま表示コードブロック:
bootstrapコードブロック:
前景色(テキスト色):
バックグラウンド(バックグラウンドカラー):
注意:バックグラウンドを使用すると、バックグラウンドのスタイルが自動的に変更される場合があります.
ケース:
基本表スタイル
ケース:
ストライプ表スタイル
ケース:
外枠表スタイル
ケース:
表スタイルを固定
ケース:
trのスタイルを個別に指定
ケース:
テキストアイコン
コンポーネント・Bootstrap v 3中国語ドキュメント_WPS画像
ケース:
ボタンの色
使用方法:
ケース:
ボタン寸法スタイル
ケース:
ボタンの有効化と無効化のスタイル:
フォームスタイル(入力ボックス)
bootstrapでフォームの入力ボックスにスタイルを追加する場合は、inputラベルはtype値を指定する必要があります.値がtextであっても、明示的に指定する必要があります.ブロックレベル入力ボックス
ケース:
インライン入力ボックス
ケース:
入力ボックスサイズ
ケース:
モバイルデバイス優先
グリッドシステム
グリッド行
スクリーンサイズとクラス接頭辞
グリッドネスト
グリッド行の各グリッド数を占めるサブエレメントは、新しいグリッドコンテナとして使用することができる.グリッドの画像オーバーフローの問題グリッドのグリッドのグリッドのため、固定された幅が指定されています!画像の内容が大きすぎると、コンテンツがオーバーフローする、グリッドシステムが応答的なストリームレイアウトであるため、オーバーフローの問題が発生しやすい.
ソリューション:
表示と非表示
上記のclass値のパラメータ:inline/inline-block/blockは、表示時にどのような要素タイプで表示するかを示す.
基本ナビゲーション
ケース:
ナビゲーションバー
ケース
コンテンツ切り替えナビゲーション
ケース:
ナビゲーションバー
ケース:
ナビゲーションバーに関する設定
1.ナビゲーションバーのタイトルの追加
navラベルには、前のサブdiv、class=「navbar-header」があります.divネストspanラベル、class=“navbar-brand”spanの内容がタイトルです
ケース:
2. フォームの追加
ケース:
3. ナビゲーション内のコンテンツの表示位置の制御
4.ナビゲーションバーのすべての内容をグリッドコンテナに入れて、内容の左右の余白5を実現する.ガイドバーに通常のテキストを追加
•文字はspanラベルで追加され、spanのclass=「navbar-text」
上部に固定:
下に固定:
静的ナビゲーションバー
概要:
BootstrapはHTML/CSS/JSに基づくフロントエンドオープンソースフレームワークであり、モバイル端末およびPC端末の応答型ウェブページを迅速に構築できるフロントエンドフレームワークである.
手順の使用
1. www.bootcss.com
2.
- fonts :
- css :
- js :
3. , webContent
4. Jquery.js
5. BootStrap js css
js : js/bootstrap.min.js
css : css/bootstrap.css
6.
class値
1.テキストの配置
class:
- text-left :
- text-center :
- text-right :
2.リストスタイル
ol/ulラベルのliラベルを変更するためのリストスタイル.
class:
- list-unstyled :
- list-inline : li , , .
コード:
<div>
<h3> </h3>
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
<div>
<h3>BootStrap :list-unstyled</h3>
<ul class="list-unstyled">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
<div>
<h3>BootStrap :list-inline</h3>
<ul class="list-inline">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
コードブロックスタイル
<code> </code>
:( )
<kbd> </kbd>
<pre>
, ( : )!
</pre>
bootstrapコードブロック:
<div class="well">
,
</div>
前景色と後景色
前景色(テキスト色):
class :
- text-muted :
- text-success :
- text-info :
- text-primary :
- text-warning :
- text-danger :
バックグラウンド(バックグラウンドカラー):
注意:バックグラウンドを使用すると、バックグラウンドのスタイルが自動的に変更される場合があります.
class :
- bg-success :
- bg-info :
- bg-primary :
- bg-warning :
- bg-danger :
ケース:
<div class="text-muted"> , </div>
<div class="text-success"> </div>
<div class="text-info"> </div>
<div class="text-primary"> </div>
<div class="text-warning"> </div>
<div class="text-danger"> </div>
<br><br><br><br><br><br><br><br><br><br><br><br>
<div style="color:#f00"> , </div>
<div style="color:#0f0"> </div>
<div style="color:#00f"> </div>
<br><br><br><br><br><br><br><br><br><br><br><br>
<div class="bg-success"> , </div>
<div class="bg-info"> </div>
<div class="bg-primary"> ， </div>
<div class="bg-warning"> </div>
<div class="bg-danger"> ?</div>
表スタイル
基本表スタイル
class : table
ケース:
<h3> </h3>
<table class="table">
<tr><th> </th><th> </th><th> </th><th> </th><th> </th></tr>
<tr><td>1001</td><td> - </td><td> </td><td> </td><td>9.8</td></tr>
<tr><td>1002</td><td> - </td><td> </td><td> </td><td>19.8</td></tr>
<tr><td>1003</td><td> - </td><td> </td><td> </td><td>998</td></tr>
<tr><td>1004</td><td> - </td><td> </td><td> </td><td>21800</td></tr>
<tr><td>1005</td><td> - </td><td> </td><td> </td><td>21900</td></tr>
</table>
ストライプ表スタイル
class : table table-striped
ケース:
<h3> </h3>
<table class="table table-striped">
<tr><th> </th><th> </th><th> </th><th> </th><th> </th></tr>
<tr><td>1001</td><td> - </td><td> </td><td> </td><td>9.8</td></tr>
<tr><td>1002</td><td> - </td><td> </td><td> </td><td>19.8</td></tr>
<tr><td>1003</td><td> - </td><td> </td><td> </td><td>998</td></tr>
<tr><td>1004</td><td> - </td><td> </td><td> </td><td>21800</td></tr>
<tr><td>1005</td><td> - </td><td> </td><td> </td><td>21900</td></tr>
</table>
外枠表スタイル
class : table table-bordered
ケース:
<h3> </h3>
<table class="table table-bordered">
<tr><th> </th><th> </th><th> </th><th> </th><th> </th></tr>
<tr><td>1001</td><td> - </td><td> </td><td> </td><td>9.8</td></tr>
<tr><td>1002</td><td> - </td><td> </td><td> </td><td>19.8</td></tr>
<tr><td>1003</td><td> - </td><td> </td><td> </td><td>998</td></tr>
<tr><td>1004</td><td> - </td><td> </td><td> </td><td>21800</td></tr>
<tr><td>1005</td><td> - </td><td> </td><td> </td><td>21900</td></tr>
</table>
表スタイルを固定
class : table table-hover
ケース:
<h3> </h3>
<table class="table table-hover">
<tr><th> </th><th> </th><th> </th><th> </th><th> </th></tr>
<tr><td>1001</td><td> - </td><td> </td><td> </td><td>9.8</td></tr>
<tr><td>1002</td><td> - </td><td> </td><td> </td><td>19.8</td></tr>
<tr><td>1003</td><td> - </td><td> </td><td> </td><td>998</td></tr>
<tr><td>1004</td><td> - </td><td> </td><td> </td><td>21800</td></tr>
<tr><td>1005</td><td> - </td><td> </td><td> </td><td>21900</td></tr>
</table>
trのスタイルを個別に指定
class :
- active :
- success :
- info :
- warning :
- danger :
- sr-only :
ケース:
<h3> tr </h3>
<table class="table table-striped table-bordered table-hover">
<tr class="active"><th> </th><th> </th><th> </th><th> </th><th> </th></tr>
<tr class="success"><td>1001</td><td> - </td><td> </td><td> </td><td>9.8</td></tr>
<tr class="info"><td>1002</td><td> - </td><td> </td><td> </td><td>19.8</td></tr>
<tr class="warning"><td>1003</td><td> - </td><td> </td><td> </td><td>998</td></tr>
<tr class="danger"><td>1004</td><td> - </td><td> </td><td> </td><td>21800</td></tr>
<tr class="sr-only"><td>1005</td><td> - </td><td> </td><td> </td><td>21900</td></tr>
</table>
テキストアイコン
コンポーネント・Bootstrap v 3中国語ドキュメント_WPS画像
, class
:
1. span
2. span , class
ケース:
<span class="glyphicon glyphicon-search" style="color:#0f0;font-size:100px"></span>
ボタンスタイル
ボタンの色
class:
- btn :
- btn btn-default :
- btn btn-success :
- btn btn-info :
- btn btn-primary :
- btn btn-warning :
- btn btn-danger :
- btn btn-link :
使用方法:
class , :
1. span ( )
2. button
3. input
4. a
ケース:
<h3>bootstrap </h3>
<span class="btn btn-default"> span</span>
<button class="btn btn-default"> button</button>
<input type="button" value=" input" class="btn btn-default">
<a href="#" class="btn btn-default"> a</a>
<h3>bootstrap </h3>
<span class="btn btn-default"> </span>
<span class="btn btn-success"> </span>
<span class="btn btn-info"> </span>
<span class="btn btn-primary"> </span>
<span class="btn btn-warning"> </span>
<span class="btn btn-danger"> </span>
<span class="btn btn-link"> </span>
ボタン寸法スタイル
class:
- btn-lg :
- btn-sm :
- btn-xs :
- btn-block : , ,
ケース:
<span class="btn btn-success btn-lg"> </span><br><br>
<span class="btn btn-success"> </span><br><br>
<span class="btn btn-success btn-sm"> </span><br><br>
<span class="btn btn-success btn-xs"> </span><br><br>
<span class="btn btn-success btn-block"> </span>
ボタンの有効化と無効化のスタイル:
class:
- active : ( )
- disabled:
:
<span class="btn btn-info"> </span>
<span class="btn btn-info active"> </span>
<span class="btn btn-info disabled"> </span>
フォームスタイル(入力ボックス)
bootstrapでフォームの入力ボックスにスタイルを追加する場合は、inputラベルはtype値を指定する必要があります.値がtextであっても、明示的に指定する必要があります.ブロックレベル入力ボックス
class : form-control
ケース:
<body style="background-image: url('images/1.jpg')">
<div style="width:500px;height:300px;margin: 100px auto;padding:50px;background-color: rgba(111,111,111,0.9)">
<form action="">
<input placeholder=" " class="form-control"><br><br>
<input placeholder=" " class="form-control"><br><br>
<button class="btn btn-success btn-block"> </button>
</form>
</div>
</body>
インライン入力ボックス
class :
1. form class = form-inline
2. input class= form-control
ケース:
<form action="" class="form-inline">
<input placeholder=" " class="form-control"><br><br>
<input placeholder=" " class="form-control"><br><br>
<button class="form-control"> </button>
</form>
入力ボックスサイズ
class :
- input-lg :
- input-sm :
ケース:
<form action="" class="form-inline">
<input placeholder=" " class="form-control input-lg" type="text"><br><br>
<input placeholder=" " class="form-control" type="text"><br><br>
<input placeholder=" " class="form-control input-sm" type="text"><br><br>
<button class="form-control btn-success"> </button>
</form>
おうとうしき
モバイルデバイス優先
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
グリッドシステム
Bootstrap .
:
1.
<div class="container"></div>
2. 100%
<div class="container-fluid"></div>
グリッド行
, ,
div , class row
, 12 , , 12 , .
, , , .
<div class="row"></div>
スクリーンサイズとクラス接頭辞
<768px( ) auto col-xs-
768px≤ ＜992px 750px col-sm-
992px≤ ＜1200px 970px col-md-
1200px≤ 1170px col-lg-
グリッドネスト
グリッド行の各グリッド数を占めるサブエレメントは、新しいグリッドコンテナとして使用することができる.グリッドの画像オーバーフローの問題グリッドのグリッドのグリッドのため、固定された幅が指定されています!画像の内容が大きすぎると、コンテンツがオーバーフローする、グリッドシステムが応答的なストリームレイアウトであるため、オーバーフローの問題が発生しやすい.
ソリューション:
1. .
2. , .
3. div , class="thumbnail" ( )
表示と非表示
class <768px( ) 768px≤ ＜992px 992px≤ ＜1200px 1200px≤
visible-xs-
visible-sm-
visible-md-
visible-lg-
hidden-xs
hidden-sm
hidden-md
hidden-lg
上記のclass値のパラメータ:inline/inline-block/blockは、表示時にどのような要素タイプで表示するかを示す.
ナビゲーションバー
基本ナビゲーション
:
1. ul class="nav"
2. ul li
3. li , li
ケース:
<ul class="nav">
<li><a href="javascript:void(0)"> </a></li>
<li><a href="javascript:void(0)"> </a></li>
<li><a href="javascript:void(0)"> </a></li>
<li><a href="javascript:void(0)"> </a></li>
<li><a href="javascript:void(0)"> **</a></li>
<li><a href="javascript:void(0)"> </a></li>
</ul>
ナビゲーションバー
:
1. ul class="nav nav-tabs"
2. ul li
3. li , li
ケース
<ul class="nav nav-tabs">
<li><a href="javascript:void(0)"> </a></li>
<li><a href="javascript:void(0)"> </a></li>
<li><a href="javascript:void(0)"> </a></li>
<li><a href="javascript:void(0)"> </a></li>
<li><a href="javascript:void(0)"> **</a></li>
<li><a href="javascript:void(0)"> </a></li>
</ul>
コンテンツ切り替えナビゲーション
:
1.
2. div , div class tab-content
3. .tab-content div , div .
4. div id , class="tab-pane fade" , div class="tab-pane fade in active"
5. , : data-toggle="tab" href="# div id"
6. li , class="active"
ケース:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#content1"> </a></li>
<li><a data-toggle="tab" href="#content2"> </a></li>
<li><a data-toggle="tab" href="#content3"> </a></li>
<li><a data-toggle="tab" href="#content4"> </a></li>
<li><a data-toggle="tab" href="#content5"> **</a></li>
<li><a data-toggle="tab" href="#content6"> </a></li>
</ul><br><br><br><br>
<div class="container">
<div class="tab-content">
<div id="content1" class="tab-pane fade in active">
<h1> </h1>
<h3> !</h3>
</div>
<div id="content2" class="tab-pane fade">
<img src="images/11.jpg">
</div>
<div id="content3" class="tab-pane fade">
<img src="images/12.jpg">
</div>
<div id="content4" class="tab-pane fade">
<img src="images/8.jpg">
</div>
<div id="content5" class="tab-pane fade">
<img src="images/13.jpg">
</div>
<div id="content6" class="tab-pane fade">
<p> , <a href="http://2bf666.com"> svip</a></p>
</div>
</div>
</div>
ナビゲーションバー
:
1. nav , class="navbar navbar-default"
2. nav , ul , ul class="nav navbar-nav"
3. ul , li , li , html
ケース:
<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
<li><a href="javascript:void(0)"> </a></li>
<li><a href="javascript:void(0)"> </a></li>
<li><a href="javascript:void(0)"> </a></li>
<li><a href="javascript:void(0)"> **</a></li>
<li><a href="javascript:void(0)"> </a></li>
</ul>
</nav>
ナビゲーションバーに関する設定
1.ナビゲーションバーのタイトルの追加
navラベルには、前のサブdiv、class=「navbar-header」があります.divネストspanラベル、class=“navbar-brand”spanの内容がタイトルです
ケース:
<div class="navbar-header"><span class="navbar-brand"> java </span></div>
2. フォームの追加
:
1. nav , form , class="navbar-form"
2.
ケース:
3. ナビゲーション内のコンテンツの表示位置の制御
• - : class="navbar-left"
• - : class="navbar-right"
4.ナビゲーションバーのすべての内容をグリッドコンテナに入れて、内容の左右の余白5を実現する.ガイドバーに通常のテキストを追加
•文字はspanラベルで追加され、spanのclass=「navbar-text」
固定ナビゲーションバー
上部に固定:
• nav class : navbar-fixed-top
下に固定:
• nav class : navbar-fixed-bottom
静的ナビゲーションバー
nav class="navbar-static-top"##