От автора: приветствую вас, коллега. В прошлых статьях мы рассмотрели подключение фреймворка к сайту, но вам, несомненно, хочется побыстрее начать практиковаться. Поэтому сегодня мы рассмотрим несколько примеров, а поможет нам в этом документация. В общем, посмотрим, как использовать Bootstrap.
В принципе, вы должны знать, что у фреймворка Bootstrap очень хорошая документация. Практически, вам остается только читать ее и брать из нее нужные фрагменты кода. На сайте getbootstrap.com документация представлена на английском языке, если вам нужна на русском, то перейдите в раздел Getting Started, спуститесь вниз и найдите там русский перевод. Я говорил об этом уже не раз, но решил еще разок упомянуть в этой статье, вдруг вы не знали.
На русскоязычном сайте нажмите в главном меню на вкладку Компоненты. Сразу же видим на ней описание доступных иконок, которые можно использовать.
Это более 200 иконок, которые вы можете использовать абсолютно бесплатно. Сейчас мы как раз узнаем, как можно их использовать. Справа в документации нас ожидает очень понятное меню, с подпунктами для каждого компонента:
Во вкладке “Примеры” вы и можете взять код, а также увидеть результат. Давайте я прямо сейчас возьму 1 пример из документации и на его примере объясню вам, как все работает:
|
1 2 3 |
<button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-star"></span> Star </button> |
Это вдвойне хороший пример, потому что тут используется не только иконка, но и кнопка. Итак, внутри кнопки помещаем иконку, вот такой результат получился:
Чтобы вставить иконку на веб-страницу, используйте тег span, ему нужно задать 2 класса. Первый – это общий стилевой класс glyphicon, который задает общие стили для всех иконок. Второй класс – glyphicon-название-иконки. Название вы можете посмотреть в документации.
Давайте на основе этого примера сделаем свою кнопку, кнопку скачивания файлов. Внимательно посмотрите, чем будет отличаться этот код:
|
1 2 3 |
<button type="button" class="btn btn-info btn-md"> <span class="glyphicon glyphicon-download"></span> Скачать </button> |
Во-первых, поменялось имя иконки. Во-вторых, цвет кнопки. В-третьих, ее размер, он стал немного меньше. Заметьте, что вместо btn-default я прописал в данном случае класс btn-info, а вместо btn-lg – btn-md. Вот такая милая кнопка получилась в итоге:
Дело в том, что в фреймворк изначально заложены некоторые цвета и размеры элементов. С иконками мы уже рассмотрели пример, давайте рассмотрим, как формируются кнопки. Вы можете с помощью заранее прописанных классов быстро изменить нужные параметры.
Для формирования кнопки, нужен класс btn. Это общий класс, как вы уже поняли. Все остальные классы добавляются по желанию. Например, btn-success красит кнопку в зеленый цвет, info – в голубой, danger – в красный. Давайте изменим в коде название класса на danger:
То есть вот так это все работает. Соответственно, помимо этих классов есть другие, отвечающие за размер кнопки. Это классы btn-lg –md –sm –xs. Вот так меняются размеры кнопок в зависимости от класса:
Естественно, lg (large) это самый большой размер, а xs – самый маленький. Опять же, все эти примеры есть в документации.
Давайте рассмотрим еще пару примеров. Например, как сделать всплывающее меню. В документации все очень хорошо описано. Перейдите в пункт Выпадающие меню – всплывающее. Опять же, вы можете просто скопировать код и изменить его под свои нужды:
Например, я изменил его следующим образом:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="btn-group dropdown"> <button type="button" class="btn btn-info">Выберите ссылку</button> <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" role="menu"> <li><a href = "#">Ссылка 1</a></li> <li><a href = "#">Ссылка 2</a></li> <li><a href = "#">Ссылка 3</a></li> </ul> </div> |
Класс dropdown у главного контейнера для такого меню отвечает за то, в каком направлении будет раскрываться меню – вверх или вниз. В примере из документации оно раскрывается вверх, потому что там указан класс dropup. Мы же в нашем примере изменили всего несколько букв в названии класса и уже изменили направление раскрытия.
Плюс использования фреймворка в том, что он позволяет вам очень просто реализовать те вещи, которые с нуля пришлось бы делать гораздо дольше, особенно новичку.
Ну и давайте рассмотрим последний пример, после чего я покажу вам, как изменять внешний вид элементов. Например, посмотрим, как сделать хлебные крошки. Это совсем просто. Находим в документации соответствующий пункт. К слову, он называется Навигационные цепочки. Смотрим пример кода, который предлагают нам разработчики, копируем себе и переделываем.
|
1 2 3 4 5 |
<ol class="breadcrumb"> <li><a href="#">Главная</a></li> <li><a href="#">Bootstrap</a></li> <li class="active">Как работать с фреймворком</li> </ol> |
Как видите, тут ничего сложного. Всего лишь нумерованный список, которому нужно задать класс breadcumb. Далее просто перечисляем наши пункты, активному нужно задать дополнительный класс active, чтобы он отличался по стилевому оформлению.
Как изменить внешний вид элементов?
Самый простой способ – создать отдельный css-файл, в котором вы будете писать все, что непосредственно касается внешнего вида ваших элементов. Например, возьмем те же самые хлебные крошки, которые мы сделали. Допустим, нам нужно по дизайну изменить фоновый цвет всего блока, а также цвет самого текста.
Соответственно, я создал отдельный css-файл, также подключил его к веб-странице и прописал в нем некоторые стили:
|
1 2 3 4 5 6 7 |
.custom{ background: #182E49; } .custom li a{ color: #fff; font-weight: bold; } |
Остается добавить класс custom нашим хлебным крошкам:
|
1 |
<ol class="breadcrumb custom"> |
Вот они, хлебные крошки, которые стилизовали мы, но создал нам Bootstrap, поэтому мы экономим немало времени, так как css-код не нужно писать полностью с нуля.
Соответственно, вот так я вам и рекомендую пройтись по документации, поэкспериментировать с разными кусками кода, попробовать применить к элементам свое собственное оформление и т.д.
Я приведу вам еще один пример, чтобы вы уже наверняка понимали, как использовать свои собственные стили для элементов bootstrap. Допустим, вам нужно сделать градиентную кнопку. Естественно, по умолчанию bootstrap такую вам не нарисует, вам самим нужно прописать этот градиент. Мы созданм кнопку штатными средствами bootstrap, прописывая ей класс btn, ну также можно указать размер. При этом дописываем свой собственный класс:
|
1 |
<button class = "btn custom-btn btn-lg">Кнопка</button> |
В этой случае наш класс – это custom-btn, такого в фреймворке попросту нет, мы его опишем сами с отдельном файле стилей:
|
1 2 3 4 |
.custom-btn{ background: linear-gradient(to bottom, #30918B, #2B5882); color: #fff; } |
Надеюсь, алгоритм действий вам понятен.
Что ж, сегодня мы рассмотрели с вами, как начать работать с boostrap. Как видите, особо ничего и не пришлось брать от себя, так как очень хорошие примеры уже есть в документации.
Ну а если вы хотите научиться использовать bootstrap для адаптивной верстки сайтов, то я предлагаю вам пройти кратчайший и очень эффективный путь, который состоит из двух этапов:
Пройти наш бесплатный курс по фреймворку, в котором мы сверстаете очень простой, но все-таки реальный макет сайта. Это будет ваша первая практика.
Пройти опять же наш курс, на этот раз платный, но в нем вы сверстаете уже более сложные макеты, в том числе профессиональный шаблон интернет-магазина, а также идеальный landing page. Естественно, все это будет иметь адаптивный дизайн.
Выбор за вами, ну а я буду прощаться и желать вам скорейшего изучения этого фреймворка, чтобы уже в ближайшее время вы легко создавали собственные профессиональные сайты с его помощью.
