blocks|key|175466|text|我在一个开发站点上运行了BS3，下面的代码产生了你所要求的效果/布局。当然，您需要在BS3中设置字形图标。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|175467|<div+class="navbar+navbar-inverse+navbar-static-top"+role="navigation">

++++<div+class="navbar-header">
++++++++<button+type="button"+class="navbar-toggle"+data-toggle="collapse"+data-target=".navbar-ex1-collapse">
++++++++<span+class="sr-only">Toggle+navigation</span>
++++++++<span+class="icon-bar"></span>
++++++++<span+class="icon-bar"></span>
++++++++<span+class="icon-bar"></span>
++++++++</button>
++++++++<a+class="navbar-brand"+rel="home"+href="/"+title="Aahan+Krish's+Blog+-+Homepage">ITSMEEE</a>
++++</div>

++++<div+class="collapse+navbar-collapse+navbar-ex1-collapse">

++++++++<ul+class="nav+navbar-nav">
++++++++++++<li><a+href="/topic/notes/">/notes</a></li>
++++++++++++<li><a+href="/topic/dev/">/dev</a></li>
++++++++++++<li><a+href="/topic/good-reads/">/good-reads</a></li>
++++++++++++<li><a+href="/topic/art/">/art</a></li>
++++++++++++<li><a+href="/topic/bookmarks/">/bookmarks</a></li>
++++++++++++<li><a+href="/all-topics/">/all</a></li>
++++++++</ul>

++++++++<div+class="col-sm-3+col-md-3+pull-right">
++++++++<form+class="navbar-form"+role="search">
++++++++<div+class="input-group">
++++++++++++<input+type="text"+class="form-control"+placeholder="Search"+name="srch-term"+id="srch-term">
++++++++++++<div+class="input-group-btn">
++++++++++++++++<button+class="btn+btn-default"+type="submit"><i+class="glyphicon+glyphicon-search"></i></button>
++++++++++++</div>
++++++++</div>
++++++++</form>
++++++++</div>

++++</div>
</div>|code-block|syntax|javascript|175468|更新:请参阅JSFiddle|offset|length|175469|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/philnicholas/XfzFQ/^0|0|0|6|8|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>I'm running BS3 on a dev site and the following produces the effect/layout you're requesting.  Of course you'll need the glyphicons set up in BS3.</p>

<pre><code>&lt;div class="navbar navbar-inverse navbar-static-top" role="navigation"&gt;

    &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"&gt;
        &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;a class="navbar-brand" rel="home" href="/" title="Aahan Krish's Blog - Homepage"&gt;ITSMEEE&lt;/a&gt;
    &lt;/div&gt;

    &lt;div class="collapse navbar-collapse navbar-ex1-collapse"&gt;

        &lt;ul class="nav navbar-nav"&gt;
            &lt;li&gt;&lt;a href="/topic/notes/"&gt;/notes&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="/topic/dev/"&gt;/dev&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="/topic/good-reads/"&gt;/good-reads&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="/topic/art/"&gt;/art&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="/topic/bookmarks/"&gt;/bookmarks&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="/all-topics/"&gt;/all&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;

        &lt;div class="col-sm-3 col-md-3 pull-right"&gt;
        &lt;form class="navbar-form" role="search"&gt;
        &lt;div class="input-group"&gt;
            &lt;input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term"&gt;
            &lt;div class="input-group-btn"&gt;
                &lt;button class="btn btn-default" type="submit"&gt;&lt;i class="glyphicon glyphicon-search"&gt;&lt;/i&gt;&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;/form&gt;
        &lt;/div&gt;

    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>UPDATE: See <a href="http://jsfiddle.net/philnicholas/XfzFQ/" rel="noreferrer">JSFiddle</a></p>


blocks|key|2784827|text|这是我可以在不添加任何自定义CSS的情况下获得的最接近的CSS(这是我在提出问题时已经想到的；我想我必须坚持这样做)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2784828|​|2784829|📷|atomic|offset|length|2784830|2784831|和正在使用的标记：|2784832|<form+class="navbar-form+navbar-left"+role="search">
++++<div+class="form-group">
++++++++<input+type="text"+class="form-control"+placeholder="Search">
++++</div>
++++<button+type="submit"+class="btn+btn-default">
++++++++<span+class="glyphicon+glyphicon-search"></span>
++++</button>
</form>|code-block|syntax|javascript|2784833|PS:当然，这可以通过在按钮上添加负margin-left+(-4px)，并删除input和button交会边的border-radius来修复。但这个问题的重点是让它在没有任何自定义CSS的情况下工作。|style|BOLD|CODE|2784834|2784835|2784836|2784837|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/b50a960b3a884a094218023716dbf8f5.png|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/d903d1fcc7537d9e7682a447df4d3860.png^0|0|0|0|1|0|0|0|0|0|0|3|I|B|14|5|1A|6|1K|D|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|19|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1A|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1B|8|@]|9|@$G|1C|H|1D|1|1E]]|A|$]]|$1|I|3|C|5|6|7|1F|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1G|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1H|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|1I|8|@$G|1J|H|1K|S|T]|$G|1L|H|1M|S|U]|$G|1N|H|1O|S|U]|$G|1P|H|1Q|S|U]|$G|1R|H|1S|S|U]]|9|@]|A|$]]|$1|V|3|C|5|6|7|1T|8|@]|9|@]|A|$]]|$1|W|3|E|5|F|7|1U|8|@]|9|@$G|1V|H|1W|1|1X]]|A|$]]|$1|X|3|C|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1Z|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|15|16|-4]]|17|$5|11|12|13|A|$14|18|16|-4]]]]

<p>This is the closest I could get without adding any custom CSS (this I'd already figured as of the time of asking the question; guess I've to stick with this):</p>

