New issue of dry goods come, how to use bootstrap (Le byte Java) 5

Time:2020-7-22

Bootstrap plug in

                                          A kind of (indicate the intention)
                    New issue of dry goods come, how to use bootstrap (Le byte Java) 5
The main function of the form is a web control used to communicate with users. Good form design can make the web page communicate with users better. The common elements in the form mainly include: text input box, drop-down selection box, radio button, check button, text field and button, etc.

Navigation

Navigation can be made by using pull-down and button combination

Key points:

1. Basic style: NAV, NAV tabs and NAV balls to make navigation
2. Classification: 
    1) NAV tabs navigation
    2) NAV balls navigation
    3) NAV stacked navigation
    4) NAV adjusted navigation
    5) Breadcrumb navigation, which uses the style alone and does not use it with NAV. It can be directly added to OL and UL. It is generally used for navigation, and its main function is to inform the user of the current page position (current position)
3. Status:
    1) . select the active style
    2) , disabled status: disable
4. Secondary menu

Tag navigation

<p>Tabbed navigation menu</p>
<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>

Capsule navigation

<p>Basic capsule navigation menu</p>
<ul class="nav nav-pills">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">SVN</a></li>
    <li><a href="#">iOS</a></li>
    <li><a href="#">VB.Net</a></li>
    <li><a href="#">Java</a></li>
    <li><a href="#">PHP</a></li>
</ul>

Paging navigation

Pagination can be seen everywhere, divided into page navigation and page turning navigation

Page navigation: UL tag with pagination [pagination LG | pagination SM]

Pager on UL tag

paging

<ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
</ul>

Turn the page

<ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
</ul>

drop-down menu

When using the drop-down menu of the bootstrap framework, you must use two JS

<! -- if you want to use the JS plug-in of bootstrap, you must first call in jQuery -- >
<script></script>
<! -- including all JS plug-ins of bootstrap or JS plug-ins that can be used as needed -- >
<script></script>

Key points:

1. Wrap the drop-down box with a div named dropdown or BTN group 
   <div class="dropdown"></div>
2. By default, drop down, pop up and add. Dropup
3. Use button as the parent menu, and use the class name: dropdown toggle and custom data toggle properties
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"></button>
4. Making drop-down arrow with font in button
    <span class="caret"></span>
5. The drop-down menu item uses a UL list and defines a class named "dropdown menu"
6. Group dividing line: < li > add the class name "divider" to add the drop-down separator
7. Group title: Li add the class name "dropdown header" to realize the function of grouping
8. Alignment:
    1) , dropdown menu left left
    2) , dropdown menu right right
9. Active state (. Active) and disabled state (. Disabled)
<! -- use a class named dropdown. By default, drop down dropdown and pop up to join. Dropup -- >
<div class="dropdown ">
    <! -- use button as the parent menu, and use the class name: dropdown toggle and custom data toggle properties -- >
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        Like channel < span class = "caret" > < / span > <! -- drop down arrow -- >
    </button>
    <! -- the drop-down menu item uses a UL list and defines a class named "dropdown menu -- >
    < UL class = "dropdown menu" > <! -- dropdown menu right
        <! -- group title: Li add the class name "dropdown header" to realize the function of grouping -- >
        < Li class = "dropdown header" > --- popular science----</li>
        <li>
            Human and nature</a>
        </li>
        <! -- grouping line: < li > add the class name "divider" to add the drop-down separator line -- >
        <li class="divider"></li>
        < Li class = "dropdown header" > --- funny----</li>
        <li>
            Happy comedian</a>
        </li>
        <li>
            Happy base camp</a>
        </li>
        <li class="divider"></li>
        < Li class = "disabled" > <! -- disabled status -- >
            The big bang of life</a>
        </li>
    </ul>
</div>

Modal box

A modal box is a child form that overlays the parent form. Typically, the goal is to display content from a single source, which can have some interaction without leaving the parent form. The subform can provide information, interaction, etc.

usage

  1. Through the data attribute: set properties on controller elements such as buttons or linksdata-toggle=”modal”At the same timedata-target=”#identifier”orhref=”#identifier”To specify the specific modal box (with id = identifier) to switch.
  2. Through JavaScript: with this technique, modal boxes with id = identifier can be called through javascript:
$('#identifier').modal(options);

example

<h2>Create modal</h2>
<! -- button trigger mode box -- >
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Start demonstrating the modal box
</button>
<! -- modal -- >
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                < H4 class = "modal title" id = "mymodal label" > modal box title < / H4 >
            </div>
            < div class = "modal body" > add some text here < / div >
            <div class="modal-footer">
                < button type = "button" class = "BTN BTN default" data dispersion = "modal" > Close < / button > to
                < button type = "button" class = "BTN BTN primary" > commit changes < / button >
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

method

method describe example
Toggle: .modal(‘toggle’) Manually switch the mode box. $('#identifier').modal('toggle');
Show: .modal(‘show’) Open the modal box manually. $('#identifier').modal('show');
Hide: .modal(‘hide’) Hide the modal box manually. $('#identifier').modal('hide');