Начиная с этой статьи, мы начнем изучение фреймворка Twetter Bootstrap 3, наиболее часто используемого для создания сайтов, админ панелей, лендингов и веб приложений, так как он обеспечивает простоту в разработке, понятную структура и адаптивность страниц.

Установка базового шаблона Bootstrap 3

Для использования средств и методов Bootstrap 3 необходимо перейти по адресу http://getbootstrap.com и скачать архив с папаками css, fonts, js и с соответствующими файлами внутри них.

Если вы не знаете как подключить стили CSS и js скрипты, рекомендую посмотреть эту и эту статью, а в нашем случае стили CSS подключаются в секции

<link href="/css/bootstrap.css" rel="stylesheet">
<link href="/css/bootstrap-theme.css" rel="stylesheet">

а скрипты перед закрывающим тегом

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok
в низу страницы.

<scriрt type="text/javascript" src="/js/bootstrap.js"></script>    

Файлы стилей и скрипты рекомендуется разместить в соответствующие папки вашего шаблона или сайта.

Также хочется отметить, что использование файлов bootstrap.min.css и bootstrap.min.js принесет пользу вашему сайту, так как эти файлы имеют меньший размер и положительно скажется на скорости загрузки.

Подключение fonts шрифтов можно выполнить двумя способами:

  1. Напрямую в секции HEAD перед закрывающим тегом
  2. В отдельном CSS файле, находящемся в папке css

Второй вариант предпочтительней, но какой бы способ вы не выбрали, подключение будет происходить так

<style>
@font-face{
font-family: glyphicons-halflings-regular;
src: url(/fonts/glyphicons-halflings-regular.eot);
src: local(glyphicons-halflings-regular), url(fonts/glyphicons-halflings-regular.ttf);
}
h2{
font-family: glyphicons-halflings-regular,sans-serif;
}
</style>

вернее в теге style для первого способа, а весь текст внутри него вставляем в файл css - для второго.

Установка jquery

Для номальной работы Bootstrap 3 понадобится дополнительно скачать с официального сайта jquery.com файл библиотеки jquery по ссылке и поместить в папку js вашего сайта.

Подключение jquery происходит перед закрывающим тегом

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok
, но перед файлом bootstrap.js

<scriрt type="text/javascript" src="/js/jquery-3.2.1.js"></script>    
<scriрt type="text/javascript" src="/js/bootstrap.js"></script>    

так как jquery должен загружаться раньше, чем bootstrap.

Сетка Bootstrap 3 и размеры экранов

Основой Bootstrap является набор классов, на которых строится 12-ти колоночная сетка (col-) . В переделах сетки поддерживаются 5 типов экранов -xs- -sm- -md- -lg- -xl-.

  • -xs- размер экрана менее 575px;
  • -sm- размер экрана более 576px и не более 767 px;
  • -md- размер экрана более 768px и не более 991 px;
  • -lg- размер экрана более 992px и не более 1199 px;
  • -xl- размер экрана более 1200px;
 

Таким образом, div с классом col-lg-12 означает, что на экране с большим размером div колонка будет занимать 12 столбцов или 100% по ширине, аналогично div col-sm-6 на экране смартфона займет 6 столбцов или 50% по ширине.

Типы контейнеров для сетки. Резиновый макет верстки

Основными типами контейнеров для сетки являются классы container и container-fluid.

При использовании внутри container ваша сетка визуально будет занимать треть экрана по центру, все 12 столбцов будут расположены в этой области.

<div class="container"></div>

скачать пример 1   demo 1

Поместив сетку в класс container-fluid все элементы верстки будут расположены по всему экрану, как резиновый и при уменьшении по ширине будут сдвигаться друг к другу.

<div class="container-fluid"></div>

скачать пример 2   demo 2

Какой то конкретной рекомендации по использованию container и container-fluid нет, так как все зависит от макета дизийна и назначения верстки, впрочем, для админ панели сайта уместно применять container-fluid, а для сайта container.

Кроме того, класс -fluid можно применить не только к классу container, но и к строке row, для расположения элементов в ряд. Однако если вы поместите row-fluid в обычный container, то разницы не заметите. Подобную комбинацию лучше всего использовать вне div.container, например так:

