“This is the 27th day of my participation in the August Gwen Challenge.

preface

In this article, we will learn how to use Bootstrap styles, such as lists, buttons, and navigation bars.

The Bootstrap list

Stylesless list

Removes the default list-style style and left margin for a set of elements (for direct children only). This is for direct child elements, which means you need to add this class to all nested lists to have the same style.

This is the same effect as a line break.

< ul class = "list - unstyled" > < li > this is the first column < / li > < li > this is the second column < / li > < li > this is the third column < / li > < / ul >Copy the code

Inline list

By setting display: inline-block; Add a little padding and place all the elements on the same line.

< ul class = "list - the inline" > < li > this is the first column < / li > < li > this is the second column < / li > < li > this is the third column < / li > < / ul >Copy the code

The Bootstrap button

Tags or elements that can be used as buttons ,

Button style

There are 7 types of button styles we can use, according to different needs to choose the button we want to use.

<button type="button" class=" BTN btn-default"> (default style) default </button> <button type="button" class=" BTN Btn-primary "> (下 载) btn-primary </button> <button type=" btn-primary" class=" btn-primary" Type ="button" class=" BTN btn-info"> info </button> <button type="button" class=" BTN" Btn-warning "> (warning) Warning</button> <button type="button" class=" btn-danger"> (danger) </button> <button type="button" Class =" BTN btn-link"> (link) link </button>Copy the code

Button size

We can also change the size of the button. Use.btn-lg,.btn-sm, or.btn-xs to get buttons of different sizes.

<button type="button" class=" BTN btn-default bTN-lg "> </button> <button type="button" class=" BTN btn-default" </button> <button type="button" class=" BTN btn-default btn-sm"> </button> <button type="button" class=" BTN Btn-default bTN-xs "> </button>Copy the code

Button state

We can also change the state of the button, including active state and disabled state.

active

When the button is active, it behaves as if it is pressed down. For 

<p> <button type="button" class=" BTN btn-default "> Inactive </button> <button type="button" class=" BTN btn-default" </button> </p> <p> <a href="#" class="btn-primary "> Inactive </a> <a href="#" class="btn-primary Active "> Active status </ A > </ P >Copy the code

Disabled state

  • for<button>Element to adddisabledProperty to make it appear disabled.
  • Based on the<a>Element created by button added.disabledClass.
<p> <a href="#" class="btn-primary disabled"> </a> <button type="button" class="btn-primary" </button> </p>Copy the code

Using the Disabled property is more user-friendly, changing the state of the mouse to give us a hint when the mouse is placed over it. You can try it.

Write in the last

That’s it for this article. In the next article, we will continue to learn the navigation bar and the wheel cast diagram in the Bootstrap style. If the above content is not correct, welcome to dig friends to criticize!