Bootstrap фреймворк или адаптивный css из сети

Редакция автор: stain

В этой статье, есть конец, а в конце есть конечная ссылка. Рекомендую сразу перейти к ней, если вам интересен Bootstrap.

0. Настроить и загрузить Bootstrap.

1.Адаптивный дизайн.

Добавьте в начале страницы указатель на внешний css

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

Оберните весь контент дивом с встроенным классом container-fluid

<div class="container-fluid">Ваш Контент</div>

Для подгонки картинок под размер экрана добавьте класс img-responsive

<img src="https://путьккартинке" alt="catimage" class="img-responsive">

catimage

Для центровки вашему тексту присвойте класс text-center

<h1 class="text-center">Ваш текст</h1>

Ваш текст

Добавьте вашим кнопкам класс btn

<button class="btn">Кнопка</button>

Хотите чтобы кнопка была на всю ширину страницы, добавьте класс btn-block, при этом класс btn также должен быть вложен

<button class="btn-block btn">Кнопка</button>

Нужно чтобы кнопка  использовала основной голубой цвет, следует добавить класс btn-primary, к уже внедренному семейству классов

<button class="btn-primary btn-block btn">Primary</button>

Светло-голубой - класс btn-info

<button class="btn-info btn-block btn">Info</button>

Красный-опасный - класс btn-danger

<button class="btn-danger btn-block btn">Info</button>

Организация колонок

Для начала посмотрите на эту таблицу

в общем эта шпора объяснять не буду )

наши колонки окружает див класса row, а каждую колонку также окружает див класса col-xs-??, где ?? от 1 до 12 чем выше число тем большую часть экрана будет занимать колонка.

xs (extra small) — для мобильных телефонов, до 767 пикс. включительно
sm (small) — для планшетов, размер экрана 768—991 пикс.
md (middle) — для десктопов, 992—1199 пикс.
lg (large) — для больших экранов, от 1200 пикс.

<div class="row">
<div class="col-xs-4">
<button class="btn-primary btn-block btn">Primary</button>
</div>
<div class="col-xs-4">
<button class="btn-info btn-block btn">Info</button>
</div>
<div class="col-xs-4">
<button class="btn-danger btn-block btn">Info</button>
</div>
</div>

Задаем тексту цвет и прочие параметры через класс text-primary

<h2 class="text-primary">Primari</h2>

Primari

Также можно поступить и с классом text-danger, чтобы выделить текст

<span class = "text-danger">danger</span>

danger

Создадим заголовок из пары элементов, здесь мы акцентируем размеры элементов с помощью коэффициентов. Таким же образом можно выровнять любые элементы.

<div class="row">
<div class="col-xs-8">
<h2 class="text-primary text-center">CatPhotoApp</h2>
</div>
<div class="col-xs-4">
<a href="#"><img class="img-responsive" style="border-radius: 50%;" src="https://bit.ly/fcc-relaxing-cat" alt="catimage" ></a>
</div>
</div>

 

CatPhotoApp

catimage

 

Элементы <input>, <textarea> и <select> при добавлении к ним класса .form-control становятся блочными и занимают 100% ширины родительского блока.

Пример формы, для иконки используется класс fa-paper-plane (самолетик). А для поля ввода класс form-control.

<form action="/submit-cat-photo" >
<div class="row">
<div class="col-xs-6">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
</div>
<div class="col-xs-6">
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Loving</label>
</div>
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Lazy</label>
</div>
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Crazy</label>
</div>
</div>
<input class="form-control" type="text" placeholder="input" required>
<button class="btn btn-primary" type="submit"><i class="fa fa-paper-plane"></i> Submit</button>
</form>


2. Шрифт Awesome и Иконки для наших Кнопок (работает только если разрешены скрипты).
Добавьте в начале страницы указатель на внешний css.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

Здесь мы используем <i></i> не для отображения курсива а для иконок для наших кнопок, добавляя ему классы fa fa-info-circle, второй класс определяет иконку i в кружке, fa-thumbs-up означает палец вверх, trash - корзина. Не больше одного класса иконки для одной кнопки.

<button class="btn btn-block btn-info"><i class="fa fa-thumbs-up"></i> Info</button>

Зы: Простите за не адаптивную статью по адаптивному дизайну.

Источники
FreeCodeCamp - учебный курс "Responsive Design with Bootstrap

Статьи в дополнение к прочитанному:
Правильное использование Bootstrap
О фреймворках, bootstrap и прочем, что вроде бы должно облегчить нам жизнь
Выпадающие списки
Меню в Bootstrap
Уроки по Bootstrap. Урок №1: что это и как начать с ним работать

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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