<div class="container">
	<div class="row">	
		<div class="tit">
		<h1>Привет, я шаблон Bootstrap 3</h1>
		<p>Мой контейнер не fluid!</p>
		</div>
	</div>
</div>

<div class="row-fluid">	
		<div class="tit">
		
		<h2>А я row-fluid!</h2>
	</div>
</div>

скачать пример 3   demo 3

Строки для помещения элементов

Класс row служит для помещения элементов сетки в один ряд, это позволяет расположить их горизонтально, но нужно учитывать, что сумма индексов в ряде не должна быть больше 12, иначе произойдет смещение последнего элемента на вторую строку.

<div class="container">
 <div class="row">
  <div class="col-lg-4">
    <h2>Заголовок 1</h2></div>
   <div class="col-lg-4">
    <h2>Заголовок 2</h2></div>
   <div class="col-lg-4">
    <h2>Заголовок 3</h2>
  </div>
 </div>
</div>

Если уменьшать размер страницы браузера, заголовки выстроятся в вертикальный список из горизонтальной строки.

скачать пример 4   demo 4

Классы видимости элементов

В системе верстки Bootstrap 3 предусмотрены дополнительные классы для отображения или скрытия элементов на различных устройствах и экранах. Обозначаются они как visible-*-* и hidden-*.

Класс для отображения visible-*-* после первого тире обычно идет идентификатор типа экрана (xs,sm,md,lg,xl), а после второго тире размер столбца(1-12). Например, visible-lg-6 - элемент виден на большом экране, ширина 6 столбцов.

Класс для скрытия hidden-* после тире идет идентификатор типа экрана (xs,sm,md,lg,xl), например, элемент разметки с классом hidden-xs не будет виден на маленьких устройствах(размер экрана менее 575px).

Комбинирование этих элементов позволит отображать или скрывать div контейнеры:

<div class="container">
 <div class="row">
  <div class="col-lg-4 visible-lg-12">
	 <h2>Заголовок 1</h2>
  </div>
  <div class="col-lg-4 hidden-xs">
	<h2>Заголовок 2</h2></div>
  </div>
</div>

Первый заголовок будет виден на больших устройствах, а второй будет исчезать на маленьких экранах. Для этого уменьшите окно браузера, что бы размер стал похож по ширине на экран мобильного устройства.

скачать пример 5   demo 5

Так же в div контейнере в class указать show или hidden, но в этом случае свойства отображения не будут меняться при смене экрана: если виден, то виден, если скрыть, то только удаление слова hidden из класс позволит увидеть нужный элемент.

Медиа запросы в Bootstrap 3

Для того, чтобы использовать CSS медиа запросы, в css файле нужно указать специальных символ @media и в скобочках минимальную или/и максимальную ширину экрана. Если в обычной css разметке необходимо писать размеры экрана в пикселях, в bootstrap 3 можно писать такую конструкцию:

@media(min-width: @screen-sm-min){
...
}

@media(min-width: @screen-md-min){
...
}

@media(min-width: @screen-lg-min){
...
}

Смещение порядка положения элементов

Еще один интересные классы, позволяющие выполнять смещение блоков внутри контейнера, класс push сдвинет элемент вправо, а класс pull влево.

При комбинации из в соседних контейнерах, можно менять порядок последних при изменении размеров экрана. В данном примере на большом экране(-lg-) Заголовок 2 расположен слева, а Заголовок 1 справа, при уменьшении ширины экрана до средних размеров(-md-) произойдет смещение элементов и порядок станет последовательным.

<div class="container">
 <div class="row">	
  <div class="col-lg-6 col-md-6 col-md-push-6">
   <h2>Заголовок 1</h2>
  </div>
  
  <div class="col-lg-6 col-md-6 col-md-pull-6">
   <h2>Заголовок 2</h2>
  </div>
 </div>
</div>

скачать пример 6   demo 6

На этом первое знакомство с системой верстки Bootstrap 3 позвольте завершить, вы узнали как установить стили и скрипты шаблона, основные элементы сетки, медиа запросов, типы контейнеров, и т.д. В следующих статьях рассмотрим вспомогательные и дополнительные элементы: меню, кнопки, слайдеры, иконки и многое другое.




Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok