Notes d'étude BootStrap : Introduction aux composants courants de BootStrap

Cet article vous présentera une introduction aux composants courants de BootStrap basée sur les notes d'étude de BootStrap. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile. Si vous souhaitez apprendre et obtenir plus de didacticiels vidéo sur le bootstrap, vous pouvez également visiter : tutoriel bootstrap !

1. Icône :

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

2. Bouton :

    <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. Afficher l'icône dans le bouton :

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

5. Menu déroulant :

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

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

    Interaction : surveiller l'événement clic de chacun. menu, Après avoir cliqué, le menu actuel s'affiche dans le titre

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

6. Zone de saisie :

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

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

7.

8. Formulaire :

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

9. Boîte d'alerte :

    <h3>表单</h3>
    

    

             <input>     

    

             <input>     

    

      File input       <input>       

Example block-level help text here.

         

               <input> Check me out            

    Submit   

10. Barre de progression :

    <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. Disposer vers la droite

Généralement, nous utilisons float:right pour réaliser la fonction de. flottant vers la droite, mais cette partie droite implique d'effacer les flottants, d'ajuster la marge droite, les marges supérieure et inférieure, etc. Bien sûr, vous devez utiliser sa méthode dans bootstrap. Ajoutez simplement une classe : pull-right pour le résoudre :

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

Ceci La première ligne doit être sur la même ligne horizontale que la deuxième ligne, donc la première ligne ne peut pas utiliser

car cet élément a sa propre fonction de saut de ligne.

12. Utilisation des onglets

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

Tab peut facilement changer le contenu affiché sur une page. L'utilisation des onglets de Bootstrap est très simple :

C'est pratique dans js Capture. changement d'onglet et apporter les modifications correspondantes. Par exemple, lorsque la deuxième page charge des données, j'attends qu'elle passe à la deuxième page, puis je la charge :

        
• tab1
        
• tab2
        
• tab3
    

    这是宝贝管理页面     

        

            

这是tab1

                 

            

这是tab2

                 

            

这是tab3

              13. bootstrap -table

Un plug-in qui peut demander des données json via ajax et générer une table

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

Adresse du projet :

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

14. Composant de message de notification

Adresse de téléchargement :

https://github.com/CodeSeven/toastr

Documentation :

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

Introduction :

Recherchez le dossier build dans le fichier téléchargé, présentez toastr .min.js et toastr.css à l'intérieur de

utilisent :

Ce message d'invite est affiché par défaut dans le coin supérieur droit du navigateur. Nous pouvons le remplacer par lors de l'initialisation. . Affichage central supérieur :

Le paramètre d'affichage de la position a les options suivantes :

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

Ensuite, lorsque nous avons besoin de l'afficher, appelez-le simplement comme ceci :

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. demande ajax

bouton :

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

js :

                <button>
                    换个密码
                </button>

16. ) ce composant Il n'appartient pas à bootstrap. Il doit introduire bootstrap-switch.min.js et bootstrap-switch.min.css séparément

(2) Adresse de téléchargement : http://www.bootcss ; .com/p/bootstrap- switch/

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

(3) Comment utiliser :

Ajouter un cadre :

Ajouter un composant en html :

dans js Initialisation :

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

    <input>

Vous pouvez définir le statut directement dans l'initialisation :

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

Statut du commutateur :

Écoutez les événements de changement :

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

Résumé : Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'apprentissage de chacun.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!