<p><img src="https://i.stack.imgur.com/dVZvS.png" alt="Navbar Search Box"></p>

<p>And the markup in use:</p>

<pre><code>&lt;form class="navbar-form navbar-left" role="search"&gt;
    &lt;div class="form-group"&gt;
        &lt;input type="text" class="form-control" placeholder="Search"&gt;
    &lt;/div&gt;
    &lt;button type="submit" class="btn btn-default"&gt;
        &lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;
    &lt;/button&gt;
&lt;/form&gt;
</code></pre>

<p><strong>PS:</strong> Of course, that can be fixed by adding a negative <code>margin-left</code> (-4px) on the button, and removing the <code>border-radius</code> on the sides <code>input</code> and <code>button</code> meet. But the whole point of this question is to get it to work without any custom CSS.</p>

<p><img src="https://i.stack.imgur.com/jNZnS.png" alt="Fixed Navbar Search box"></p>


blocks|key|2784852|text|您可以使用Bootstrap+3中的分段按钮示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2784853|<form+action=""+class="navbar-form+navbar-right">
+++<div+class="input-group">
+++++++<input+type="Search"+placeholder="Search..."+class="form-control"+/>
+++++++<div+class="input-group-btn">
+++++++++++<button+class="btn+btn-info">
+++++++++++<span+class="glyphicon+glyphicon-search"></span>
+++++++++++</button>
+++++++</div>
+++</div>
</form>|code-block|syntax|javascript|2784854|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You could use the segmented buttons example from Bootstrap 3:</p>

<pre><code>&lt;form action="" class="navbar-form navbar-right"&gt;
   &lt;div class="input-group"&gt;
       &lt;input type="Search" placeholder="Search..." class="form-control" /&gt;
       &lt;div class="input-group-btn"&gt;
           &lt;button class="btn btn-info"&gt;
           &lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;
           &lt;/button&gt;
       &lt;/div&gt;
   &lt;/div&gt;
&lt;/form&gt;
</code></pre>


blocks|key|176781|text|我尝试了@PhilNicholas的代码，得到了同样的问题，@its_me在评论中说，搜索栏显示在导航栏的下一行，我发现form需要添加一个属性width。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|176782|<form+role="search"+style="width:+15em;+margin:+0.3em+2em;">
++++<div+class="input-group">
++++++++<input+type="text"+class="form-control"+placeholder="Search">
++++++++<div+class="input-group-btn">
++++++++++++<button+type="submit"+class="btn+btn-default">
++++++++++++++++<span+class="glyphicon+glyphicon-search"></span>
++++++++++++</button>
++++++++</div>
++++</div>
</form>+|code-block|syntax|javascript|176783|entityMap^0|1O|4|20|5|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>I tried @PhilNicholas 's code and got the same problem of @its_me said in the comments that search bar show up on the next line of navbar, and I found that <code>form</code> need to be added an attribute <code>width</code>.</p>

<pre><code>&lt;form role="search" style="width: 15em; margin: 0.3em 2em;"&gt;
    &lt;div class="input-group"&gt;
        &lt;input type="text" class="form-control" placeholder="Search"&gt;
        &lt;div class="input-group-btn"&gt;
            &lt;button type="submit" class="btn btn-default"&gt;
                &lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;
            &lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/form&gt; 
</code></pre>


blocks|key|2997430|text|这是我为我的网站实现的一个，如果有人得到了更多的菜单项和更长的搜索栏可以使用这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2997431|​|2997432|📷|atomic|offset|length|2997433|2997434|2997435|2997436|2997437|以下是代码|2997438|+++++++<style>
++++++++.navbar-inverse+.navbar-nav+>+li+>+a+{
++++++++++++color:+white+!important;
++++++++}

++++++++++++.navbar-inverse+.navbar-nav+>+li+>+a:hover+{
++++++++++++++++text-decoration:+underline;
++++++++++++}

++++++++.navbar-collapse+ul+li+{
++++++++++++padding-top:+0px;
++++++++++++padding-bottom:+0px;
++++++++}

++++++++++++.navbar-collapse+ul+li+a+{
++++++++++++++++padding-top:+0px;
++++++++++++++++padding-bottom:+0px;
++++++++++++}

++++++++.navbar-brand+img+{
++++++++++++width:+200px;
++++++++++++height:+40px;
++++++++}

++++++++.navbar-inverse+{
++++++++++++background-color:+#3A1B37;
++++++++}
++++</style>
+++<div+class="navbar+navbar-inverse+navbar-fixed-top">
++++++++<div+class="container">
++++++++++++<div+class="navbar-header">
++++++++++++++++<button+type="button"+class="navbar-toggle"+data-toggle="collapse"+data-target=".navbar-collapse">
++++++++++++++++++++<span+class="icon-bar"></span>
++++++++++++++++++++<span+class="icon-bar"></span>
++++++++++++++++++++<span+class="icon-bar"></span>
++++++++++++++++</button>
++++++++++++++++<a+class="navbar-brand"+runat="server"+href="~/">
++++++++++++++++++++<img+src="http://placehold.it/200x40/3A1B37/ffffff/?text=Apllicatin"></a>
++++++++++++++++<div+class="col-md-6+col-sm-8+col-xs-11+navbar-left">
++++++++++++++++++++<div+class="navbar-form+"+role="search">
++++++++++++++++++++++++<div+class="input-group">
++++++++++++++++++++++++++++<input+type="text"+class="form-control"+placeholder="Search"+name="srch-term"+id="srch-term"+style="max-width:+100%25;+width:+100%25;">
++++++++++++++++++++++++++++<div+class="input-group-btn">
++++++++++++++++++++++++++++++++<button+class="btn+btn-default"+style="background:+rgb(72,+166,+72);"+type="submit"><i+class="glyphicon+glyphicon-search"></i></button>
++++++++++++++++++++++++++++</div>
++++++++++++++++++++++++</div>
++++++++++++++++++++</div>
++++++++++++++++</div>
++++++++++++</div>
++++++++++++<div+class="navbar-collapse+collapse">
++++++++++++++++<ul+class="nav+navbar-nav">
++++++++++++++++++++<li+class="navbar-brand++visible-md+visible-lg+visible-sm"+style="visibility:+hidden;"+runat="server">
++++++++++++++++++++++++<img+src="http://placehold.it/200x40/3A1B37/ffffff/?text=Apllicatin"+/>
++++++++++++++++++++</li>
++++++++++++++++++++<li><a+runat="server"+href="~/">Home</a></li>
++++++++++++++++++++<li><a+runat="server"+href="~/About">About</a></li>
++++++++++++++++++++<li><a+runat="server"+href="~/Contact">Contact</a></li>
++++++++++++++++++++<li><a+runat="server"+href="~/">Somthing</a></li>
++++++++++++++++++++<li><a+runat="server"+href="~/">Somthing</a></li>
++++++++++++++++</ul>
++++++++++++++++<ul+class="nav+navbar-nav+navbar-right">
++++++++++++++++++++<li><a+runat="server"+href="~/Account/Register">Register</a></li>
++++++++++++++++++++<li><a+runat="server"+href="~/Account/Login">Log+in</a></li>
++++++++++++++++</ul>+</div>

