Bootstrap: Быстрое создание современных сайтов

Тимур Машнин

Bootstrap представляет собой свободный фреймворк интерфейсов для быстрой и простой Web-разработки. Bootstrap предоставляет шаблоны дизайна, основанные на HTML и CSS, для разметки, форм, кнопок, таблиц, навигации, диалоговых окон, каруселей изображений и многого другого, а также дополнительные плагины JavaScript. На основе Bootstrap можно легко создавать сайты с «отзывчивым дизайном», одинаково хорошо выглядящие на всех типах устройств, от небольших телефонов до настольных компьютеров.

Начало работы с Bootstrap
Bootstrap Grid System
Тест 1 на знание Bootstrap
Быстрая адаптация сайта для мобильных устройств с помощью Bootstrap
Bootstrap Text/Typography
Таблицы
Изображения
Bootstrap Jumbotron
Bootstrap Page Header
Bootstrap Wells
Bootstrap Alerts
Кнопки и группы кнопок
Bootstrap Glyphicons
Значки и метки
Bootstrap Progress Bars

* * *

Приведённый ознакомительный фрагмент книги Bootstrap: Быстрое создание современных сайтов предоставлен нашим книжным партнёром — компанией ЛитРес.

Купить и скачать полную версию книги в форматах FB2, ePub, MOBI, TXT, HTML, RTF и других

← Тест 1 на знание Bootstrap

Bootstrap Text/Typography →

Быстрая адаптация сайта для мобильных устройств с помощью Bootstrap

Возьмем в качестве примера простой шаблон с фиксированной шириной, с меню, боковой панелью, контентом и подвалом.

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN»"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

</head>

<body>

<! — header — >

<ul>

</ul>

</li>

</ul>

</li>

</ul>

</div>

(function () {

var cx = «»;

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

gcse. type = ’text/javascript’;

gcse.async = true;

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

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

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

s.parentNode.insertBefore (gcse, s);

}) ();

</script>

<gcse: search> </gcse: search>

</div>

<! — content-outer — >

</div>

</div>

<! — sidebar — >

<ul>

</ul>

</li>

</ul>

</li>

</ul>

</div>

<! — /sidebar — > </div>

</div>

<! — /content-out — >

</div>

<! — footer-outer — >

</p>

</div>

<! — /footer-outer — >

</div>

</body>

</html>

Заменим DOCTYPE на <!DOCTYPE html>.

Атрибут lang в теге html и атрибут charset тега meta уже имеются.

В начало тега <head> добавим:

<! — Latest compiled and minified CSS — >

<! — jQuery library — >

<! — Latest compiled JavaScript — >

В тег <head> добавим:

Обернем заголовок в класс. container и, используя Bootstrap Grid System и Bootstrap Navigation Bar, разместим меню, логотип и форму поиска в шапке.

</button>

</div>

</ul>

</li>

</ul>

</li>

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

</ul>

</div>

</nav>

</div>

</div>

(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>

Уберем боковую панель и свой файл 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+ */

filter: progid:DXImageTransform.Microsoft.gradient (startColorstr=«#e1ffff’, endColorstr=«#b1d8f5», GradientType=0); /* IE6—9 */

}

.inverse-dropdown {

background-color: black;

}

.inverse-dropdown li a {

color: white;

}

.inverse-dropdown li a: hover {

color: black;

}

.content {

background: lightgrey;

}

.footer {

/* Permalink — use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,2989d8+86,207cca+93,7db9e8+100 */

background: #1e5799; /* Old browsers */

background: — moz-radial-gradient (center, ellipse cover, #1e5799 0%, #2989d8 86%, #207cca 93%, #7db9e8 100%); /* FF3.6—15 */

background: — webkit-radial-gradient (center, ellipse cover, #1e5799 0%,#2989d8 86%,#207cca 93%,#7db9e8 100%); /* Chrome10—25,Safari5.1—6 */

background: radial-gradient (ellipse at center, #1e5799 0%,#2989d8 86%,#207cca 93%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient (startColorstr=«#1e5799», endColorstr=«#7db9e8», GradientType=1); /* IE6—9 fallback on horizontal gradient */

}

.navigation {

margin: 10px 20px; padding-bottom: 10px;

width: 560px;

}

.navigation a: link,

.navigation a: visited {

float: left;

display: block;

margin: 10px 10px 0 0;

padding: 5px 7px;

text-transform: lowercase;

text-decoration: none;

font-weight: bold;

color: #fff;

background: #2C76A6;

border-width: 1px;

border-style: solid;

border-color: #86BBDF #245F86 #245F86 #86BBDF;

}

.navigation a: hover {

background: #FF3399;

border-width: 1px;

border-style: solid;

border-color: #FF75BA #EA0075 #EA0075 #FF75BA;

}

</style>

Таким образом, исключим из шаблона все фоновые изображения, которые могут создавать горизонтальную прокрутку, заменим фоновые изображения на CSS градиенты.

Обернем контент и подвал в класс. container и используем Bootstrap Grid System.

<! — content-outer — >

</span>

<! — adds — >

</script>

</div>

<! — content — >

<p>

</p>

</div>

<! — /content-out — >

<! — footer-outer — >