Читать «Bootstrap: Быстрое создание современных сайтов» онлайн - страница 6

<button type=«button» class=«navbar-toggle» data-toggle=«collapse» data-target=«#myNavbar»>

<span class=«icon-bar»> </span>

<span class=«icon-bar»> </span>

<span class=«icon-bar»> </span>

</button>

</div>

<div class=«collapse navbar-collapse» id=«myNavbar»>

<ul class=«nav navbar-nav»>

<li> <a href="/"> Home </a> </li>

<li class=«dropdown»>

<a class=«dropdown-toggle» data-toggle=«dropdown» href=«#»> Page1 <span class=«caret»> </span> </a>

<ul class=«dropdown-menu inverse-dropdown»>

<li> <a href=«#»> Page1—1 </a> </li>

</ul>

</li>

<li class=«dropdown»>

<a class=«dropdown-toggle» data-toggle=«dropdown» href=«#»> Page2 <span class=«caret»> </span> </a>

<ul class=«dropdown-menu inverse-dropdown»>

<li> <a href=«#»> Page2—1 </a> </li>

<li> <a href=«#»> Page2—2 </a> </li>

<li> <a href=«#»> Page2—3 </a> </li>

<li> <a href=«#»> Page2—4 </a> </li>

<li> <a href=«#»> Page2—5 </a> </li>

</ul>

</li>

<li> <a href=«#»> Contacts </a> </li>

</ul>

</div>

</div>

</nav>

</div>

<a name=«top»> </a>

<div class=«row»>

<div class=«col-sm-6 text-center»>

<h1> <a href="/"> </a> </h1>

<p> </p>

</div>

<div class=«col-sm-4 pull-right»>

<script>

(function () {

var cx = «»;

var gcse = document.createElement (’script’);

gcse. type = ’text/javascript’;

gcse.async = true;

gcse.src = (document.location.protocol == ’https:'? ’https:': ’http:») +

'//cse.google.com/cse. js? cx=' + cx;

var s = document.getElementsByTagName (’script’) [0];

s.parentNode.insertBefore (gcse, s);

}) ();

</script>

<gcse: searchbox-only> </gcse: searchbox-only>

</div>

<style>

.gsc-search-button {

display: none;

}

.gsib_a {

height:40px;

}

.gsc-input-box {

height: 40px;

}

</style>

<div style=«height:15px; background: black;" class=«col-sm-12»>

</div>

</div>

</div>

Уберем боковую панель и свой файл CSS, вместо него добавим CSS стили:

<style>

body {

font-size:18px;

font-famile: Georgia;

color: #000;

margin: 0;

padding: 0;

background: gray;

}

.header {

/* Permalink – use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e1ffff+0,e1ffff+4,fdffff+7,fdffff+7,e1ffff+17,e6f8fd+28,c8eefb+47,bee4f8+68,b1d8f5+100 */

background: #e1ffff; /* Old browsers */

background: -moz-linear-gradient (top, #e1ffff 0%, #e1ffff 4%, #fdffff 7%, #fdffff 7%, #e1ffff 17%, #e6f8fd 28%, #c8eefb 47%, #bee4f8 68%, #b1d8f5 100%); /* FF3.6—15 */

background: -webkit-linear-gradient (top, #e1ffff 0%,#e1ffff 4%,#fdffff 7%,#fdffff 7%,#e1ffff 17%,#e6f8fd 28%,#c8eefb 47%,#bee4f8 68%,#b1d8f5 100%); /* Chrome10—25,Safari5.1—6 */

background: linear-gradient (to bottom, #e1ffff 0%,#e1ffff 4%,#fdffff 7%,#fdffff 7%,#e1ffff 17%,#e6f8fd 28%,#c8eefb 47%,#bee4f8 68%,#b1d8f5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */