Anmerkungen zur BootStrap-Studie: Einführung in allgemeine Komponenten von BootStrap

Dieser Artikel bietet Ihnen eine Einführung in gängige Komponenten von BootStrap basierend auf BootStrap-Studiennotizen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie weitere Video-Tutorials zum Thema Bootstrap lernen und erhalten möchten, können Sie auch Folgendes besuchen: Bootstrap-Tutorial!

1. Symbol:

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

3. Schaltflächengröße:

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

4. Zeigen Sie das Symbol in der Schaltfläche an:

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

5. Dropdown-Menü:

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

Interaktion: Überwachen Sie das Klickereignis jedes Menüs und zeigen Sie das aktuelle Menü im Titel an nach dem Anklicken

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

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

    

6. Eingabefeld:

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

7. Navigationsleiste:

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

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

8.

    <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>

           9. Warnfeld:

    <h3>表单</h3>
    

    

             <input>     

    

             <input>     

    

      File input       <input>       

Example block-level help text here.

    

    

               <input> Check me out            

    Submit   10 >

    <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>

11 , Nach rechts anordnen

Im Allgemeinen verwenden wir float:right, um die Funktion des Floatens nach rechts zu realisieren, aber dazu gehört das Löschen des Floats, das Anpassen des Randes auf der rechten Seite und des Randes nach oben und runter usw. Natürlich im Bootstrap Um seine Methode zu verwenden, fügen Sie einfach eine Klasse hinzu: pull-right, um das Problem zu lösen:

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

Die erste Zeile muss mit der zweiten Zeile auf einer horizontalen Linie liegen, also Die erste Zeile kann

usw. nicht verwenden, da dieses Element über eine eigene Zeilenumbruchfunktion verfügt.

12. Verwendung von Tabs

Tab kann den angezeigten Inhalt auf einer Seite ganz einfach wechseln:

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

kann problemlos in js Switch Tabs erfasst werden und entsprechende Änderungen vornehmen. Wenn zum Beispiel die zweite Seite einige Daten lädt, dann warte ich, bis ich zur zweiten Seite wechsle und sie dann lade:

        
• tab1
        
• tab2
        
• tab3
    

    这是宝贝管理页面     

        

            

这是tab1

                 

            

这是tab2

                 

            

这是tab3

             13 Ein Plug-in, das JSON-Daten über Ajax anfordern und eine Tabelle generieren kann

Projektadresse:

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

14 . Benachrichtigungsnachrichtenkomponente

Download-Adresse:

https://github.com/CodeSeven/toastr

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

Einführung:

Suchen Sie den Build-Ordner in der heruntergeladenen Datei und führen Sie toastr in .min ein. js und toastr.css

Verwendung:

Diese Eingabeaufforderung wird standardmäßig in der oberen rechten Ecke des Browsers angezeigt. Wir können sie so ändern, dass sie in der oberen Mitte angezeigt wird während der Initialisierung:

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

Die Standortanzeigeeinstellung hat die folgenden Optionen:

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

Wenn wir es dann anzeigen müssen, rufen Sie es einfach so auf:

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

15 Anfrage

Button:

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

js:

                <button>
                    换个密码
                </button>

16. Bootstrap-Schalter

(1) Diese Komponente gehört nicht zu Bootstrap, sie muss es separat in bootstrap-switch.min.js und bootstrap-switch.min.css importiert werden

(2) Download-Adresse: http://www.bootcss.com/p/bootstrap-switch/

(3) Verwendung:

Frame hinzufügen:

    $('.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 () {
            });
    });

Komponente in HTML hinzufügen:

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

In js initialisieren:

    <input>

Der Status kann direkt bei der Initialisierung gesetzt werden:

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

Schaltstatus:

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

Überwachung von Schaltereignissen:

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

Zusammenfassung: Das Obige ist das Ich hoffe, dass der gesamte Inhalt dieses Artikels für das Studium aller hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonAnmerkungen zur BootStrap-Studie: Einführung in allgemeine Komponenten von BootStrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!