Недавно я обнаружил хорошую вещь под названием Bootstrap, самая популярная адаптивная структура CSS в настоящее время, которая приоритет мобильными устройствами и может быстро адаптироваться к различным устройствам. Используйте его, чтобы быстро и удобно писать отзывчивые страницы, и блокирует различия в браузерах. С начальной загрузкой вы больше не можете представить себе трагическую жизнь написания веб -страниц в оригинальных CSS в прошлом.
После обучения я обнаружил, что у меня также была возможность разрабатывать высококлассную страницу за считанные минуты. Эта статья представит вам начальную загрузку и приведет вас к реагированию на адаптивную страницу.
Рисунок 1. Мобильный приоритет, адаптированный к разным устройствам
1. Установка
Самый простой способ - напрямую ссылку на начальную загрузку, предоставленную сетью дистрибуции контента (CDN) на веб -странице. Когда пользователь обращается к веб -странице, он получит ресурсы с близлежащего сервера.
Листинг 1. Получить начальную загрузку из сети распределения контента
<!-Последние скомпилированные и минимизированные CSS-> <link rel = "styleSheet" href = "bootstrap/3.3.4/css/bootstrap.min.css"> <!-Необязательная тема-> <link rel = "stylesheet" href = "bootstrap/3.3.4/css/bootstrap-etheme.min.min.min. -> <script src = "bootstrap/3.3.4/js/bootstrap.min.js"> </script>
Вы также можете загрузить Bootstrap для развертывания локально. Пользователи могут скачать полную начальную загрузку на странице, или они могут выбрать функции, используемые в проекте в соответствии с потребностями проекта на пользовательской странице, компиляции и загрузке упрощенной версии Bootstrap. После завершения загрузки получается zip -файл. Декомпрессированная структура каталогов заключается в следующем:
Листинг 2. Структура каталогов Bootstrap
начальная загрузка/
CSS/
│ ├ack -bootstrap.css
│ ├actrable.css.map
│ ├ ├мобил Bootstrap.min.css
│ ├ack-bootstrap-theme.css
│ ├ack-bootstrap-theme.css.map
│ └ack-bootstrap-theme.min.css
├ack JS/
│ ├ ├мобил Bootstrap.js
│ └ └мобил Bootstrap.min.js
└ack шрифты/
Glyphicons-halflings-regular.eot
Glyphicons-Halflings-Regular.svg
Glyphicons-halflings-regular.ttf
Glyphicons-halflings-regular.woff
Glyphics-Halflings-Regular.woff2
Здесь мы в основном сосредотачиваемся на трех упрощенных файлах: bootstrap.min.css является основным компонентом начальной загрузки и содержит большое количество классов CSS, которые будут использоваться; Bootstrap-teme.min.css содержит дополнительные темы начальной загрузки; Bootstrap.min.js предоставляет некоторые методы JavaScript. Следует отметить, что начальная загрузка зависит от jQuery, поэтому jQuery должен быть представлен перед использованием bootstrap.min.js. Как и в использовании сети распределения контента, мы используем относительные пути для введения соответствующих CSS и JavaScript в наши страницы. В реальной разработке мы часто используем шаблон, предоставленный Bootstrap в качестве отправной точки. Этот шаблон вводит метаданные и начальную загрузку, требуемые отзывчивыми страницами. Разработчики могут написать свои собственные адаптивные страницы на этой основе:
Листинг 3. Bootstrap Basic Stemplate
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-совместимый" content = "ie = edge"> <meta name = "viewport" content = "width = width-width, первоначальная шкала = 1"> <!-вышеупомянутое 3 Meta tat in in in tat in in in tats * Любой другой контент для головы должен прийти * после * эти теги-> <Temitle> шаблон BootStrap 101 </title> <!-Bootstrap-> <Link href = "css/bootstrap.min.css" rel = "stylesheet"> <!-html5 shim и ответьте. Страница через файл: //-> <!-[if ie Ie 9]> <script src = "https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <script src = "https://oss.maxcdn.com/resper/1.4.2/resper.min.js"> </script> <! [endif]-> </head> <body> <h1> Привет, мир! src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> </script> <!-Включите все скомпилированные плагины (ниже) или включают отдельные файлы по мере необходимости-> <script src = "js/bootprap.min.jin.jin.
2. CSS
Bootstrap - это первая структура CSS, которая предопределяла множество классов CSS. Разработчики должны добавить только соответствующие классы CSS в элементы HTML, чтобы получить желаемый стиль, который может завершить макет страницы, макет и другие функции. CSS, предоставленные Bootstrap, чрезвычайно мощный. Эта статья будет сосредоточена на системе сетки, которую он предоставляет. Для других функций он будет упоминаться только при его применении. Если вы хотите узнать больше о функциях, пожалуйста, обратитесь к официальной документации.
контейнер
При использовании макета начальной загрузки необходимо включить HTML -элементы в контейнер (.container). Bootstrap предоставляет два контейнера: .container и .container-Fluid. Первые сосредоточены на содержании с фиксированной шириной, в то время как последний позволяет контенту горизонтально заполнять все окно браузера, как показано ниже:
Листинг 4.
<div> <p> "Когда я была ребенком, моя мама готовила для меня чашку кофе, когда я заболел. Она нежно сказала:« Иностранцы пьют это ».« Я всегда боялся кофе, а кислин и горечь были переплетены. Теперь я не могу найти вкус, который я пил, когда был ребенком, когда я был ребенком, до того дня я не пил чашку Исатиса. Она нежно сказала: «Иностранцы пьют это». «Будучи молодым, я всегда боялся кофе, и кислая и горечь переплетается. Теперь я не могу найти вкус, который я пил, когда был ребенком, когда был ребенком, до того дня я выпил чашку Исатиса». </p> </div>
На следующей картинке показано, как выглядит в браузере:
Рисунок 2. Контейнер
Сетка система
Как и система сетки, которую мы разработали при написании первой адаптивной страницы, Bootstrap делит страницу на ряды (.row), с 12 столбцами на строку (.col-md-*). Ряды должны быть включены в контейнер. Согласно размеру экрана, столбцы делятся на .col-xs-, .col-sm-, .col-md- и .col-lg-, соответственно, соответственно, соответствующие мобильным телефонам (<768px), таблеткам (≥768px), компьютерам среднего экрана (≥992px) и крупными скрипными компьютерами (≥1200px). Эти пиксели, которые появляются в нем, называются критическими точками. Всякий раз, когда размер браузера или размер экрана достигает другой критической точки, соответствующий класс CSS будет работать, и макет страницы изменится. Смотрите следующее рисунок для деталей:
Рисунок 3. Система сетки
Как вы понимаете приведенную выше таблицу? Если вам нужно выкопать страницу на три столбца при просмотре страницы на компьютере, на которой учитываются 1/4, 2/4 и 1/4 ширины строки, вы можете написать код следующим образом:
Листинг 5. Одна строка разделена на три столбца
<div> <div> .col-md-3 </div> <div> .col-md-6 </div> <div> .col-md-3 </div> </div >>. Col-md-3 </div> </div>
Откройте браузер, и вы можете видеть, что каждый из них занимает 3, 6 и 3 из 12 столбцов, которые составляют ровно 12 столбцов. Если мы сужаем окно браузера до тех пор, пока оно не станет менее 970px, мы обнаружим, что он стал тремя линиями, сложенными вместе для отображения. За исключением .col-xs-, другие классы CSS ведут себя так же. Когда размер экрана меньше его критической точки, он будет отображаться. Он будет отображаться только в столбцах только тогда, когда размер экрана больше, чем его критическая точка, и .col-XS- отображается в столбцах в любом случае.
Классы CSS, соответствующие различным размерам экрана, могут использоваться в смешанном манере. Например, если я хочу, чтобы страница отображала 3 столбца на компьютере и 2 столбцах на телефоне, я могу написать код следующим образом. На телефоне третий столбец будет отображаться на следующей строке и занимать половину ширины линии:
Листинг 6. Покажите разные номера столбцов на компьютерах и телефонах
<div> <div> .col-md-3 </div> <div> .col-md-6 </div> <div> .col-md-3 </div> </div >>. Col-md-3 </div> </div>
Если вы хотите отобразить один и тот же столбец на всех устройствах, вам нужно только определить минимальный размер .col-xs-, и макет автоматически расширится до большего размера, в противном случае он не будет удерживать:
Листинг 7. То же количество столбцов отображается на всех устройствах
<div> <div> .col-xs-6 </div> <div> .col-xs-6 </div> </div>
Вы также можете дать определенное смещение столбца, например, в первом столбце учитывается 1/4 ширины строки, и мы хотим, чтобы второй столбец смещался 6 столбцов вправо, занимая 3 столбца в конце строки:
Листинг 8. Смещение столбца
<div> <div> .col-md-3 </div> <div> .col-md-3 </div> </div>
Порядок столбцов также может быть отрегулирован с помощью .col-md-push-* и .col-md-pull-*. Их значение состоит в том, чтобы подтолкнуть элемент назад или вытащить несколько столбцов вперед. Разработчики могут использовать эту функцию, чтобы вытащить важный контент спереди при отображении ее на телефоне:
Список 9. Нажмите и вытягивайте столбец
<div> <div> .col-md-9 .col-md-push-3 </div> <div> .col-md-3 .col-md-pull-9 </div> </div>
Что еще более захватывающе, так это то, что эта сетчатая система также может быть вложена, чтобы можно было выполнить различные сложные макеты:
Список 10. гнездование
<div> <div> Уровень 1: .col-sm-9 <div> <div> Уровень 2: .col-xs-8 .col-sm-6 </div> <div> Уровень 2: .col-xs-4 .col-sm-6 </div> </div> <div> Уровень 1: .col-sm-3 </div> </div> </div> <div>.
Приведенный выше код обычно делится на два столбца, а в первом столбце вложены два столбца.
Функция сетки Bootstrap предоставляет различные возможности для макета веб -страницы и очень проста в использовании. Давайте возьмем случай, чтобы увидеть, как просто написать адаптивную страницу с помощью начальной загрузки.
3. Фактический бой
Предположим, вы хотите реализовать веб -страницу, как показано на следующем изображении:
Рисунок 4. Веб -дизайн
Во -первых, мы разделяем элементы веб -страницы на соответствующие строки и столбцы. На следующем рисунке показано подразделение автора:
Рисунок 5. Разделение веб -дизайна на ряды и столбцы
Соответственно, определите нашу структуру HTML и добавьте соответствующий класс CSS Bootstrap:
Листинг 11. Определение структуры HTML
<div> <div> <img src = "http://placehold.it/150x150"> </div> <div> <h1> Джейн Дотт </h1> <h3> Front-end Ninja </h3> </div> <hr> <div> <div> <img src = "http://placehold.it/950x350"> </div> <div> <div> <h2> представленная работа </h2> </div> <div> <div> <img src = "http://placehold.it/250x250"> <h2> Applify </h2> <a href = "https://github.com/udacity/applify"> https://github.com/udacity/applify </a> </div> <div> <img src = "http://placehold.it/250x250"> <h2> sunflower </h2> <a href = "https://github.com/udacity/sunflower"> https://github.com/udacity/sunflower </a> </div> <div> <img src = "http://placehold.it/250x250"> <h2> bokeh </h2> <a href = "https://github.com/udacity/bokeh"> https://github.com/udacity/bokeh </a> </div> </div>
Автор потребовалось менее 10 минут, чтобы написать приведенный выше код, и, поскольку фотографий не было, автор использовал картинки заполнителей, предоставленные в Интернете. Открытие этой страницы в браузере близко к дизайну, но шрифт, верхний регистр, верхний и шрифт по -прежнему не соответствуют дизайну. Затем вам нужно точно настроить и просмотреть документ Bootstrap, чтобы обнаружить связанные классы CSS. Окончательный эффект показан на рисунке ниже:
Рисунок 6. Эффект реализации
Что еще интереснее, что когда вы сузите окно браузера или получаете доступ к странице со своего телефона, вы обнаружите, что это уже простая страница отзывчика, и мы не добавили дополнительного кода! Глядя на то время, это заняло менее 20 минут, и я также выполнил свое обещание написать отзывчивую страницу за считанные минуты.