» Делаем свой сайт на бутстрап

Делаем свой сайт на бутстрап

2 600

Бутстрап 3

После изучения Основ по html и css переходим ко второму уроку и будем делать адаптивный (резиновый) сайт с применением готового набора инструментов - фреймворка Бутстрап.

Я объясню, как использовать Бутстрап для своего сайта, для чего он вообще нужен и какой функционал он располагает в себе.

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

Для того, чтобы сделать свой сайт на Бутстрап, достаточно прописать готовые стилевые файлы и ява скрипты, и ваш сайт будет не только адаптивным, но и готовым к показу всех основных элементов применяющихся на страницах: меню, галерея, видео и аудио, списки и переключатели, таблицы, и многое другое.

Полное руководство и описание фреймворка Бутстрап вы можете найти в интернете, - этой информации куда предостаточно.

Как сделать сайт на бутстрап

Скачайте сначала архив с готовыми файлами (ссылка в самом низу), где для Бутстрап прописан весь код.

Описание файлов из архива
  • Папка CSS
  • Файл fonts.css - стилевые значения для отображения иконок на сайте (весь список иконок);
  • Файл main.css - здесь вы прописываете свои стилевые значения (они имеют приоритет);
  • Файл media.css - здесь приписываются стилевые значения непосредственно под каждое разрешение экрана (по необходимости);
  • Папка FONTS - необходимые шрифты;
  • Папка LIBS - необходимые файлы Бутстрап (css и java);

В Бутстрап окно браузера разделено на 12 частей и вы по своему усмотрению распределяете сами колонки на странице по их количеству и размеру не выходя за рамки сетки из 12 частей.

Откройте файл index.html в текстовом редакторе и в браузере.

Шаблон 2-ух колоночного сайта на бутстрап

В текстовом редакторе найдите код для 2-ух колоночного сайта:

Код html
<h1 class="saytes">2-ух колоночный сайт</h1>
<div class="container-fluid"><!-- container-fluid  -->
<div class="row"><!-- row  -->
<div class="col-lg-9 col-md-9">
<h1>Главная страница</h1>
<img class="img-responsive img-left" alt="Свинья" src="images/svinya.jpg">
<p>Текстовое описание страницы ...</p>
</div>
<div class="col-lg-3 col-md-3">
<h3>Правый сайтбар</h3>
<p>Информация в правом сайтбаре.</p>
</div>
</div><!-- Конец row  -->
</div><!-- Конец container-fluid  -->

Вот это и есть шаблон 2-ух колоночного сайта на Бутстрап.

И теперь всё по порядку...

Прописанные все блоки DIV со своими CLASS - обязательны!

Для главного блока с контентом я прописал class="col-lg-9 col-md-9", а для левой колонки class="col-lg-3 col-md-3"

Цифра 9 - обозначает, что я взял для этого блока 9 частей из 12, а для сайтбара 3 оставшиеся части, что в сумме и получается 12 частей (сетка). Каждый из вас будет прописывать свои цифры, например: 8 и 4, 7 и 5, 6 и 6, 10 и 2.

Стоит нам поменять местами блоки с class="col-lg- ...", как левая колонка у нас будет отображаться уже в левой части страницы.

Поясню, что такое в классе col-...

Описание класса
  • col-lg - указывается для больших устройств с разрешением от и больше 1200px (компьютер);
  • col-md - указывается для средних устройств с разрешением от и больше 992px (ноутбук);
  • col-sm - указывается для малых устройств с разрешением от и больше 750px (планшет);
  • col-xs - указывается для очень малых устройств с маленьким разрешением (телефоны).

Как вы успели заметить, у меня для блоков прописаны только col-lg и col-md, - это говорит о том, что для больших и средних устройств эти блоки будут расположены по сетке (как я прописал 9 и 3), а для планшетов и телефонов они автоматически будут идти друг за другом по вертикали, то есть для них автоматом прописывается класс col-sm-12 col-xs-12, который использует все 12 частей по сетке. Так необходимо делать, чтобы пользователям на подобных устройствах с маленьким разрешением экрана было удобно просматривать ваш сайт.

