Bootstrap common interview questions

1. Why use bootstrap?

Bootstrap is widely used because of its mobile device priorities, good browser support, ease of use, responsive design, and more.

2. In order for bootstrap-developed websites to be mobile-friendly and ensure proper drawing and touch-screen zooming, you need to add the viewport meta tag to the head of the web page, and the width property controls the width of the device. Assuming that your site will be viewed by devices with different screen resolutions, setting it to device-width ensures that it renders correctly on different devices.

The initial-scale=1.0 ensures that when a page loads, it is rendered at a 1:1 scale without any scaling.

On mobile device browsers, you can disable the zooming feature by adding user-scalable-no to the viewport meta tag.

Typically, maximum-scale-1.0 is used with user-scalable-no. By disabling zoom, users can only scroll through the screen to make your site look more like a native app, so add the following code:

<metanamemetaname="viewport" content="width=device-width,initial-scale=1">

3. What is the class prefix set by Bootstrap for devices of all sizes?

Ultra-small device phone (<768px): .col-xs-

Small device tablet (> s.768px): .col-sm-

Medium-sized desktop computer (> s.992px): .col-md-

Large-scale desktop computer (> s.1200px): .col-lg-

4. How does Bootstrap set up responsive tables?

Add class s"table-responsive"

5, the basic steps to create a vertical form using Bootstrap?

(1) Add the role to the parent <form > element, "form";

(2) Put the labels and controls in a < div > with class"form-group", which is necessary to obtain the best spacing;

(3) Add class-form-control to all text elements < input >, < texttarea >, .

6. Basic steps to create a horizontal form using Bootstrap?

(1) Add class to the parent <form > element, class-form-horizontal;

(2) Put the labels and controls in a < div > with class-"form-group";

(3) Add class to the label, "control-label".

7. How do I create help text for a form control using Bootstrap?

Add the span label or p label of class-"help-block".

8. How do I activate or disable the button using Bootstrap?

Activate button: Add .active class to the button

Disable button: Add the "disabled" attribute to the button

9. What are Bootstrap classes about <img >?

(1). img-rounded add fillets to the picture

(2) img-circle turns the picture round

(3). img-thumbnail thumbnail function

(4). img-responsive picture responsive (will extend well to parent elements)

10, Bootstrap about element floating and clearing floating class?

(1) The class-"pull-left" element floats to the left

(2) The class-"pull-right" element floats to the right

(3) class "clearfix" clear float

11. Class of hidden elements on other devices besides screen readers?

class="sr-only"

12. How does Bootstrap make a drop-down menu?

(1) Wrap the drop-down menu in the < div > of class-"dropdown";

(2) Add in the button that triggers the drop-down menu: class"btn dropdown-toggle" id "dropdownMenu1" data-toggle,""dropdown"

(3) Add in the ul of the package drop-down menu: class-"drop-menu" role-"menu" aria-labelledby,"dropdownMenu1"

(4) Add in the list item of the drop-down menu: role-"presentation". Wherein, the title of the drop-down menu is to add class-drop-header, and the options section is to add tabindex to "-1".

13. How does Bootstrap make button groups? And the priority of horizontal and vertical button groups?

(1) The <div group of "btn-group" is used to > to wrap the button group;

(2) btn-group takes precedence over btn-group-vertical.

14, Bootstrap how to set the button drop-down menu?

Place buttons and drop-down menus in a .btn-group.

15. How do I make an input box group in Bootstrap?

(1) Place the prefix or suffix element in a < div > with class-input-group;

(2) place additional content in the < div >, in the <span > of class-group-addon;

(3) Place the < span > in front of or after the element > < input.

16. What are the navigations in Bootstrap?

(1) Navigation elements: tab navigation with class-nav nav-tabs, and capsule tab navigation with class-nav nav-pills;

(2) Navigation bar: class, "navbar navbar-default" role, "navigation";

(3) Breadcrumbs navigation: class -"breadcrumb"

17, Bootstrap set pagination class?

The default pagination: class -"pagination"

Default page-turning: class-"pager"

18, Bootstrap shows the label class?

class="label"

19. How do I make badges in Bootstrap?

<span class="badge">26</span>

20. What is the role of the oversized screen in Bootstrap?

Setting class "jumbotron" can make a very large screen, and the component can increase the size of the title and add more margins.