В предыдущих лекциях
мы узнали о адаптивном дизайне и системе bootstrap grid.
Мы видели, как сетка начальной загрузки позволяет нам создавать отзывчивые веб-сайты.
Пришло время перейти к следующему упражнению.
Мы начнем работать с индексной html-страницей, которую мы создали в
предыдущем упражнении, и применим классы сетки начальной загрузки, чтобы сделать ее отзывчивой.
Кратко взглянув на нашу веб-страницу в браузере, мы видим, что
это все еще ужасно, хотя шрифты немного улучшились,
и теперь мы используем шрифты по умолчанию bootstraps.
Давайте теперь попробуем применить классы сетки bootstrap к index.html, чтобы улучшить его макет.
Перейдя на страницу index.html,
позвольте мне быстро обратить ваше внимание на эту конкретную строку на
странице index.html, которую мы уже включили в предыдущее упражнение.
Я говорил об этой строке,
а потом мы говорили о системе загрузочной сетки.
Итак, здесь мы видим, что мы указали мета-теги с портом представления и содержимым,
ширину как ширину устройства,
и начальный масштаб один и уменьшить, чтобы соответствовать нет.
Таким образом, этот метатег позволяет нам сделать
нашу веб-страницу отзывчивым, глядя на характер порта представления.
Двигаемся вперед к следующему шагу.
Мы собираемся сворачиваться к телу этой страницы index.html,
а затем искать первый div, который приходит прямо под тегом заголовка там,
к этому div вы собираетесь применить контейнер класса.
Мы уже узнали о классе контейнера в предыдущей лекции.
Поэтому, как только мы применим класс контейнера,
затем взглянув на нашу веб-страницу, мы видим,
что часть содержимого прямо там уже адаптировалась.
Посмотрите на разницу между содержанием здесь и тем, что ниже.
Теперь этот контент ниже здесь,
находится в нижнем колонтитуле нашей страницы index.html, и этот контент находится в заголовке.
Но этот контент посередине является фактическим содержимым нашей веб-страницы,
то есть внутри div, к которому мы применяем контейнер.
Таким образом, применяя класс контейнера, вы можете сразу увидеть, что ширина страницы, внутри
которой размещен наш контент, теперь
сократилась, а затем у вас есть дополнительное пространство
с обеих сторон, поэтому, поскольку эта ширина контейнера является контейнером фиксированного размера,
наш контент будет фиксирован в этом определенную ширину
на экране, оставляя достаточно поля с обеих сторон в качестве пробела.
Давайте применим один и тот же класс контейнера как к заголовку, так и к нижнему колонтитулу,
а затем посмотрим, как изменяется содержимое.
Возвращаясь к нашей веб-странице,
то, что я собираюсь сделать сейчас, это для
внутреннего содержимого здесь, внутреннего div внутри контейнера,
я собираюсь применить класс в качестве класса строки здесь,
к этому первому,
и я просто скопирую это.
Я собираюсь применить то же самое ко второму div здесь, который выстроен для div,
а также прокрутите вниз, а затем к третьему div здесь,
я также применяю класс строки здесь.
Итак, теперь содержимое внутри этого внешнего класса контейнера
теперь разделено на три строки,
поэтому все, что внутри здесь, будет одна строка,
что бы там ни было,
будет второй строкой, а одна здесь будет третьей строкой.
Позже мы применим классы столбцов к этому.
Давайте теперь перейдем к заголовку в нашем теле index.html.
И к заголовку я собираюсь применить класс, называемый jumbotron.
Компонент jumbotron позволяет
выделить содержимое внутри jumbotron от остальной части страницы.
Мы увидим результат в короткое время, когда мы на результирующей веб-странице.
Теперь, к div внутри этого заголовка,
я собираюсь применить класс как контейнер,
так что все, что находится внутри содержимого,
теперь будет ограничено шириной контейнера там.
Аналогичным образом, двигаясь вниз к нижнему колонтитулу здесь,
в нижнем колонтитуле также,
первый div внутри нижнего колонтитула,
я собираюсь применить класс как контейнер.
И div внутри,
я собираюсь применить класс как строку там,
к div внутри.
Таким образом, этот div приведет нас к этому конкретному div здесь.
И затем следующий div также, который находится прямо ниже этого,
я применим класс как строку.
Итак, теперь мой нижний колонтитул содержит две строки здесь,
мы будем стилизовать содержимое, используя столбец,
классы в короткое время.
Перейдя к заголовку также,
я применим класс строки ко второму div внутри контейнера div здесь.
Таким образом, этот div, который соответствует мне это,
будет одной строкой в заголовке.
Давайте посмотрим на нашу результирующую веб-страницу.
Перейдя на нашу веб-страницу,
теперь вы можете увидеть, что содержимое заголовка теперь отдельно от
остальных внутри этого серого окна сверху.
Но сам контент теперь выстроился с содержанием ниже.
Теперь это результат использования контейнера.
Переходя к нижнему колонтитулу,
теперь вы можете видеть, что содержимое нижнего колонтитула также выстроилось внутри контейнера.
Но страница все еще выглядит не так здорово,
теперь мы применим классы столбцов к внутренним divs.
Возвращаясь к странице index.html,
мы теперь начнем применять классы столбцов.
Поэтому, перейдя к заголовку, ко второму внутреннему div внутри jumbotron здесь,
позвольте мне применить класс как столбец 12, столбец sm-6.
Итак, здесь контент в
этом первом div будет занимать всю строку для дополнительных небольших размеров экрана,
а затем будет занимать половину строки, поэтому столбец
sm-6 для небольших и очень больших размеров экрана.
Теперь, аналогично для второго div здесь,
хотя он не содержит никакого содержания,
я собираюсь определить классы столбцов здесь как столбец 12, а затем столбец sm.
Итак, обратите внимание, что здесь, указав столбец 12,
я явно заявляю, что для дополнительных небольших размеров экрана любой контент
внутри этого div будет уложен ниже содержания здесь.
А затем для небольших и очень больших размеров экрана,
этот контент будет занимать оставшееся количество
столбцов в строке для небольших или очень больших размеров экрана.
Поэтому здесь, в этом случае, поскольку шесть столбцов заняты этим содержимым,
это получит оставшиеся шесть столбцов там.
Перемещение вниз к строкам содержимого здесь,
для содержимого здесь,
поэтому для этого первого контента,
который является меткой здесь,
я собираюсь применить классы как столбец 12,
столбец sm-4, столбец md-3.
Таким образом, заявляя, что для дополнительных небольших размеров экрана
это будет занимать всю строку, для малых
он будет занимать полные столбцы,
а затем для средних и сверхбольших,
он будет занимать три столбца в строке.
Теперь, поэтому оставшаяся часть будет занята содержимым ниже здесь,
так что я буду применять классы как col,
указывая, что это будет уложено ниже
содержания здесь в дополнительных небольших размерах экрана,
а затем я скажу столбец sm,
так что это означает, что это будет занимать оставшиеся восемь столбцов здесь,
потому что четыре столбца заняты этим,
а затем мы скажем столбец md,
так что это означает, что это будет занимать
оставшиеся девять столбцов, потому что три столбца заняты
для средних и сверхбольших размеров экрана содержимым выше здесь.
Теперь, когда я определил для первой строки содержимого,
я собираюсь взять то же приложение класса столбцов здесь,
а затем применить это ко второй строке здесь,
а также к третьей строке содержимого здесь.
Аналогичным образом, я собираюсь скопировать этот, а затем применить то же самое к
контенту divs ниже здесь.
Итак, теперь мы настроили как заголовок, так и столбцы содержимого там.
Давайте теперь спустимся к нижнему колонтитулу.
В нижнем колонтитуле вы заметите, что этот div содержит три внутренних div здесь,
поэтому для каждого из этих трех внутренних div здесь
я собираюсь применить соответствующие классы столбцов.
Итак, для первого,
который содержит ссылки на различные страницы, которые будут являться частью этого веб-сайта,
я собираюсь применить класс столбца,
как столбец четыре, столбец sm-2 здесь.
Таким образом, это означает, что для дополнительных небольших размеров экрана
это будет занимать четыре столбца, а для малых и очень больших,
он будет занимать только два столбца здесь.
Затем для второго,
второй div там я буду применять классы как столбец семь.
Так что обратите внимание, что у меня есть четыре здесь, а затем семь здесь,
так что общее количество занимает 11 столбцов.
Я оставил один столбец пустым.
Я вернусь позже, чтобы применить смещение, чтобы позаботиться о дополнительном столбце.
Итак, это столбец семь,
а затем кол-см-5 ко второму.
Так что это два плюс пять, семь.
Поэтому у меня все еще осталось пять столбцов,
которые я могу использовать для третьего div здесь.
Теперь для дополнительных небольших размеров экрана
эти два содержимого будут размещены бок о бок,
а затем этот div, который содержит ссылки на
сайт социальных сетей, будет в отдельной строке, сложенной ниже.
Но для небольших и очень больших размеров экрана
первый будет занимать две колонки,
второй будет занимать пять, а остальные будут
заняты ссылками в социальных сетях здесь.
Итак, для третьего
я собираюсь применить класс
как col-12 col-sm-4 здесь.
Таким образом, col-12 col-sm-4, что означает, что это будет занимать
отдельный набор из 12 столбцов,
уложенных ниже предыдущего содержимого для дополнительных небольших размеров экрана,
но для небольших и очень больших он будет занимать четыре столбца.
Итак, здесь мы четыре плюс пять,
девять плюс два 11.
Таким образом, один столбец все еще остается для небольших и очень больших.
Так вот как я собираюсь применить этот столбец ближе всего к этому.
Теперь у нас все еще есть тот, который ниже, где мы имеем авторские права на это.
Я собираюсь применить класс как автоматический столбец,
что означает, что этот контент будет занимать
достаточно столбцов, как того требует содержание там.
Позже вы увидите, что я буду позиционировать этот контент в центре
экрана, тем самым используя еще один класс bootstrap CSS.
Мы подойдем к этому в следующем упражнении.
Таким образом, с этим мы применили различные классы столбцов к заголовку
, содержимому и нижнему колонтитулу.
Это хорошее время для нас, чтобы сохранить изменения, а затем пойти и
взглянуть на обновленные индексированные или HTML страницы.
Взглянув на нашу страницу index.html,
вы заметите, как в заголовке, который является Jumbotron,
содержимое теперь занимает только половину экрана.
Другая половина экрана этой строки теперь остается пустой.
Спускаясь к строкам содержимого,
вы видите, что метка на левой стороне занимает
три или четыре столбца в зависимости от того, какой размер экрана используется,
а остальное занято остальной частью содержимого.
Итак, здесь у нас есть одна
строка, вторая и третья строка.
И затем нижний колонтитул здесь вы можете увидеть, что ссылки находятся на левой стороне,
остальные в середине,
а затем ссылки в социальных сетях на правой стороне.
Так что это для экрана среднего размера.
Теперь, если вы хотите посмотреть на один и тот же вид для дополнительных небольших или малых размеров экрана,
если вы используете Chrome,
тогда у Chrome есть инструменты разработчика, которые вы можете
включить, нажав на инструменты разработчика представления,
и когда
появятся инструменты разработчика, вы заметите, позвольте мне уменьшить размер Здесь.
Вы заметите это маленькое окно там.
Поэтому нажатие на это включит отзывчивый вид для этих сайтов там.
Таким образом, вы можете видеть, что здесь вид этой же веб-страницы на пикселе к сайту,
который составляет 411 на 731 в портретном режиме,
так что это соответствует дополнительному маленькому размеру экрана,
так что вы можете увидеть, как содержание выложено.
Таким образом, вы можете увидеть содержание Jumbotron там
, а затем оставшуюся часть контента ниже здесь.
А потом вниз к нижнему колонтитулу.
Таким образом, в нижнем колонтитуле вы можете увидеть, как ссылки и объявление размещены бок о бок.
Теперь уменьшает размер экрана, чтобы мы могли видеть, как этот нижний колонтитул проложен здесь.
Остальная часть, у вас есть ссылки на левой стороне,
у вас есть адрес на правой стороне,
а затем ссылки на социальные сети внизу в отдельной строке здесь,
а затем авторские права внизу.
Так что это интересный вид, который мы видим для дополнительных небольших размеров экрана.
Возвращаясь к нашему коду здесь,
я собираюсь применить классы порядка и смещения к
этому контенту, чтобы отобразить содержимое немного по-другому.
Поэтому перейдя к строке содержимого здесь,
для двух div здесь, которые содержат содержимое,
я собираюсь применить классы как
order-sm-last для первой строки здесь.
И затем для этого внизу я сначала применим заказ sm к ряду здесь.
Это означает, что когда этот контент отображается,
это содержимое будет вытащить в левую сторону экрана, а затем
этот столбец будет нажат в правую сторону экрана.
Так что это будет заказано с правой стороны, и это будет заказано с левой стороны.
Как я объяснил о положениях заказа в предыдущей лекции.
Аналогично со второй строки,
я собираюсь оставить его как таковой, но из третьей строки я собираюсь применить
тот же набор классов порядка.
Поэтому я собираюсь перейти к третьей строке здесь,
а затем применить order-sm-last к этому,
а затем я применим order-sm-сначала к этому.
И поэтому этот снова будет переупорядочен
таким образом, что этот контент будет отображаться
слева, и этот контент будет отображаться справа.
Это просто способ позиционирования контента немного более интересным способом.
Теперь, двигаясь вниз в нижний колонтитул здесь,
теперь я собираюсь применить класс offset здесь.
Так что обратите внимание, что я упомянул, что эти два столбца будут занимать четыре плюс семь, 11.
Таким образом, один столбец оставлен.
Поэтому я собираюсь применить класс offset-1 к этому.
Таким образом, это означает, что этот контент на этом div будет нажат прямо на один столбец здесь.
Точно так же, поскольку я сказал, что смещение,
это будет применяться к дополнительным маленьким вплоть до очень больших размеров экрана.
И так это использование класса offset.
Так что теперь, когда мы внесли изменения,
давайте сохраним изменения, а затем пойдем и взглянем на нашу веб-страницу в браузере.
Возвращаясь к этому
браузеру, вы теперь видите, как заголовок выглядит как раньше,
но в первой строке содержимого
вы видите, что этот контент был нажат на
левую сторону, а метка — на правую сторону.
Вторая строка отличается, как и раньше.
Но для третьего вы увидите, что это было
нажато вправо, и это было нажато влево.
Так что есть использование класса order-sm-last и order-sm-first.
Теперь, перейдя к нижнему колонтитулу,
вы видите, что содержимое в первом div здесь было нажато прямо на один столбец,.
Таким образом, вы можете видеть, что здесь есть один столбец пробелов,
и это не толкается вправо, а остальные были отформатированы соответствующим образом.
Таким образом, мы завершаем изменения
на нашей странице index.html или дополнительной странице для этого конкретного упражнения.
Этим мы завершаем это конкретное упражнение.
В этом упражнении мы рассмотрели использование
классов контейнеров, строк и столбцов, чтобы создать нашу веб-страницу немного приятнее.
Во второй части упражнения, которое будет следовать за этим,
мы собираемся добавить больше, чтобы попытаться улучшить способ отображения этих веб-страниц.
Это до сих пор не к моему удовлетворению.
Очевидно, что все еще есть возможности для улучшения.
Это может быть подходящее время для вас сделать комментарий git с
сообщением Bootstrap Grid Part One.