Bootstrap は習得が非常に簡単で、提供されるスタイルは非常に美しいです。少し勉強すれば、美しいページを作成することができます。
bootstrap 中国語 Web サイト: http://v3.bootcss.com/
ブートストラップは 3 種類のダウンロードを提供します:
------------------------------------------------- ------------
実稼働環境用のブートストラップ
コンパイルおよび圧縮されたCSS、JavaScript、フォントファイル。ドキュメントとソース コード ファイルは含まれません。
ブートストラップのソースコード
Less、JavaScript、フォントファイルのソースコードとドキュメント。必要なコンパイラとセットアップ作業が少なくなります。
サス
これは、Less から Sass への Bootstrap ソースコード移行プロジェクトであり、Rails、Compass、または Sass 専用プロジェクトに迅速に導入するために使用されます。
------------------------------------------------- ----------
実際、ブートストラップをダウンロードせずに使用できます:
Bootstrap の中国語 Web サイトは、Bootstrap 用に独自の無料 CDN アクセラレーション サービスを特別に構築しました。国内クラウドベンダーのCDNサービスに基づいており、アクセス速度が速く、高速化効果がより明白で、速度と帯域幅の制限がなく、永続的に無料です。
base.html
Bootstrap が Base.html に導入されているので、それを保存すると、Bootstrap が提供するスタイルを使用できるようになります。
bootstrap はデフォルトで 200 を超えるアイコンを提供します。これらのアイコンは、span タグを通じて使用できます:
タグはボタンの作成に使用され、bootstrap は豊富なボタン スタイルを提供します。
ボタンのデフォルトのサイズに加えて、ブートストラップはボタンのサイズを調整するための 3 つのパラメータ、つまり btn-lg、btn-sm、および btn-xs も提供します。
ドロップダウン メニューは最も一般的なインタラクションの 1 つであり、ブートストラップは美しいスタイルを提供します。
タグを使用して入力ボックスを作成します。
ナビゲーションバーはウェブサイト全体のガイドとして不可欠です。
人与系统之间数据的传递都需要依靠表单来完成。比如注册/登录信息的提交,查询条件的提交等。用
标签来创建表单。<h3>表单</h3>
警告框是系统向用户传达信息和提供指引的重要手段。没有针对警告框的标签,通过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> <strong>Warning!</strong> Better check yourself, you're not looking too good. </div> <div class="alert alert-success" role="alert"> <a href="#" class="alert-link">success!</a> </div> <div class="alert alert-info" role="alert"> <a href="#" class="alert-link">info!</a> </div> <div class="alert alert-warning" role="alert"> <a href="#" class="alert-link">warning!</a> </div> <div class="alert alert-danger" role="alert"> <a href="#" class="alert-link">danger!</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>
阅读原文请点击此处