ブートストラップの合理化されたチュートリアル

WBOY

リリース： 2016-09-15 11:15:18

オリジナル

1237 人が閲覧しました

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>

ログイン後にコピー

阅读原文请点击此处