ブートストラップの学習は非常にシンプルで、それが提供するスタイルはとても美しいです。少し簡単な研究では、美しいページを作成できます。
ブートストラップ中国のウェブサイト：http：//v3.bootcss.com/
Bootstrapは3種類のダウンロードを提供します。
生産環境向けのブートストラップ
CSS、JavaScript、およびFontファイルをコンパイルおよび圧縮します。ドキュメントやソースファイルを含めないでください。
ブートストラップソースコード
Less、JavaScript、およびFont Filesソースコード、およびドキュメント付き。より少ないコンパイラといくつかのセットアップ作業が必要です。
サス
これは、レール、コンパス、またはSASSのみのプロジェクトで迅速に導入するために、LessからSASSまでのソースポーティングプロジェクトです。
実際、ブートストラップをダウンロードせずに使用できます。
Bootstrap Chinese Webサイトは、Bootstrap用の独自の無料のCDN加速サービスを特別に構築しています。国内の雲メーカーのCDNサービスに基づいて、アクセス速度はより速く、加速効果はより明白で、速度と帯域幅の制限がなく、永久に無料です。
base.html
<！doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua互換" content = "ie = edge"> <meta name = "viewport" content = "width =" width = bed "他のコンテンツは *それらに従う必要があります！ - > <title> bootstrap 101テンプレート</title> <！ - bootstrap-> <link rel = "styleSheet" href = "http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> </h1> <！ - jQuery（BootstrapのJavaScriptプラグインに必要） - > <スクリプトsrc = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </script> <！ - 編成されたプラグインをすべて含む、または個々のファイルを含める - > <> <> <> <> <> <> src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script> </body> </html>
Bootstrapはbase.htmlで導入されています。保存すると、Bootstrapが提供するスタイルを使用できます。
フォントアイコン
Bootstrapは、デフォルトで200を超えるアイコンを提供します。これらのアイコンをスパンタグを使用して使用できます。
<h3> icon </h3> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> </span> <span> </span> <span> </span> </span> <span> </span>
ボタン
<ボタン> </button>タグはボタンを作成するために使用され、ブートストラップはリッチボタンスタイルを提供します。 <h3>Button</h3> <button type="button">Button</button> <button type="button">primary</button> <button type="button">success</button> <button type="button">info</button> <button type="button">warning</button> <button type="button">warning</button> <button type="button">danger</button> <h3>Button size</h3> <button type = "button"> button </button> <ボタンタイプ= "ボタン">プライマリ</button> <ボタンタイプ= "ボタン"> success </button> <button type = "button ="/button> <h3>ボタンのアイコンを表示</h3> <ボタンタイプ= "> <スパン> </スパン>ボタン</ボタン>
ボタンのデフォルトサイズに加えて、Bootstrapはボタンのサイズ、つまりBTN-LG、BTN-SM、およびBTN-XSを調整する3つのパラメーターも提供します。
プルダウンメニュー
ドロップダウンメニューは最も一般的な相互作用の1つであり、Bootstrapは美しいスタイルを提供します。
<h3>ドロップダウンメニュー</h3> <div> <ボタンタイプ= "ボタン" id = "dropdownmenu1" data-toggle = "dropdown" aria-expanded = "true"> dropdown <span> </span> </button> <ul chole = "メニュー" aria-labelledby = "dropdownmenu1" href = "＃"> action </a> </li> <liロール= "プレゼンテーション"> <a chole = "menuitem" tabindex = "-1" href = "＃">別のアクション</a> </li> <liロール= "プレゼンテーション"> <aロール= "menuitem" tabindex = "-1" href = " role = "menuitem" tabindex = "-1" href = "＃">分離リンク</a> </li> </ul> </div>
入力ボックス
<inupt> </input>タグを使用して、入力ボックスを作成します。
<h3> input Box </h3> <div> <span> </span> <入力タイプ= "text" placeholder = "username"> </div> <div> <span> </span> <inputタイプ= "placeholder =" password "> </div>
ナビゲーションバー
ナビゲーションバーは、Webサイト全体のガイドとして不可欠です。
<h3>ナビゲーションバー</h3> <nav> <div id = "navbar"> <ul> <li> <a href = "＃"> home </a> </li> <li> <a href = "＃about"> about </a> </li> <li> <a href = a href = "＃連絡先role = "button" aria-expanded = "false"> dropdown <span> </span> </a> <ul role = "menu"> <li> <a href = "＃"> action </a> </li> <li> <a href = "＃" link </a> </li> </li> </li> </ul> </div> <！ - /。nav-collapse-> </div> </nav>
形状
人とシステム間のデータ転送は、フォームで完了する必要があります。たとえば、登録/ログイン情報の提出、クエリ条件の提出など。<form> </form>タグを使用してフォームを作成します。
<h3>Form</h3> <form> <div> <span></span> <input type="email" id="exampleInputEmail1" placeholder="Enter email"> </div> <div> <span></span> <input type="password" id="exampleInputPassword1" placeholder="Password"> </div> <div> <label for="exampleInputFile">File input</label> <input type = "file" id = "exampleinputfile"> <p> exampleブロックレベルヘルプテキストはこちら。
警告ボックス
警告ボックスは、システムが情報を伝え、ユーザーにガイダンスを提供する重要な手段です。警告ボックスのラベルはありません。Bootstrapが提供するスタイルは、即座に美しい警告ボックスを作成できます。
<h3>警告ボックス</h3> <div role = "alert"> <button type = "button" data-dismiss = "alert" aria-label = "close"> <span aria-hidden = "true">×</span> </<strong> <strong> </div> <div role = "alert"> <a href = "＃"> success！</a> </div> <div role = "alert"> <a href = "＃"> info！</a> </div> <div role = "alert"> <a href = "＃">警告！</a> </div>
進捗バー
システムの処理プロセスでは、ユーザーが待機する必要があることがよくあり、進行状況バーにより、ユーザーはシステムの処理プロセスを認識し、それにより許容度が向上します。
<h3> Progress Bar </h3> <div> <div role = "progressbar" aria-valuenow = "70" aria-valuemin = "0" aria-valuemax = "100"> 70％</div> </div>
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。
まだ詳細に学びたい場合は、ここをクリックして2つのエキサイティングなトピックを学び、添付できます。BootstrapLearning Tutorial Bootstrap Practical Tutorial