++++++++</div>
++++</div>|code-block|syntax|javascript|2997439|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/191c40dcb1989c11b6b3f6a411657971.jpeg|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/63e0eaa20c1ea5e77888a8a01a1d9808.jpeg^0|0|0|0|1|0|0|0|0|0|1|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|16|8|@]|9|@$G|17|H|18|1|19]]|A|$]]|$1|I|3|C|5|6|7|1A|8|@]|9|@]|A|$]]|$1|J|3|C|5|6|7|1B|8|@]|9|@]|A|$]]|$1|K|3|E|5|F|7|1C|8|@]|9|@$G|1D|H|1E|1|1F]]|A|$]]|$1|L|3|C|5|6|7|1G|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1H|8|@]|9|@]|A|$]]|$1|O|3|P|5|Q|7|1I|8|@]|9|@]|A|$R|S]]|$1|T|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]]|U|$V|$5|W|X|Y|A|$Z|10|11|-4]]|12|$5|W|X|Y|A|$Z|13|11|-4]]]]

<p>This one I implemented for my website , If some one got more no's of menu item and longer search bar can use this</p>

<p><a href="https://i.stack.imgur.com/84ThP.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/84ThP.jpg" alt="enter image description here"></a></p>

<p><a href="https://i.stack.imgur.com/wOIUo.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wOIUo.jpg" alt="enter image description here"></a></p>

<p>Here is the code</p>

<pre><code>       &lt;style&gt;
        .navbar-inverse .navbar-nav &gt; li &gt; a {
            color: white !important;
        }

            .navbar-inverse .navbar-nav &gt; li &gt; a:hover {
                text-decoration: underline;
            }

        .navbar-collapse ul li {
            padding-top: 0px;
            padding-bottom: 0px;
        }

            .navbar-collapse ul li a {
                padding-top: 0px;
                padding-bottom: 0px;
            }

        .navbar-brand img {
            width: 200px;
            height: 40px;
        }

        .navbar-inverse {
            background-color: #3A1B37;
        }
    &lt;/style&gt;
   &lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
        &lt;div class="container"&gt;
            &lt;div class="navbar-header"&gt;
                &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
                    &lt;span class="icon-bar"&gt;&lt;/span&gt;
                    &lt;span class="icon-bar"&gt;&lt;/span&gt;
                    &lt;span class="icon-bar"&gt;&lt;/span&gt;
                &lt;/button&gt;
                &lt;a class="navbar-brand" runat="server" href="~/"&gt;
                    &lt;img src="http://placehold.it/200x40/3A1B37/ffffff/?text=Apllicatin"&gt;&lt;/a&gt;
                &lt;div class="col-md-6 col-sm-8 col-xs-11 navbar-left"&gt;
                    &lt;div class="navbar-form " role="search"&gt;
                        &lt;div class="input-group"&gt;
                            &lt;input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term" style="max-width: 100%; width: 100%;"&gt;
                            &lt;div class="input-group-btn"&gt;
                                &lt;button class="btn btn-default" style="background: rgb(72, 166, 72);" type="submit"&gt;&lt;i class="glyphicon glyphicon-search"&gt;&lt;/i&gt;&lt;/button&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="navbar-collapse collapse"&gt;
                &lt;ul class="nav navbar-nav"&gt;
                    &lt;li class="navbar-brand  visible-md visible-lg visible-sm" style="visibility: hidden;" runat="server"&gt;
                        &lt;img src="http://placehold.it/200x40/3A1B37/ffffff/?text=Apllicatin" /&gt;
                    &lt;/li&gt;
                    &lt;li&gt;&lt;a runat="server" href="~/"&gt;Home&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a runat="server" href="~/About"&gt;About&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a runat="server" href="~/Contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a runat="server" href="~/"&gt;Somthing&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a runat="server" href="~/"&gt;Somthing&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
                &lt;ul class="nav navbar-nav navbar-right"&gt;
                    &lt;li&gt;&lt;a runat="server" href="~/Account/Register"&gt;Register&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a runat="server" href="~/Account/Login"&gt;Log in&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt; &lt;/div&gt;

        &lt;/div&gt;
    &lt;/div&gt;
</code></pre>


blocks|key|176807|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|176808|<!DOCTYPE+html>
<html+lang="en">

<head>

