How to create a search box in bootstrap

In the project development process, we will use search options more or less, So how to make a standard, good-looking search box? Here we recommend input-group, a control that comes with bootstrap.

Recommended manual：Bootstrap Chinese manual

Let’s take a brief look at the official description of this control

Input group
Easily extend form controls by adding text, buttons, or button groups on either side of textual <input>s.
Contents
    Basic example
    Sizing
    Checkboxes and radio addons
    Button addons
    Buttons with dropdowns
    Segmented buttons
    Accessibility

It means for The form submission function we usually use can add buttons and text to both sides of the input field.

Related recommendations: "Bootstrap Getting Started Tutorial"

The following seven contents of Contents are the basic functions it can achieve. Here we focus on the fourth button Addons are enough, if you are interested you can learn the rest by yourself.

Button addons
Buttons in input groups are a bit different and require one extra level of nesting. Instead of .
input-group-addon, 
you’ll need to use .input-group-btn to wrap the buttons. This is required due to default browser 
styles that cannot 
be overridden.

The above paragraph means that the buttons in input groups are different from ordinary ones and require a different nesting level. In fact, to put it simply, we no longer use input-group-addon, but use input-group-btn to manage buttons. The demo code I gave is as follows:

<div class="input-group col-md-3" style="margin-top:0px positon:relative">
       <input type="text" class="form-control"placeholder="请输入字段名" / >
            <span class="input-group-btn">
               <button class="btn btn-info btn-search">查找</button>
               <button class="btn btn-info btn-search" style="margin-left:3px">添加</button>
            </span>
 </div>

The final effect is as follows Display

This perfectly displays the search bar options, and the style remains consistent.

Recommended related articles:
1.Bootstrap Table search box and query function detailed explanation
2.BootStrap-table server-side background paging and the use of custom search box implementation
Related video recommendations:
1.Dugu Jiujian(7)_Bootstrap video tutorial

The above is the detailed content of How to create a search box in bootstrap. For more information, please follow other related articles on the PHP Chinese website!