Продолжать наше путешествие в бутстрап — простая и радостная задача.
Во-первых, давайте начнем с того, как можно использовать загрузку на своих страницах.
Есть два простых варианта получения 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.
Однако это то, что мне придется сохранить для следующего поста, который, если повезет, появится в ближайшие несколько дней.