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

WBOY
リリース: 2016-09-15 11:15:18
オリジナル
1202 人が閲覧しました

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>
    
ログイン後にコピー

Example block-level help text here.

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

 

 

警告框

  警告框是系统向用户传达信息和提供指引的重要手段。没有针对警告框的标签,通过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>
ログイン後にコピー
ブートストラップの合理化されたチュートリアル

 

 

 阅读原文请点击此处

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート