Продолжать наше путешествие в бутстрап — простая и радостная задача.

Во-первых, давайте начнем с того, как можно использовать загрузку на своих страницах.

Есть два простых варианта получения Bootstrap. Первый — скачать его с getbootstrap.com. Во-вторых, использовать чудесный мир CDN (Content Delivery Network), любезно предоставленный людьми из MaxCDN.

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

Однако, если вы похожи на меня (ленивы), то самым простым вариантом будет ссылка через CDN.

Первый пример будет выглядеть примерно так.

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

В то время как второй вариант без загрузки выглядит так.

<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

Важно отметить, что независимо от выбранного метода для всего загрузочного JavaScript требуетсяjQuery. Это означает еще одну ссылку CDN или еще одну загрузку и ссылку в любом коде, который вы пишете.

Не волнуйтесь, оно того стоит.

Ну наконец то! Теперь, когда он там, его бесконечная сила в вашем распоряжении!

К сожалению, пока нет.

Прежде чем мы начнем программировать, давайте немного поговорим о том, как это работает?

<meta name=”viewport” content=”width=device-width, initial-scale=1">

Выше приведена строка, которую всегда следует размещать на своих страницах Bootstrap, но почему?

Что ж, Bootstrap определяется как стиль «сначала мобильные». Это означает, что в первую очередь в самой основе того, для чего он предназначен, является отзывчивость и «подгонка» под экран мобильного устройства.

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

И последнее, прежде чем мы сможем перейти к моему следующему посту, в котором, я обещаю, наконец-то будет настоящий код.

То, как Bootstrap решает старую проблему подсчета пикселей и установки ширины, одновременно гениально и просто.

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

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

  • xs - Очень маленький
  • с - маленький
  • м - средний
  • л - большой

Так, например. Можно настроить страницу, разделенную пополам (две группы по шесть столбцов в каждой), которые останутся рядом на больших и средних экранах, но будут располагаться друг над другом на малых или очень маленьких экранах.

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

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