Heim > Web-Frontend > HTML-Tutorial > Anmerkungen zur BootStrap-Studie: Einführung in allgemeine Komponenten von BootStrap

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

青灯夜游
Freigeben: 2018-10-13 17:59:43
nach vorne
3143 Leute haben es durchsucht

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>
Nach dem Login kopieren

Anmerkungen zur BootStrap-Studie: Einführung in allgemeine Komponenten von BootStrap
3. Schaltflächengröße:

    <h3>按钮</h3>
    <button>按钮</button>
    <button>primary</button>
    <button>success</button>
    <button>info</button>
    <button>warning</button>
    <button>danger</button>
Nach dem Login kopieren

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

    <h3>按钮尺寸</h3>
    <button>按钮</button>
    <button>primary</button>
    <button>success</button>
    <button>info</button>
Nach dem Login kopieren

5. Dropdown-Menü:

    <h3>把图标显示在按钮里</h3>
    <button><span></span>  按钮</button>
Nach dem Login kopieren

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>
Nach dem Login kopieren
    

6. Eingabefeld:

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

7. Navigationsleiste:

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

    <p>
      <span></span>
      <input>
    </p>
Nach dem Login kopieren
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>
Nach dem Login kopieren

           9. Warnfeld:

    <h3>表单</h3>
    
Nach dem Login kopieren
    

             <input>     

    

             <input>     

    

             <input>       

Example block-level help text here.

    

    

           

       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>
Nach dem Login kopieren
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>
    
Nach dem Login kopieren

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>
Nach dem Login kopieren

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:

    
Nach dem Login kopieren
            
  • 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);
        });
Nach dem Login kopieren
Die Standortanzeigeeinstellung hat die folgenden Optionen:

        toastr.options.positionClass = 'toast-top-center';//显示位置
Nach dem Login kopieren
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
Nach dem Login kopieren
15 Anfrage

Button:

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

                <button>
                    换个密码
                </button>
Nach dem Login kopieren
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 () {
            });
    });
Nach dem Login kopieren
Komponente in HTML hinzufügen:

<link>
<link>
<script></script>
<script></script>
Nach dem Login kopieren
In js initialisieren:

    <input>
Nach dem Login kopieren

Der Status kann direkt bei der Initialisierung gesetzt werden:

        $("[name='my-checkbox']").bootstrapSwitch();
Nach dem Login kopieren

Schaltstatus:

    $("#isOpenCheckbox").bootstrapSwitch('state',false);
Nach dem Login kopieren

Überwachung von Schaltereignissen:

    $('#isOpenCheckbox').bootstrapSwitch('toggleState');
Nach dem Login kopieren
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!

Verwandte Etiketten:
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage