BootStrap の学習ノート: BootStrap の共通コンポーネントの紹介

この記事では、BootStrap の学習ノートに基づいて、BootStrap の一般的なコンポーネントについて紹介します。困っている友人は参考にしていただければ幸いです。ブートストラップ関連のビデオ チュートリアルをさらに学習して入手したい場合は、ブートストラップ チュートリアルにアクセスしてください。

1. アイコン:

    <h3>图标</h3>   
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>

2. ボタン:

    <h3>按钮</h3>
    <button>按钮</button>
    <button>primary</button>
    <button>success</button>
    <button>info</button>
    <button>warning</button>
    <button>danger</button>

3. ボタンのサイズ:

    <h3>按钮尺寸</h3>
    <button>按钮</button>
    <button>primary</button>
    <button>success</button>
    <button>info</button>

4. ボタンにアイコンを表示します:

    <h3>把图标显示在按钮里</h3>
    <button><span></span>  按钮</button>

5. ドロップダウン メニュー:

<p>
        <button>
            <span>菜单一</span>
            <span></span>
        </button>
        </p>

            
• 菜单一
            
• 菜单二
            
• 菜单三
        

    

インタラクション: 各メニューのクリック イベントを監視し、タイトルに現在のメニューを表示します。クリック後、

        $('.dropdown-item').click(function () {
            $('#dropdown-title').text($(this).text());
        });

6。入力ボックス:

    <h3>输入框</h3>
    <p>
      <span></span>
      <input>
    </p>

    <p>
      <span></span>
      <input>
    </p>

7。ナビゲーション バー:

    <h3>导航栏</h3>
    <nav>
        <p>
          </p>
<ul>
            <li><a>Home</a></li>
            <li><a>About</a></li>
            <li><a>Contact</a></li>
            <li>
              <a>Dropdown <span></span></a>
              <ul>
                <li><a>Action</a></li>
                <li><a>Another action</a></li>
                <li>
                <li>Nav header</li>
                <li><a>Separated link</a></li>
              </ul>
            </li>
          </ul>
        <!--/.nav-collapse -->
      
    </nav>

8。

    <h3>表单</h3>
    

    

             <input>     

    

             <input>     

    

      File input       <input>       

Example block-level help text here.

         

               <input> Check me out            

    Submit   

9. 警告ボックス:

    <h3>警告框</h3>
    <p>
       <button><span>×</span></button>
       <strong>Warning!</strong> Better check yourself, you're not looking too good.
    </p>
    <p>
        <a>success!</a>
    </p>
    <p>
        <a>info!</a>
    </p>
    <p>
        <a>warning!</a>
    </p>
    <p>
        <a>danger!</a>
    </p>

10. 進行状況バー:

    <h3>进度条</h3>
    <p>
      </p><p>
        70%
      </p>
    

11 , 右に配置

通常、右にフローティングする機能を実現するには float:right を使用しますが、右には float のクリア、右のマージンの調整、マージンの調整が含まれます。もちろん、ブートストラップでは、彼のメソッドを使用するには、クラスを追加するだけです。問題を解決するには、プルライトを使用します。

<span>item1</span>
<p>item2</p>

最初の行は、2 番目の行と水平線上になければなりません。この要素には独自の改行機能があるため、最初の行では

12. タブの使用

タブを使用すると、ページ内の表示コンテンツを簡単に切り替えることができます。

        
• tab1
        
• tab2
        
• tab3
    

    这是宝贝管理页面     

        

            

这是tab1

                 

            

这是tab2

                 

            

这是tab3

              は、js で簡単にキャプチャできます。たとえば、2 番目のページがデータをロードしているときに、タブを切り替えて、2 番目のページに切り替えるまで待ってから、そのページをロードします。

        $('a[data-toggle="tab"]').on('shown.bs.tab',function (e) {
            var activeTab = $(e.target).text();
            alert(activeTab);
        });

13, bootstrap-table

json データをリクエストし、ajax を通じてテーブルを生成できるプラグイン

プロジェクト アドレス:

https://github.com/wenzhixin/bootstrap-table

14. 通知メッセージ コンポーネント

ダウンロード アドレス:

https://github.com/CodeSeven/toastr

ドキュメント:

http://www.ithao123.cn/content-2414918.html

はじめに:

ダウンロードしたファイルでビルド フォルダーを見つけ、.min 内にトースターを導入します。 .js およびトースト css

使用法:

このプロンプト メッセージは、デフォルトではブラウザの右上隅に表示されますが、上部に表示されるように変更できます。初期化中の中心:

        toastr.options.positionClass = 'toast-top-center';//显示位置

位置表示設定には次のオプションがあります:

toast-top-right
toast-botton-right
toash-bottom-left
toast-top-left
toast-top-full-width 这个是在网页顶端，宽度铺满整个屏幕
toast-bottom-full-width
toast-top-center顶端中间
toast-bottom-center

そして、それを表示する必要がある場合は、次のように呼び出します:

toastr.success('提交数据成功');
toastr.error('Error');
toastr.warning('只能选择一行进行编辑');
toastr.info('info');

15, ajax request

Button:

                <button>
                    换个密码
                </button>

js:

    $('.btn').on('click',function () {
        $.post('xxx')
            .done(function (result) {
                var json = ajaxResultShow(result);
                if (json.result_code == 0)
                    $('#pwdId').text(json.data1);
            })
            .fail(function () {
            })
            .always(function () {
            });
    });

16. bootstrap-switch

(1) このコンポーネントはブートストラップに属していません。 bootstrap-switch.min.js と bootstrap-switch.min.css に個別にインポートします。

(2) ダウンロード アドレス: http://www.bootcss.com/p/bootstrap-switch/

(3) 使用方法:

<link>
<link>
<script></script>
<script></script>

フレームワークの追加:

    <input>

HTML でコンポーネントを追加:

        $("[name='my-checkbox']").bootstrapSwitch();

js で初期化:

    $("#isOpenCheckbox").bootstrapSwitch('state',false);

ステータスは初期化中に直接設定できます:

    $('#isOpenCheckbox').bootstrapSwitch('toggleState');

スイッチング ステータス:

   $('#isOpenCheckbox').on('switchChange.bootstrapSwitch', function (event,state) {
            alert(state);// true || false
        });

スイッチング イベントのリッスン:

rrreee

要約: 上記この記事の内容はすべて皆さんの学習に役立つことを願っています。

以上がBootStrap の学習ノート: BootStrap の共通コンポーネントの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。