++++<meta+charset="utf-8">
++++<meta+http-equiv="X-UA-Compatible"+content="IE=edge">
++++<meta+name="viewport"+content="width=device-width,+initial-scale=1">
++++<meta+name="description"+content="">
++++<meta+name="author"+content="">

++++<title>3+Col+Portfolio+-+Start+Bootstrap+Template</title>

++++
++++<link+href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"+rel="stylesheet"/>
++++
++++
++++

</head>

<body>

++++
++++<nav+class="navbar+navbar-inverse+navbar-fixed-top"+role="navigation">
++++++++<div+class="container">
++++++++++++
++++++++++++<div+class="navbar-header">
++++++++++++++++<button+type="button"+class="navbar-toggle"+data-toggle="collapse"+data-target="#bs-example-navbar-collapse-1">
++++++++++++++++++++<span+class="sr-only">Toggle+navigation</span>
++++++++++++++++++++<span+class="icon-bar"></span>
++++++++++++++++++++<span+class="icon-bar"></span>
++++++++++++++++++++<span+class="icon-bar"></span>
++++++++++++++++</button>
++++++++++++++++<a+class="navbar-brand"+href="#">Start+Bootstrap</a>
++++++++++++</div>
++++++++++++
++++++++++++<div+class="collapse+navbar-collapse"+id="bs-example-navbar-collapse-1">
++++++++++++++++<ul+class="nav+navbar-nav">
++++++++++++++++++++<li>
++++++++++++++++++++++++<a+href="#">About</a>
++++++++++++++++++++</li>
++++++++++++++++++++<li>
++++++++++++++++++++++++<a+href="#">Services</a>
++++++++++++++++++++</li>
++++++++++++++++++++<li>
++++++++++++++++++++++++<a+href="#">Contact</a>
++++++++++++++++++++</li>
++++++++++++++++</ul>
++++++++++++++++<form+class="navbar-form+navbar-right">
++++++++++++++++++++<div+class="input-group">
++++++++++++++++++++++++<input+type="text"+name="keyword"+placeholder="search..."+class="form-control">
++++++++++++++++++++++++<span+class="input-group-btn">
++++++++++++++++++++++++++++<button+class="btn+btn-default">Go</button>
++++++++++++++++++++++++</span>
++++++++++++++++++++</div>
++++++++++++++++</form>
++++++++++++</div>
++++++++++++
++++++++</div>
++++++++
++++</nav>

++++
++++<div+class="container">

++++++++
++++++++<div+class="row">
++++++++++++<div+class="col-lg-12">
++++++++++++++++<h1+class="page-header">Page+Heading
++++++++++++++++++++<small>Secondary+Text</small>
++++++++++++++++</h1>
++++++++++++</div>
++++++++</div>
++++++++

++++++++
++++++++<div+class="row">
++++++++++++<div+class="col-md-3+portfolio-item">
++++++++++++++++<a+href="#">
++++++++++++++++++++<img+class="img-responsive"+src="http://placehold.it/700x400"+alt="">
++++++++++++++++</a>
++++++++++++++++<h3>
++++++++++++++++++++<a+href="#">Project+Name</a>
++++++++++++++++</h3>
++++++++++++++++<p>Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit.+Nam+viverra+euismod+odio,+gravida+pellentesque+urna+varius+vitae.</p>
++++++++++++</div>
++++++++++++<div+class="col-md-3+portfolio-item">
++++++++++++++++<a+href="#">
++++++++++++++++++++<img+class="img-responsive"+src="http://placehold.it/700x400"+alt="">
++++++++++++++++</a>
++++++++++++++++<h3>
++++++++++++++++++++<a+href="#">Project+Name</a>
++++++++++++++++</h3>
++++++++++++++++<p>Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit.+Nam+viverra+euismod+odio,+gravida+pellentesque+urna+varius+vitae.</p>
++++++++++++</div>
++++++++++++<div+class="col-md-3+portfolio-item">
++++++++++++++++<a+href="#">
++++++++++++++++++++<img+class="img-responsive"+src="http://placehold.it/700x400"+alt="">
++++++++++++++++</a>
++++++++++++++++<h3>
++++++++++++++++++++<a+href="#">Project+Name</a>
++++++++++++++++</h3>
++++++++++++++++<p>Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit.+Nam+viverra+euismod+odio,+gravida+pellentesque+urna+varius+vitae.</p>
++++++++++++</div>
++++++++++++<div+class="col-md-3+portfolio-item">
++++++++++++++++<a+href="#">
++++++++++++++++++++<img+class="img-responsive"+src="http://placehold.it/700x400"+alt="">
++++++++++++++++</a>
++++++++++++++++<h3>
++++++++++++++++++++<a+href="#">Project+Name</a>
++++++++++++++++</h3>
++++++++++++++++<p>Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit.+Nam+viverra+euismod+odio,+gravida+pellentesque+urna+varius+vitae.</p>
++++++++++++</div>
++++++++</div>
++++++++

