BootStrap study notes: Introduction to common components of BootStrap-HTML Tutorial-php.cn

BootStrap study notes: Introduction to common components of BootStrap

青灯夜游

Release： 2018-10-13 17:59:43

forward

3145 people have browsed it

This article will bring you an introduction to common components of BootStrap based on BootStrap study notes. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. If you want to learn and get more bootstrap related video tutorials, you can also visit: bootstrap tutorial!

1. Icon:

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

Copy after login

2. Button:

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

Copy after login

BootStrap study notes: Introduction to common components of BootStrap

3. Button size:

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

Copy after login

4. Display the icon in the button:

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

Copy after login

5. Drop-down menu:

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

Copy after login

菜单一
菜单二
菜单三

Interaction: monitor the click event of each menu, and display the current menu in the title after clicking it

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

Copy after login

6. Input box:

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

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

Copy after login

7. Navigation bar:

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

Copy after login

8. Form:

    <h3>表单</h3>

Copy after login

9. Warning box:

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

Copy after login

10. Progress bar:

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

Copy after login

11 , Arrange on the right

Generally we use float:right to realize the function of floating to the right, but the right involves clearing the float, adjusting the margin on the right, the margin up and down, etc. Of course, in bootstrap To use his method, just add a class: pull-right to solve the problem:

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

Copy after login

The first line must be on a horizontal line with the second line, so the first line cannot use

12. Use of tabs

Tab can easily switch the displayed content in a page. The use of bootstrap tabs is very simple:

Copy after login

tab1
tab2
tab3

这是宝贝管理页面

这是tab1

这是tab2

这是tab3

can be easily captured in js Switch tabs and make corresponding changes. For example, when the second page is loading some data, then I wait until I switch to the second page and then load it:

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

Copy after login

13, bootstrap-table

A plug-in that can request json data and generate tables through ajax

Project address:

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

14. Notification message component

Download address:

https://github.com/CodeSeven/toastr

Documentation:

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

Introduction:

Find the build folder in the downloaded file and introduce toastr inside .min.js and toastr.css

Usage:

This prompt message is displayed in the upper right corner of the browser by default. We can change it to be displayed in the top center during initialization:

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

Copy after login

The location display setting has the following options:

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

Copy after login

Then when we need to display it, just call it like this:

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

Copy after login

15, ajax request

Button:

                <button>
                    换个密码
                </button>

Copy after login

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

Copy after login

16. bootstrap-switch

(1) This component does not belong to bootstrap, it needs to be imported separately into bootstrap-switch.min. js and bootstrap-switch.min.css;

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

(3) Usage:

Add framework:

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

Copy after login

Add component in html:

    <input>

Copy after login

Initialize in js:

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

Copy after login

The status can be set directly during initialization:

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

Copy after login

Switching status:

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

Copy after login

Listening to switching events:

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

Copy after login

Summary: The above is the entire content of this article. I hope it will be helpful to everyone's study.

The above is the detailed content of BootStrap study notes: Introduction to common components of BootStrap. For more information, please follow other related articles on the PHP Chinese website!