И последнее, что вам нужно сделать, это вставить между
<div class="col-lg-9 col-md-9">...</div> и <div class="col-lg-3 col-md-3">...</div>
свои блоки с текстом и картинками, и после сделать для них красивое стилевое оформление.

Внимательно!
Обратите своё внимание на Заголовки и картинки в исходном состояние окна браузера и в уменьшенном виде (для планшетов и телефонов), - они уменьшаются в размерах. Для этого я использовал как раз тот файл media.css (описание в самом верху), в котором указал для определённого разрешения нужные размеры этих элементов. Откройте этот файл и посмотрите сами.

Шаблон 3-ёх колоночного сайта на бутстрап

Я уже уверен, что вы сами догадались, как сделать на Бутстрап 3 колонки и более.

Используя ту же сетку из 12 частей мы можем создать до 12-колонок на своей странице, где каждая колонка будет занимать соответственно 1 часть.

Для того, чтобы сделать 3-ёх колоночный сайт на бутстрап, необходимо прописать дополнительный блок с class="col-lg-.....".

И код для 3-ёх колоночного сайта будет выглядеть так:

Код html
<h1 class="saytes">3-ёх колоночный сайт</h1>
<div class="container-fluid"><!-- container-fluid  -->
<div class="row"><!-- row  -->
<!-- Левая колонка  -->
<div class="col-lg-3 col-md-3">
<h3>Левый сайтбар</h3>
<p>Информация в левом сайтбаре.</p>
</div>
<!-- Центральная колонка  -->
<div class="col-lg-6 col-md-6">
<h1>Главная страница</h1>
<p>Текстовое описание страницы ...</p>
</div>
<!-- Правая колонка  -->
<div class="col-lg-3 col-md-3">
<h3>Правый сайтбар</h3>
<p>Информация в правом сайтбаре.</p>
</div>
</div><!-- Конец row  -->
</div><!-- Конец container-fluid  -->

Здесь так же размеры колонок по частям каждый сделает под себя, не выходя разумеется из общей суммы частей (12).

Запомните!
Вам абсолютно ничего не нужно искать для отображения на сайте любых элементов: кнопки, меню, галерея и прочее. В Бутстрап всё уже прописано, и вам остаётся только прописать нужный код для отображения того или иного фрагмента на странице и после оформить под свой дизайн в стилевом файле.

В следующей статье мы рассмотрим, как сделать горизонтальное и вертикальное меню на Бутстрап.

Скачать готовый сайт на Бутстрап

Ссылка на файл: bootstrap.zip 31

Похожие новости

Ирина
  • 0
User: ИринаЗдравствуйте!
Я только начала изучение сайтостроение, и здесь всё понятно, только есть один вопрос?
У вас на сайте код для 3-ёх колоночного сайта на Бутстрап предоставлен один, а в архиве он немного другой, то есть там (в архиве) есть дополнения к классам: col-lg-push и col-lg-pull, и это я уверена не опечатка.
Так какой же правильно прописывать код?
  • 21 марта 2017 09:52
Админ
  • 0
User: Admin→ Ирина
Ирина, привет!
Оба варианта технически правильные и будут отлично работать.
Только для Вас (в архиве), дополнив имя к классу, я сделал более грамотно в плане SEO оптимизации для поисковых роботов.
С помощью push и pull (это предусмотрено в Бутстрап) я смещаю колонки: левый сайтбар и центральный контент таким образом, что в браузере они отображаются как нужно, а вот для поисковиков центральный контент идёт первым (как должно быть).
Откройте оба варианта в браузере и посмотрите внимательно их исходный код и вы сами всё увидите.
  • 21 марта 2017 10:26