++++++++
++++++++<div+class="row">
++++++++++++<div+class="col-md-3+portfolio-item">
++++++++++++++++<a+href="#">
++++++++++++++++++++<img+class="img-responsive"+src="http://placehold.it/700x400"+alt="">
++++++++++++++++</a>
++++++++++++++++<h3>
++++++++++++++++++++<a+href="#">Project+Name</a>
++++++++++++++++</h3>
++++++++++++++++<p>Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit.+Nam+viverra+euismod+odio,+gravida+pellentesque+urna+varius+vitae.</p>
++++++++++++</div>
++++++++++++<div+class="col-md-3+portfolio-item">
++++++++++++++++<a+href="#">
++++++++++++++++++++<img+class="img-responsive"+src="http://placehold.it/700x400"+alt="">
++++++++++++++++</a>
++++++++++++++++<h3>
++++++++++++++++++++<a+href="#">Project+Name</a>
++++++++++++++++</h3>
++++++++++++++++<p>Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit.+Nam+viverra+euismod+odio,+gravida+pellentesque+urna+varius+vitae.</p>
++++++++++++</div>
++++++++++++<div+class="col-md-3+portfolio-item">
++++++++++++++++<a+href="#">
++++++++++++++++++++<img+class="img-responsive"+src="http://placehold.it/700x400"+alt="">
++++++++++++++++</a>
++++++++++++++++<h3>
++++++++++++++++++++<a+href="#">Project+Name</a>
++++++++++++++++</h3>
++++++++++++++++<p>Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit.+Nam+viverra+euismod+odio,+gravida+pellentesque+urna+varius+vitae.</p>
++++++++++++</div>
++++++++++++<div+class="col-md-3+portfolio-item">
++++++++++++++++<a+href="#">
++++++++++++++++++++<img+class="img-responsive"+src="http://placehold.it/700x400"+alt="">
++++++++++++++++</a>
++++++++++++++++<h3>
++++++++++++++++++++<a+href="#">Project+Name</a>
++++++++++++++++</h3>
++++++++++++++++<p>Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit.+Nam+viverra+euismod+odio,+gravida+pellentesque+urna+varius+vitae.</p>
++++++++++++</div>
++++++++</div>
++++++++

++++++++
++++++++<div+class="row">
++++++++++++<div+class="col-md-3+portfolio-item">
++++++++++++++++<a+href="#">
++++++++++++++++++++<img+class="img-responsive"+src="http://placehold.it/700x400"+alt="">
++++++++++++++++</a>
++++++++++++++++<h3>
++++++++++++++++++++<a+href="#">Project+Name</a>
++++++++++++++++</h3>
++++++++++++++++<p>Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit.+Nam+viverra+euismod+odio,+gravida+pellentesque+urna+varius+vitae.</p>
++++++++++++</div>
++++++++++++<div+class="col-md-3+portfolio-item">
++++++++++++++++<a+href="#">
++++++++++++++++++++<img+class="img-responsive"+src="http://placehold.it/700x400"+alt="">
++++++++++++++++</a>
++++++++++++++++<h3>
++++++++++++++++++++<a+href="#">Project+Name</a>
++++++++++++++++</h3>
++++++++++++++++<p>Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit.+Nam+viverra+euismod+odio,+gravida+pellentesque+urna+varius+vitae.</p>
++++++++++++</div>
++++++++++++<div+class="col-md-3+portfolio-item">
++++++++++++++++<a+href="#">
++++++++++++++++++++<img+class="img-responsive"+src="http://placehold.it/700x400"+alt="">
++++++++++++++++</a>
++++++++++++++++<h3>
++++++++++++++++++++<a+href="#">Project+Name</a>
++++++++++++++++</h3>
++++++++++++++++<p>Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit.+Nam+viverra+euismod+odio,+gravida+pellentesque+urna+varius+vitae.</p>
++++++++++++</div>
++++++++++++<div+class="col-md-3+portfolio-item">
++++++++++++++++<a+href="#">
++++++++++++++++++++<img+class="img-responsive"+src="http://placehold.it/700x400"+alt="">
++++++++++++++++</a>
++++++++++++++++<h3>
++++++++++++++++++++<a+href="#">Project+Name</a>
++++++++++++++++</h3>
++++++++++++++++<p>Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit.+Nam+viverra+euismod+odio,+gravida+pellentesque+urna+varius+vitae.</p>
++++++++++++</div>
++++++++</div>
++++++++

++++++++
++++++++<div+class="row">
++++++++++++<div+class="col-md-3+portfolio-item">
++++++++++++++++<a+href="#">
++++++++++++++++++++<img+class="img-responsive"+src="http://placehold.it/700x400"+alt="">
++++++++++++++++</a>
++++++++++++++++<h3>
++++++++++++++++++++<a+href="#">Project+Name</a>
++++++++++++++++</h3>
++++++++++++++++<p>Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit.+Nam+viverra+euismod+odio,+gravida+pellentesque+urna+varius+vitae.</p>
++++++++++++</div>
++++++++++++<div+class="col-md-3+portfolio-item">
++++++++++++++++<a+href="#">
++++++++++++++++++++<img+class="img-responsive"+src="http://placehold.it/700x400"+alt="">
++++++++++++++++</a>
++++++++++++++++<h3>
++++++++++++++++++++<a+href="#">Project+Name</a>
++++++++++++++++</h3>
++++++++++++++++<p>Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit.+Nam+viverra+euismod+odio,+gravida+pellentesque+urna+varius+vitae.</p>
++++++++++++</div>
++++++++++++<div+class="col-md-3+portfolio-item">
++++++++++++++++<a+href="#">
++++++++++++++++++++<img+class="img-responsive"+src="http://placehold.it/700x400"+alt="">
++++++++++++++++</a>
++++++++++++++++<h3>
++++++++++++++++++++<a+href="#">Project+Name</a>
++++++++++++++++</h3>
++++++++++++++++<p>Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit.+Nam+viverra+euismod+odio,+gravida+pellentesque+urna+varius+vitae.</p>
++++++++++++</div>
++++++++++++<div+class="col-md-3+portfolio-item">
++++++++++++++++<a+href="#">
++++++++++++++++++++<img+class="img-responsive"+src="http://placehold.it/700x400"+alt="">
++++++++++++++++</a>
++++++++++++++++<h3>
++++++++++++++++++++<a+href="#">Project+Name</a>
++++++++++++++++</h3>
++++++++++++++++<p>Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit.+Nam+viverra+euismod+odio,+gravida+pellentesque+urna+varius+vitae.</p>
++++++++++++</div>
++++++++</div>
++++++++

++++++++<hr>

