Popular blog tags

1.全思科技 的作品栏有很多用bootstrap开发的站点 http://www.quansitech.com.

2.https://ahrefs.com/:seo 优化网站,多国语言,使用bootstarp4

3.https://www.radzen.com/ 使用bootstrap4,自定义css和js,网站非常快

Placing Search Form inside Navbar

Search form is very common component of the navbars and you have seen it on various website quite often. You can place various form controls and components within a navbar using the class .form-inline on the <form> element, as shown in the following example:

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <a href="#" class="navbar-brand">Brand</a>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarCollapse">
        <div class="navbar-nav">
            <a href="#" class="nav-item nav-link active">Home</a>
            <a href="#" class="nav-item nav-link">About</a>
            <a href="#" class="nav-item nav-link">Products</a>
        </div>
        <form class="form-inline ml-auto">
            <input type="text" class="form-control mr-sm-2" placeholder="Search">
            <button type="submit" class="btn btn-outline-light">Search</button>
        </form>
    </div>
</nav>

 

Creating the Fixed to Top Navbar

Apply the position utility class .fixed-top to the .navbar element to fix the navbar at the top of the viewport, so that it won't scroll with the page. Here's an example:

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <!-- Navbar content -->
</nav>

Bootstrap 4 - how to make 100% width search input in Navbar?

As of Bootstrap 4 the Navbar is flexbox so creating a full-width search input is easier. You can simply use w-100 and d-inline utility classes:

<form class="mx-2 my-auto d-inline w-100">
   <div class="input-group">
      <input type="text" class="form-control" placeholder="...">
       <span class="input-group-append">
       <button class="btn btn-outline-secondary" type="button">GO</button>
       </span>
    </div>
</form>

Here's another example with the search input outside of the collapsing navbar:

<!-- search input not in navbar collapse -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <div class="d-flex flex-grow-1">
        <a href="/" class="navbar-brand">Codeply</a>
        <form class="mr-2 my-auto w-100 d-inline-block order-1">
            <div class="input-group">
                <input type="text" class="form-control border border-right-0" placeholder="Search...">
                <span class="input-group-append">
                    <button class="btn btn-outline-light border border-left-0" type="button">
                        <i class="fa fa-search"></i>
                    </button>
                </span>
            </div>
        </form>
    </div>
    <button class="navbar-toggler order-0" type="button" data-toggle="collapse" data-target="#navbar7">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse flex-shrink-1 flex-grow-0 order-last" id="navbar7">
        <ul class="navbar-nav">
            ..
        </ul>
    </div>
</nav>