English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
bootstrap の学習は非常に簡単で、提供するスタイルは非常に美しいです。少し簡単な学習で素晴らしいページを作成できます。
bootstrap 中国網：http://v3.bootcss.com/
bootstrapは、以下の3種類のダウンロードを提供しています：
プロダクション環境用の Bootstrap
コンパイルおよび圧縮された CSS、JavaScript、およびフォントファイルです。ドキュメントやソースコードファイルは含まれていません。
Bootstrap ソースコード
Less、JavaScript、およびフォントファイルのソースコードで、ドキュメントも含まれています。Less コンパイラと設定が必要です。
Sass
これは Bootstrap が Less から Sass にソースコードを移植するプロジェクトで、Rails、Compass、または Sass に特化したプロジェクトに迅速に導入するために使用されます。
実際には、bootstrapをダウンロードせずに使用することもできます：
Bootstrap 中国網は Bootstrap に特化した無料の CDN 加速サービスを構築しました。国内のクラウドプロバイダーの CDN サービスに基づいて、アクセス速度が向上し、加速効果が明確で、速度や帯域幅の制限がなく、永久に無料です。
base.html
<!DOCTYPE html> <html lang="zh-CN">-CN"> <head> <meta charset="utf-8">-8"> <meta http-equiv="X-UA-互換性" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上記の3metaタグ*必要*最前面に配置する必要があります。他のすべてのコンテンツは*必要*それに続いて！ --> <title>Bootstrap 101 テンプレート</title> <!-- Bootstrap --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> </head> <body> <h1>こんにちは、bootstrap！</h1> <!-- jQuery（BootstrapのJavaScriptプラグインに必要） --> <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <!-- すべてのコンパイルされたプラグイン（以下）を含めたり、必要に応じて個別のファイルを含めたりします --> <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js></script> </body> </html>
base.htmlにbootstrapをインクルードし、保存すると、bootstrapが提供するスタイルを使用できます。
フォントアイコン
bootstrapはデフォルトで200以上のアイコンを提供しています。これらのアイコンはspanタグを使用して使用できます：
<h3>アイコン</h3> <span class="glyphicon glyphicon-home"></span> <span class="glyphicon glyphicon-signal"></span> <span class="glyphicon glyphicon-cog"></span> <span class="glyphicon glyphicon-apple"></span> <span class="glyphicon glyphicon-trash"></span> <span class="glyphicon glyphicon-play-circle"></span> <span class="glyphicon glyphicon-headphones"></span>
ボタン
<button></button>タグはボタンを作成するために使用され、bootstrapは豊富なボタンのスタイルを提供しています。 <h3>ボタン</h3> <button type="button" class="btn btn-default">ボタン</button> <button type="button" class="btn btn-primary">primary</button> <button type="button" class="btn btn-success">success</button> <button type="button" class="btn btn-info">info</button> <button type="button" class="btn btn-warning">warning</button> <button type="button" class="btn btn-danger">danger</button> <h3>ボタンサイズ</h3> <button type="button" class="btn btn-default">ボタン</button> <button type="button" class="btn btn-primary btn-lg">primary</button> <button type="button" class="btn btn-success btn-sm">success</button> <button type="button" class="btn btn-info btn-xs">info</button> <h3>アイコンをボタン内に表示する</h3> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-home"></span> ボタン</button>
ボタンはデフォルトのサイズに加えて、bootstrapはボタンのサイズを調整するために3つのパラメータを提供しています：btn-lg、btn-smとbtn-xs。
ドロップダウンメニュー
ドロップダウンメニューは最も一般的なインタラクションの1つであり、bootstrapは美しいスタイルを提供しています。
<h3>ドロップダウンメニュー</h3>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
ドロップダウン
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">アクション</a>
入力フィールド
通して<input></input>タグを使用して入力フィールドを作成します。
<h3>入力フィールド</h3>
<div class="input-group">
<span class="glyphicon glyphicon-user"></span>
<input type="text" placeholder="ユーザー名">
</div>
<div class="input-group">
<span class="glyphicon glyphicon-lock"></span>
<input type="password" placeholder="パスワード">
</div>
ナビバー
ナビバーは、整个ウェブサイトのガイドとして必須です。
<h3>ナビバー</h3>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">ホーム</a>
nav>
フォーム/ログイン情報の提出、検索条件の提出など、データの伝達にはフォームが依存しています。例えば、登録/form>タグを使用してフォームを作成します。
<h3>フォーム</h3>
<form>
<div class="form-group">
<span class="glyphicon glyphicon-user"></span>
<input type="email" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<span class="glyphicon glyphicon-lock"></span>
<input type="password" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
警告ボックス
警告ボックスはシステムがユーザーに情報を伝え、ガイドを提供する重要な手段です。警告ボックスにタグがなくても、bootstrapで提供されるスタイルを使用して、すぐに美しい警告ボックスを作成できます。
<h3>警告ボックス</h3>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
警告！/自分をチェックしてみてください、見た目が良くありません。
</div>
<div class="alert alert-success" role="alert">
<a href="#" class="alert-link">成功！</a>
</div>
<div class="alert alert-info" role="alert">
<a href="#" class="alert-link">情報！</a>
</div>
<div class="alert alert-warning" role="alert">
<a href="#" class="alert-link">警告！</a>
</div>
<div class="alert alert-danger" role="alert">
<a href="#" class="alert-link">危険！</a>
</div>
進捗バー
システムの処理プロセスは通常ユーザーが待つ必要がありますが、進捗バーはユーザーにシステムの処理プロセスを感知させ、忍耐力を高めることができます。
<h3>進捗バー</h3>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
70%
</div>
</div>
これでこの記事は終わりです。皆様の学習に役立つことを願っています。また、ナラシオン チュートリアルのサポートを多くお願いします。
さらに深く学びたい場合は、ここをクリックして学習してください。さらに、Bootstrap 学習 チュートリアルと Bootstrap 実戦 チュートリアルの素晴らしいトピックを追加します。
声明：この記事の内容はインターネットから収集され、著作権者に帰属します。インターネットユーザーが自発的に貢献し、自己でアップロードしたものであり、このサイトは所有権を持ちません。また、人工編集は行われていません。著作権侵害を疑う内容があれば、メールを送信してください：notice#oldtoolbag.com（メール送信時は、#を@に変更してください。報告を行い、関連する証拠を提供してください。一旦確認がついたら、このサイトは即座に侵害を疑われるコンテンツを削除します。）