++++++++
++++++++<div+class="row+text-center">
++++++++++++<div+class="col-lg-12">
++++++++++++++++<ul+class="pagination">
++++++++++++++++++++<li>
++++++++++++++++++++++++<a+href="#">&laquo;</a>
++++++++++++++++++++</li>
++++++++++++++++++++<li+class="active">
++++++++++++++++++++++++<a+href="#">1</a>
++++++++++++++++++++</li>
++++++++++++++++++++<li>
++++++++++++++++++++++++<a+href="#">2</a>
++++++++++++++++++++</li>
++++++++++++++++++++<li>
++++++++++++++++++++++++<a+href="#">3</a>
++++++++++++++++++++</li>
++++++++++++++++++++<li>
++++++++++++++++++++++++<a+href="#">4</a>
++++++++++++++++++++</li>
++++++++++++++++++++<li>
++++++++++++++++++++++++<a+href="#">5</a>
++++++++++++++++++++</li>
++++++++++++++++++++<li>
++++++++++++++++++++++++<a+href="#">&raquo;</a>
++++++++++++++++++++</li>
++++++++++++++++</ul>
++++++++++++</div>
++++++++</div>
++++++++
++++</div>
++++
++++<footer>
++++++++<div+class="container">
++++++++++++<div+class="row">
++++++++++++++++<div+class="col-lg-4+col-md-4+col-sm-4">
++++++++++++++++++++<h3>About</h3>
++++++++++++++++++++<ul>
++++++++++++++++++++++++<li>
++++++++++++++++++++++++++++<i+class="glyphicon+glyphicon-home"></i>+Your+company+address+here
++++++++++++++++++++++++</li>
++++++++++++++++++++++++<li>
++++++++++++++++++++++++++++<i+class="glyphicon+glyphicon-earphone"></i>+0982.808.065
++++++++++++++++++++++++</li>
++++++++++++++++++++++++<li>
++++++++++++++++++++++++++++<i+class="glyphicon+glyphicon-envelope"></i>+anhtuank7c@hotmail.com
++++++++++++++++++++++++</li>
++++++++++++++++++++++++<li>
++++++++++++++++++++++++++++<i+class="glyphicon+glyphicon-flag"></i>+<a+href="#">Fan+page</a>
++++++++++++++++++++++++</li>
++++++++++++++++++++++++<li>
++++++++++++++++++++++++++++<i+class="glyphicon+glyphicon-time"></i>+08:00-18:00+Monday+to+Friday
++++++++++++++++++++++++</li>
++++++++++++++++++++</ul>
++++++++++++++++</div>
++++++++++++++++<div+class="col-lg-4+col-md-4+col-sm-4">
++++++++++++++++++++<h3>Support</h3>
++++++++++++++++++++<ul>
++++++++++++++++++++++++<li>
++++++++++++++++++++++++++++<a+href="#"+class="link">Terms+of+Service</a>
++++++++++++++++++++++++</li>
++++++++++++++++++++++++<li>
++++++++++++++++++++++++++++<a+href="#"+class="link">Privacy+policy</a>
++++++++++++++++++++++++</li>
++++++++++++++++++++++++<li>
++++++++++++++++++++++++++++<a+href="#"+class="link">Warranty+commitment</a>
++++++++++++++++++++++++</li>
++++++++++++++++++++++++<li>
++++++++++++++++++++++++++++<a+href="#"+class="link">Site+map</a>
++++++++++++++++++++++++</li>
++++++++++++++++++++</ul>
++++++++++++++++</div>
++++++++++++++++<div+class="col-lg-4+col-md-4+col-sm-4">
++++++++++++++++++++<h3>Other</h3>
++++++++++++++++++++<p>Lorem+ipsum+dolor+sit+amet,+consectetur+adipisicing+elit,+sed+do+eiusmod
++++++++++++++++++++tempor+incididunt+ut+labore+et+dolore+magna+aliqua.+Ut+enim+ad+minim+veniam,
++++++++++++++++++++quis+nostrud+exercitation+ullamco+laboris+nisi+ut+aliquip+ex+ea+commodo
++++++++++++++++++++consequat.+Duis+aute+irure+dolor+in+reprehenderit+in+voluptate+velit+esse
++++++++++++++++++++cillum+dolore+eu+fugiat+nulla+pariatur.+Excepteur+sint+occaecat+cupidatat+non
++++++++++++++++++++proident,+sunt+in+culpa+qui+officia+deserunt+mollit+anim+id+est+laborum.</p>
++++++++++++++++</div>
++++++++++++</div>
++++++++</div>
++++++++
++++</footer>

++++

++++
++++<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

++++
++++<script+src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</body>

</html>|code-block|syntax|javascript|176809|176810|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|K|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|M|8|@]|9|@]|A|$]]]|I|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;

    &lt;meta charset="utf-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;meta name="description" content=""&gt;
    &lt;meta name="author" content=""&gt;

    &lt;title&gt;3 Col Portfolio - Start Bootstrap Template&lt;/title&gt;

    &lt;!-- Bootstrap Core CSS --&gt;
    &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/&gt;
    &lt;!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --&gt;
    &lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;
    &lt;!--[if lt IE 9]&gt;
        &lt;script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"&gt;&lt;/script&gt;
        &lt;script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"&gt;&lt;/script&gt;
    &lt;![endif]--&gt;

&lt;/head&gt;

