Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to use bootstrap components

2025-02-24 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to use bootstrap components. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

Bootstrap components are used, you can access the component library https://v3.bootcss.com/components/, we can view all the component information of bootstrap and use it.

I. the use of font icons

The name under these icons is the corresponding class name. We can access the class name directly when we use it:

Bootstrap font icon

Second, the use of button components

Note: there are seven button styles: btn-default, btn-primary, btn-info, btn-success, btn-warning, btn-danger and btn-link.

There are three button sizes: btn-lg, btn-sm and btn-xs

In addition, a type like input can also style buttons in bootstrap.

The default primary message determines the prompt to unlink Link Button

Button drop-down menu

First, there must be a drop-down menu div container, and the style should be set to dropdown;. Secondly, the button style of the drop-down menu should be set to dropdown. In addition, the value of the aria-labelledby attribute in the ul of the last drop-down menu of id; should correspond to the value of id in button!

Dropdown Dropdown header Action Another action Something else here Separated link

Button groups and nesting

Button groups can also be set in size: btn-group-lg, btn-group-sm, btn-group-xs

LeftMiddle Right Dropdown Dropdown link Dropdown link

5. Vertical button group

A btn-group-vertical class can implement

LeftMiddle Right

6. Align button sets at both ends

LeftMiddleRight on "how to use bootstrap components" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report