BootStrap:cssフロントエンドフレーム
10320 ワード
一.whatフロントエンドCSSフレーム、もう一つのフロントエンドフレームFoundationフロントエンドフレーム:HTML、CSS、JavaScriptで作成したコンポーネントツールセットを使用して、ホイールから直接使用することができます.二.whyの最も流行しているフロントエンドフレームワーク、使用するマルチTwitter会社は2011年8月にオープンした全体的なフロントエンドフレームワークで、TwitterのデザイナーMark OttoとJacob Thorntonが協力して開発し、わずか数ヶ月で世界に人気を集め、大量のBootstrapスタイルのウェブサイトがインターネットの波の中に現れ、応用がより広範なのはそのバックグラウンド管理ページである.ここ2年間のすべてのインターネットプロジェクトのバックグラウンドはBootstrapを採用して構築された.どうしてこんなに流行っているのですか.機能の強さとスタイルの美しさ2.簡単で使いやすく、ドキュメントが豊富です.高度なカスタマイズ性4.豊かな生態圏5.レイアウトの互換性が良い3.how(最初のプログラム)1.Bootstrapのダウンロードhttp://getbootstrap.com最新バージョンbootstrap-3.3.7異なるバージョンの違い:最新バージョンはBootstrap 3に発展したが、Bootstrap 2が淘汰されたことを意味するものではなく、Bootstrap 3は扁平化されたスタイルを採用し、Bootstrap 2はボタン、ツールバーなどの位置で立体的な効果をより多く採用し、それらの間に誰が良いか悪いかの違いはなく、デザインスタイルの違いだけである.自分のプロジェクトの実際のニーズに基づいて、どのバージョンのフラット化概念を使用するかを決定する核心的な意味は、冗長性、重厚さ、煩雑な装飾効果を除去することです.具体的には、余分な透視、テクスチャ、グラデーション、3 D効果を生み出す要素を排除し、「情報」自体をコアとして再浮上させることができます.同時に設計要素では抽象,極簡,記号化を強調した.フラット化についてはhttp://baike.baidu.com/link?url=8RakX7FRvO0H7FbVWc2mBOMcSpy-humjYXGQEYZTjrbPfcCM1JNZCPjk0Hf60TlY6ma0FYvn5a992RPpfpJVA_ 2.プロジェクトにBootstrapを導入する3つのファイルbootstrapを導入する.css jquery.js Bootstrap.js Bootstrapが要求するjqueryは1.9.1以上であり、jQuery 3以下のデモコードは以下の通りである:最初のBootstrapプログラム
プライマリ・デフォルト
プライマリ・デフォルト
プライマリ・デフォルト
主なデフォルト(3)ブロックレベルのボタンとデフォルトは行内の要素(インライン要素)であるが、移動端にとって1行を占める大きなボタンはデモコードにすぎない:主なデフォルト(4)クリックできないボタンの背景色は50%の色あせ処理を行い、クリックできない効果を示す主なデフォルト2.ボタン要素に適用するボタンを閉じる.closeクラスには、図に示すように閉じるボタンが表示されます.× aria-hidden="true"スクリーンリーダーにとってこのボタンは非表示のスクリーンリーダーであり、障害者がWebページの内容を読みやすいツールスクリーンリーダーについては、http://www.zhangxinxu.com/wordpress/2012/03/wai-aria-%E6%97%A0%E9%9A%9C%E7%A2%8D%E9%98%85%E8%AF%BB/3.ドロップダウンボタンspan要素にcaretクラスを適用すると、ドロップダウン記号のドロップダウンメニューが表示されます.
4.画像5.表のプレゼンテーションコードは、bootstrap表tr.tableHead{background-color:#00000;color:#ffffff;tr.tableHead>th { text-align: center; }
6.ツールクラス(1)フローティングツール左フローティング、右フローティング:要素に追加.pull-left、.pull-rightクラスでは、左フローティングとフローティングデモコードを次のように設定できます.
111
222
内部のソースコードは以下の通りである.pull-right { float: right !important; } .pull-left { float: left !important; } !important; この属性を最高優先度に設定ことは、cssファイルの一番下に定義することに相当する.(2)表示/非表示ツールの使用.showクラス表示,.hiddenクラス非表示、この非表示は占有されず、display:noneが設定されていることに相当します.
333
444
(3)中央で使用する.center-blockクラス要素をブロックレベル要素に設定して中央に配置
555
注意有効にするには、エレメントの幅を中央に設定する必要があります.スクリーンリーダー以外のデバイスには非表示で使用する.Sr-only類Skip to main content 5.コンポーネントセット1.ナビゲーションバーBootstrapのナビゲーションは主にカプセル式ナビゲーション、パン屑ナビゲーション、ヘッドナビゲーションの3種類に分けられ、多くの開発ニーズを満たすことができる.カプセル式ナビゲーション水平カプセルナビゲーションカプセルナビゲーションは実質的に無秩序リストであり、ul元素に添加するだけである.navと.nav-pillsクラスでいいです
Home SVN iOS VB.Net Java PHP
垂直カプセルのナビゲーション縦カプセルのナビゲーションが必要な場合は、水平カプセルのナビゲーションに1つ追加する必要がある.nav-stackedクラスでOK
Home SVN iOS VB.Net Java PHP
パン屑ナビゲーションパン屑ナビゲーションは一般的に階層関係のあるオプションに用いられ、パン屑ナビゲーションを実現するにはulに1つ追加する必要がある.breadcrumbクラスでよい.トップページ リポジトリ データ ヘッドナビゲーション
Toggle navigation
サイトロゴ
具体的な分析ヘッドナビゲーションは主に2つの構造に分けられ、第1の層は最も外側の...であり、この層はナビゲーションの基本的なスタイルを設定するために使用される.
将navbar-defaultクラスを置換.navbar-inverseクラスは、反転ナビゲーション(黒底白字)として表示されます.
2番目のレイヤには、2つの並列要素があります.
…
内部はタイトルの内容を設定ために用いる.
….
内部では、特定のナビゲーションリンク、検索フォーム、ドロップダウンメニューなどの特定のナビゲーション内容を作成するために使用されます.Bootstrapは、小さなウィンドウの下でナビゲーションを閉じて展開する機能を提供しています.学生たちは、上のウィンドウを小さく引っ張って追加してみてください.navbar-fixed-topは、ページのスクロールに伴って消えないようにナビゲーションバーを上部に固定できます.上部に固定して正常な内容を隠すのを防止するには、body{padding-top:50 px;}を設定する必要があります.ここで、具体的な値は、ナビゲーションバーの高さに応じてbodyの補白を加えると正常な内容が遮断されず、遮蔽されない.ドロップダウンメニューのデモコード:
ドロップダウンメニューオプション1 オプション2 オプション3 オプション四 ボタンとドロップダウンの選択はすべてラップします
….
内
ボタンはdata-toggle="dropdown"トリガを追加する必要があります
ドロップダウンオプションを配置するリストを追加する必要はありません.dropdown-menuクラス
リスト・アイテムを分割するために空のものを追加
3.ボタングループ
上のグループはボタングループに入れた効果で、下のグループはボタングループに入れなかった効果です
ボタン群は、ボタン群を同じ行に配置するためのものであり、ボタン間に隙間がない.使い方は簡単で、ボタンのセットを置くだけです.
..
に表示されます.
デモコード:
Left Middle Right
(1)垂直配列
(2)両端揃え(ボタン群を100%幅に伸ばす)
デモコード:
Left Middle Right
注意:両端揃えの使用は、ボタン要素がこれらのスタイルを適用し、その内容の両端揃えができないため、要素にのみ適用されます.
(3)ボタングループをネストし、ボタングループ内でボタングループをネストし続けることができる
デモコード:
4.inputコントロールグループの複数のinputコントロールを一グループに入れて使用し、以下にいくつかの一般的な組み合わせを示した.最も一般的なinputコントロールグループは検索ボックスではない.
(1)検索ボックス
実質的にテキストボックス+ボタン
デモコード:
Hello,Bootstrap!
bootstrapフレームワークはjqueryに依存するため、jqueryを先にインポートする必要がある.jsはbootstrapを再インポートする.js .また、以前はjsをheadにインポートしていましたが、なぜbodyにインポートしたのでしょうか.headにインポートすると、サーバがクライアントブラウザにそのページを転送するときに上から下へ転送するため、jsファイルを先に転送し、ユーザーのネットワーク速度が遅い場合、jsファイルを転送する過程でbodyの内容がまだ転送されていないため、ユーザーが見ているのは白く、ユーザーの体験に影響を与えるため、私たちは通常jsファイルを後ろにロードし、ユーザーがbodyの内容を先に見ることができるようになります.jsを再ダウンロードしてページの動作を変更し、ユーザーの体験を高める.(そうでなければ、ユーザーは白いページを直接閉じたのを見た)普通の純粋なHTML効果は以下のように完全な最初のプログラムBootstrap 101 Templateを比較した.Hello, world!!!
コード解釈1:ページ幅はデバイス幅、初期スケールは1.0で、スケールを調整することはデスクトップブラウザには役に立たず、モバイル端末ブラウザにのみ有効であり、スケール値が大きいほど字が大きくなる.http://davidbcalhoun.com/2010/viewport-metatag/コード解釈2:条件注釈IE 9以下はこの2つのファイルを導入する、IE 9以上(IE 9を含む)はそれを注釈内容として導入しない.この2つのファイルは、IE 8がHTML 5要素とメディアクエリをサポートするように導入する.四.基本スタイル1.一般ボタン(1)ボタン基本スタイルデモコード:デフォルトの主要成功情報警告危険(2)ボタンのサイズを調整するプライマリ・デフォルト
プライマリ・デフォルト
プライマリ・デフォルト
主なデフォルト(3)ブロックレベルのボタンとデフォルトは行内の要素(インライン要素)であるが、移動端にとって1行を占める大きなボタンはデモコードにすぎない:主なデフォルト(4)クリックできないボタンの背景色は50%の色あせ処理を行い、クリックできない効果を示す主なデフォルト2.ボタン要素に適用するボタンを閉じる.closeクラスには、図に示すように閉じるボタンが表示されます.× aria-hidden="true"スクリーンリーダーにとってこのボタンは非表示のスクリーンリーダーであり、障害者がWebページの内容を読みやすいツールスクリーンリーダーについては、http://www.zhangxinxu.com/wordpress/2012/03/wai-aria-%E6%97%A0%E9%9A%9C%E7%A2%8D%E9%98%85%E8%AF%BB/3.ドロップダウンボタンspan要素にcaretクラスを適用すると、ドロップダウン記号のドロップダウンメニューが表示されます.
4.画像5.表のプレゼンテーションコードは、bootstrap表tr.tableHead{background-color:#00000;color:#ffffff;tr.tableHead>th { text-align: center; }
商品情報
商品番号商品名称商品説明商品種類操作操作1 macbook airアップル最新薄型ノートパソコン2 ipad proアップル最新タブレットタブレットタブレット3 iphone 6 s plusアップル最新大画面携帯電話6.ツールクラス(1)フローティングツール左フローティング、右フローティング:要素に追加.pull-left、.pull-rightクラスでは、左フローティングとフローティングデモコードを次のように設定できます.
111
222
内部のソースコードは以下の通りである.pull-right { float: right !important; } .pull-left { float: left !important; } !important; この属性を最高優先度に設定ことは、cssファイルの一番下に定義することに相当する.(2)表示/非表示ツールの使用.showクラス表示,.hiddenクラス非表示、この非表示は占有されず、display:noneが設定されていることに相当します.
333
444
(3)中央で使用する.center-blockクラス要素をブロックレベル要素に設定して中央に配置
555
注意有効にするには、エレメントの幅を中央に設定する必要があります.スクリーンリーダー以外のデバイスには非表示で使用する.Sr-only類Skip to main content 5.コンポーネントセット1.ナビゲーションバーBootstrapのナビゲーションは主にカプセル式ナビゲーション、パン屑ナビゲーション、ヘッドナビゲーションの3種類に分けられ、多くの開発ニーズを満たすことができる.カプセル式ナビゲーション水平カプセルナビゲーションカプセルナビゲーションは実質的に無秩序リストであり、ul元素に添加するだけである.navと.nav-pillsクラスでいいです
Home
垂直カプセルのナビゲーション縦カプセルのナビゲーションが必要な場合は、水平カプセルのナビゲーションに1つ追加する必要がある.nav-stackedクラスでOK
Home
パン屑ナビゲーションパン屑ナビゲーションは一般的に階層関係のあるオプションに用いられ、パン屑ナビゲーションを実現するにはulに1つ追加する必要がある.breadcrumbクラスでよい.
Toggle navigation
サイトロゴ
具体的な分析ヘッドナビゲーションは主に2つの構造に分けられ、第1の層は最も外側の...であり、この層はナビゲーションの基本的なスタイルを設定するために使用される.
将navbar-defaultクラスを置換.navbar-inverseクラスは、反転ナビゲーション(黒底白字)として表示されます.
2番目のレイヤには、2つの並列要素があります.
…
内部はタイトルの内容を設定ために用いる.
….
内部では、特定のナビゲーションリンク、検索フォーム、ドロップダウンメニューなどの特定のナビゲーション内容を作成するために使用されます.Bootstrapは、小さなウィンドウの下でナビゲーションを閉じて展開する機能を提供しています.学生たちは、上のウィンドウを小さく引っ張って追加してみてください.navbar-fixed-topは、ページのスクロールに伴って消えないようにナビゲーションバーを上部に固定できます.上部に固定して正常な内容を隠すのを防止するには、body{padding-top:50 px;}を設定する必要があります.ここで、具体的な値は、ナビゲーションバーの高さに応じてbodyの補白を加えると正常な内容が遮断されず、遮蔽されない.ドロップダウンメニューのデモコード:
ドロップダウンメニュー
….
内
ボタンはdata-toggle="dropdown"トリガを追加する必要があります
ドロップダウンオプションを配置するリストを追加する必要はありません.dropdown-menuクラス
リスト・アイテムを分割するために空のものを追加
3.ボタングループ
上のグループはボタングループに入れた効果で、下のグループはボタングループに入れなかった効果です
ボタン群は、ボタン群を同じ行に配置するためのものであり、ボタン間に隙間がない.使い方は簡単で、ボタンのセットを置くだけです.
..
に表示されます.
デモコード:
Left Middle Right
(1)垂直配列
(2)両端揃え(ボタン群を100%幅に伸ばす)
デモコード:
Left Middle Right
注意:両端揃えの使用は、ボタン要素がこれらのスタイルを適用し、その内容の両端揃えができないため、要素にのみ適用されます.
(3)ボタングループをネストし、ボタングループ内でボタングループをネストし続けることができる
デモコード:
4.inputコントロールグループの複数のinputコントロールを一グループに入れて使用し、以下にいくつかの一般的な組み合わせを示した.最も一般的なinputコントロールグループは検索ボックスではない.
(1)検索ボックス
実質的にテキストボックス+ボタン
デモコード:
, 。
(2) +
,
:
5.
,
:
-
-
-
-
: .
, . ,
, .
:
イングランドはウェールズに った
2:1 ….
ウクライナ アイルランド
….
ドイツ ポーランド
….
,Bootstrap
:
- 52
- 48
- 41
6. , Bootstrap , ： , ul pagination ：
- «
- 1
- 2
- 3
- 4
- 5
- »
.pagination-lg .pagination-sm , :