&lt;body&gt;

    &lt;!-- Navigation --&gt;
    &lt;nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"&gt;
        &lt;div class="container"&gt;
            &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
            &lt;div class="navbar-header"&gt;
                &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
                    &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                    &lt;span class="icon-bar"&gt;&lt;/span&gt;
                    &lt;span class="icon-bar"&gt;&lt;/span&gt;
                    &lt;span class="icon-bar"&gt;&lt;/span&gt;
                &lt;/button&gt;
                &lt;a class="navbar-brand" href="#"&gt;Start Bootstrap&lt;/a&gt;
            &lt;/div&gt;
            &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
            &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
                &lt;ul class="nav navbar-nav"&gt;
                    &lt;li&gt;
                        &lt;a href="#"&gt;About&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href="#"&gt;Services&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href="#"&gt;Contact&lt;/a&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
                &lt;form class="navbar-form navbar-right"&gt;
                    &lt;div class="input-group"&gt;
                        &lt;input type="text" name="keyword" placeholder="search..." class="form-control"&gt;
                        &lt;span class="input-group-btn"&gt;
                            &lt;button class="btn btn-default"&gt;Go&lt;/button&gt;
                        &lt;/span&gt;
                    &lt;/div&gt;
                &lt;/form&gt;
            &lt;/div&gt;
            &lt;!-- /.navbar-collapse --&gt;
        &lt;/div&gt;
        &lt;!-- /.container --&gt;
    &lt;/nav&gt;

    &lt;!-- Page Content --&gt;
    &lt;div class="container"&gt;

        &lt;!-- Page Header --&gt;
        &lt;div class="row"&gt;
            &lt;div class="col-lg-12"&gt;
                &lt;h1 class="page-header"&gt;Page Heading
                    &lt;small&gt;Secondary Text&lt;/small&gt;
                &lt;/h1&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- /.row --&gt;

        &lt;!-- Projects Row --&gt;
        &lt;div class="row"&gt;
            &lt;div class="col-md-3 portfolio-item"&gt;
                &lt;a href="#"&gt;
                    &lt;img class="img-responsive" src="http://placehold.it/700x400" alt=""&gt;
                &lt;/a&gt;
                &lt;h3&gt;
                    &lt;a href="#"&gt;Project Name&lt;/a&gt;
                &lt;/h3&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="col-md-3 portfolio-item"&gt;
                &lt;a href="#"&gt;
                    &lt;img class="img-responsive" src="http://placehold.it/700x400" alt=""&gt;
                &lt;/a&gt;
                &lt;h3&gt;
                    &lt;a href="#"&gt;Project Name&lt;/a&gt;
                &lt;/h3&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="col-md-3 portfolio-item"&gt;
                &lt;a href="#"&gt;
                    &lt;img class="img-responsive" src="http://placehold.it/700x400" alt=""&gt;
                &lt;/a&gt;
                &lt;h3&gt;
                    &lt;a href="#"&gt;Project Name&lt;/a&gt;
                &lt;/h3&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="col-md-3 portfolio-item"&gt;
                &lt;a href="#"&gt;
                    &lt;img class="img-responsive" src="http://placehold.it/700x400" alt=""&gt;
                &lt;/a&gt;
                &lt;h3&gt;
                    &lt;a href="#"&gt;Project Name&lt;/a&gt;
                &lt;/h3&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- /.row --&gt;

        &lt;!-- Projects Row --&gt;
        &lt;div class="row"&gt;
            &lt;div class="col-md-3 portfolio-item"&gt;
                &lt;a href="#"&gt;
                    &lt;img class="img-responsive" src="http://placehold.it/700x400" alt=""&gt;
                &lt;/a&gt;
                &lt;h3&gt;
                    &lt;a href="#"&gt;Project Name&lt;/a&gt;
                &lt;/h3&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="col-md-3 portfolio-item"&gt;
                &lt;a href="#"&gt;
                    &lt;img class="img-responsive" src="http://placehold.it/700x400" alt=""&gt;
                &lt;/a&gt;
                &lt;h3&gt;
                    &lt;a href="#"&gt;Project Name&lt;/a&gt;
                &lt;/h3&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="col-md-3 portfolio-item"&gt;
                &lt;a href="#"&gt;
                    &lt;img class="img-responsive" src="http://placehold.it/700x400" alt=""&gt;
                &lt;/a&gt;
                &lt;h3&gt;
                    &lt;a href="#"&gt;Project Name&lt;/a&gt;
                &lt;/h3&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="col-md-3 portfolio-item"&gt;
                &lt;a href="#"&gt;
                    &lt;img class="img-responsive" src="http://placehold.it/700x400" alt=""&gt;
                &lt;/a&gt;
                &lt;h3&gt;
                    &lt;a href="#"&gt;Project Name&lt;/a&gt;
                &lt;/h3&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- /.row --&gt;

        &lt;!-- Projects Row --&gt;
        &lt;div class="row"&gt;
            &lt;div class="col-md-3 portfolio-item"&gt;
                &lt;a href="#"&gt;
                    &lt;img class="img-responsive" src="http://placehold.it/700x400" alt=""&gt;
                &lt;/a&gt;
                &lt;h3&gt;
                    &lt;a href="#"&gt;Project Name&lt;/a&gt;
                &lt;/h3&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="col-md-3 portfolio-item"&gt;
                &lt;a href="#"&gt;
                    &lt;img class="img-responsive" src="http://placehold.it/700x400" alt=""&gt;
                &lt;/a&gt;
                &lt;h3&gt;
                    &lt;a href="#"&gt;Project Name&lt;/a&gt;
                &lt;/h3&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="col-md-3 portfolio-item"&gt;
                &lt;a href="#"&gt;
                    &lt;img class="img-responsive" src="http://placehold.it/700x400" alt=""&gt;
                &lt;/a&gt;
                &lt;h3&gt;
                    &lt;a href="#"&gt;Project Name&lt;/a&gt;
                &lt;/h3&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="col-md-3 portfolio-item"&gt;
                &lt;a href="#"&gt;
                    &lt;img class="img-responsive" src="http://placehold.it/700x400" alt=""&gt;
                &lt;/a&gt;
                &lt;h3&gt;
                    &lt;a href="#"&gt;Project Name&lt;/a&gt;
                &lt;/h3&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- /.row --&gt;

        &lt;!-- Projects Row --&gt;
        &lt;div class="row"&gt;
            &lt;div class="col-md-3 portfolio-item"&gt;
                &lt;a href="#"&gt;
                    &lt;img class="img-responsive" src="http://placehold.it/700x400" alt=""&gt;
                &lt;/a&gt;
                &lt;h3&gt;
                    &lt;a href="#"&gt;Project Name&lt;/a&gt;
                &lt;/h3&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="col-md-3 portfolio-item"&gt;
                &lt;a href="#"&gt;
                    &lt;img class="img-responsive" src="http://placehold.it/700x400" alt=""&gt;
                &lt;/a&gt;
                &lt;h3&gt;
                    &lt;a href="#"&gt;Project Name&lt;/a&gt;
                &lt;/h3&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="col-md-3 portfolio-item"&gt;
                &lt;a href="#"&gt;
                    &lt;img class="img-responsive" src="http://placehold.it/700x400" alt=""&gt;
                &lt;/a&gt;
                &lt;h3&gt;
                    &lt;a href="#"&gt;Project Name&lt;/a&gt;
                &lt;/h3&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="col-md-3 portfolio-item"&gt;
                &lt;a href="#"&gt;
                    &lt;img class="img-responsive" src="http://placehold.it/700x400" alt=""&gt;
                &lt;/a&gt;
                &lt;h3&gt;
                    &lt;a href="#"&gt;Project Name&lt;/a&gt;
                &lt;/h3&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- /.row --&gt;

        &lt;hr&gt;

        &lt;!-- Pagination --&gt;
        &lt;div class="row text-center"&gt;
            &lt;div class="col-lg-12"&gt;
                &lt;ul class="pagination"&gt;
                    &lt;li&gt;
                        &lt;a href="#"&gt;&amp;laquo;&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li class="active"&gt;
                        &lt;a href="#"&gt;1&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href="#"&gt;2&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href="#"&gt;3&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href="#"&gt;4&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href="#"&gt;5&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href="#"&gt;&amp;raquo;&lt;/a&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- /.row --&gt;
    &lt;/div&gt;
    &lt;!-- Footer --&gt;
    &lt;footer&gt;
        &lt;div class="container"&gt;
            &lt;div class="row"&gt;
                &lt;div class="col-lg-4 col-md-4 col-sm-4"&gt;
                    &lt;h3&gt;About&lt;/h3&gt;
                    &lt;ul&gt;
                        &lt;li&gt;
                            &lt;i class="glyphicon glyphicon-home"&gt;&lt;/i&gt; Your company address here
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;i class="glyphicon glyphicon-earphone"&gt;&lt;/i&gt; 0982.808.065
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;i class="glyphicon glyphicon-envelope"&gt;&lt;/i&gt; anhtuank7c@hotmail.com
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;i class="glyphicon glyphicon-flag"&gt;&lt;/i&gt; &lt;a href="#"&gt;Fan page&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;i class="glyphicon glyphicon-time"&gt;&lt;/i&gt; 08:00-18:00 Monday to Friday
                        &lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/div&gt;
                &lt;div class="col-lg-4 col-md-4 col-sm-4"&gt;
                    &lt;h3&gt;Support&lt;/h3&gt;
                    &lt;ul&gt;
                        &lt;li&gt;
                            &lt;a href="#" class="link"&gt;Terms of Service&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href="#" class="link"&gt;Privacy policy&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href="#" class="link"&gt;Warranty commitment&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href="#" class="link"&gt;Site map&lt;/a&gt;
                        &lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/div&gt;
                &lt;div class="col-lg-4 col-md-4 col-sm-4"&gt;
                    &lt;h3&gt;Other&lt;/h3&gt;
                    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- /.row --&gt;
    &lt;/footer&gt;

    &lt;!-- /.container --&gt;

    &lt;!-- jQuery --&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

    &lt;!-- Bootstrap Core JavaScript --&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;

&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>


<p>I am using the new Twitter Bootstrap 3, and am trying to place a search box like this (below) <strong>in the top navbar</strong>:</p>

<p><img src="https://i.stack.imgur.com/OXBL1.png" alt="Navbar Search"></p>

<p>In Bootstrap 2, it could've ben done like this:</p>

<pre><code>&lt;form class="form-search" method="get" id="s" action="/"&gt;
    &lt;div class="input-append"&gt;
        &lt;input type="text" class="input-medium search-query" name="s" placeholder="Search" value=""&gt;
        &lt;button type="submit" class="add-on"&gt;&lt;i class="icon-search"&gt;&lt;/i&gt;&lt;/button&gt;
    &lt;/div&gt;
&lt;/form&gt;
</code></pre>

<p>But I am not sure how to produce the same in Bootstrap 3 as so much has changed.</p>

<p>The default HTML for the navbar search box form in Bootstrap 3 is:</p>

<pre><code>&lt;form class="navbar-form navbar-left" role="search"&gt;
    &lt;div class="form-group"&gt;
        &lt;input type="text" class="form-control" placeholder="Search"&gt;
    &lt;/div&gt;
    &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
&lt;/form&gt;
</code></pre>

<p>How do I modify it to achieve what I need?</p>


How to add a search box with icon to the navbar in Bootstrap 3?

jQuery

HTML5

我正在使用新的Twitter Bootstrap 3，并试图在顶部导航栏中放置一个像这样的搜索框(如下所示)​​在Bootstrap 2中，可以这样做：<form class="form-search" method="get" id="s" action="/">    <div class="input-appen...

问如何在Bootstrap 3中添加带图标的搜索框到导航栏？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Bootstrap 3中添加带图标的搜索框到导航栏？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Bootstrap 3中添加带图标的搜索框到导航栏？
EN