Мы продолжим упражнение сетки начальной загрузки
, которое мы начали в предыдущем упражнении.
Мы собираемся сделать еще несколько вещей на нашей
странице index.html, чтобы улучшить ее макет.
Мы собираемся использовать некоторые пользовательские классы CSS и добавить некоторый цвет
на нашу страницу index.html, используя пользовательские классы CSS.
Следующее, что я собираюсь сделать, это пойти вниз к нижнему колонтитулу и для этого UL здесь,
вы заметите, что этот список, когда вы смотрите на
нашу веб-страницу отображается на веб-странице, используя этот маркированный список здесь.
Я не слишком доволен этим маркированным списком,
я хочу удалить эти пулевые точки, а затем просто показать их как только ссылки там.
Поэтому, чтобы сделать это, я собираюсь использовать другой стиль списка, называемый как
list- unstyled и применить его к этому тегу UL там.
Возвращаясь к нашей веб-странице,
к этому тегу UL в нижнем колонтитуле,
я собираюсь применить класс как список без стиля,
и это устранит эти пули перед этими ссылками там.
Теперь позвольте мне добавить несколько пользовательских классов CSS на страницу index.html.
Для этого мы теперь создадим папку здесь и назовем ее как папка CSS здесь.
Внутри папки CSS
я собираюсь создать новый файл и назову файл как styles.css.
Теперь, внутри файла styles.css,
я могу добавить некоторые классы CSS, чтобы стилизовать нашу страницу.
Позвольте мне добавить некоторые классы CSS здесь.
Итак, я бы добавил свой первый класс в качестве заголовка строки.
Таким образом, как следует из названия,
этот класс я применяю к заголовку.
И затем я бы применил маржу как
нулевой пиксель авто, а
затем заполнял как нулевой пиксель авто.
Итак, это для заголовка строки.
Итак, у меня будет нулевое поле и нулевое заполнение для заголовка строки.
А затем для содержимого строки,
поэтому я собираюсь добавить еще один класс CSS под названием row-content.
И тогда для этого я добавлю маржу нулевой пиксель автоматически,
а затем заполнение имеет его на 50 пикселей,
ноль пикселей, 50 и ноль пикселей.
Затем я собираюсь добавить границу в
нижней части моей строки здесь.
А потом, границу я дам ему один пиксель, а потом назову его хребтом.
И я установлю минимальную высоту 400 пикселей для содержания здесь.
Таким образом, моя веб-страница будет выглядеть более приятной на экране.
Теперь это снова, вы должны попробовать и
увидеть, пока вы не будете удовлетворены тем, как страница выложена.
Теперь также, я собираюсь включить
еще один класс, называемый как нижний колонтитул, который, как вы могли уже догадаться,
я собираюсь применить к нижнему колонтитулу, и я
применим цвет фона к нижнему колонтитулу как D1C4E9.
Если вы спросите меня, как я выбрал цвет,
я просто посмотрел вверх цвет, а затем я был доволен этим цветом.
Вы можете выбрать любой цвет, который вы хотите применить,
но этот цвет кажется хорошим для меня.
Итак, я добавил этот цвет.
И для заполнения, для нижнего колонтитула,
я бы добавил 20 пикселей и нулевых пикселей.
Теперь, как только я добавил эти стили в свой файл CSS,
позвольте мне применить файл CSS к странице index.html.
Я перехожу на страницу index.html.
Очевидно, мне нужно использовать этот файл CSS внутри моей страницы index.html.
Поэтому сразу после файла CSS bootstrap
я собираюсь сделать ссылку и таблицу стилей,
и это файл style.css там.
Так вот где хранится мой файл CSS.
Итак, я собираюсь включить это в мою страницу index.html.
Теперь я собираюсь пойти в тело и применить классы, которые я только что создал.
Поэтому, перейдя к заголовку,
я применим класс заголовка строки к div в заголовке.
Затем, для содержимого,
я бы применил классы содержимого строк к строкам там.
Итак, к трем строкам в содержимом
я применяю класс содержимого строки, а затем спускаюсь к нижнему колонтитулу,
к тегу нижнего колонтитула,
я применим нижний колонтитул класса здесь,
а затем сохраню изменения.
Пойдем и взглянем на эту страницу сейчас.
Перейдя на вашу веб-страницу,
мы уже начинаем видеть некоторые интересные изменения в веб-странице.
Итак, теперь вы можете видеть, что контент
на веб-странице был выложен немного более чистым.
Это нижняя граница, которую мы добавили к содержимому строки,
поэтому вы можете видеть, что существует достаточное разделение между строками, хотя
содержимое строк по-прежнему позиционируется в верхней части строк,
поэтому у вас есть эти три строки, а затем посмотрите на нижний колонтитул, нижний
колонтитул теперь имеет приобрел цвет фона, который я применил,
и обратите внимание, как ссылки стилизованы со списком без стиля на левой стороне здесь.
Мы еще не закончили, нам нужно сделать еще несколько изменений на странице index.html,
а затем вернуться и посмотреть на окончательный результат этого упражнения.
Возвращаясь к вашему редактору,
я собираюсь добавить еще несколько классов CSS в мою структуру стиля,
это файл, поэтому я собираюсь пойти туда, а затем добавить класс под названием Jumbotron.
Итак, вы увидите, что мы уже применили Jumbotron к нашему заголовку там.
Теперь, если я добавлю больше свойств к этому классу Jumbotron,
это будет применено к Jumbotron,
в дополнение к стандартному Jumbotron по умолчанию, который уже включает в себя bootstrap.
Я собираюсь добавить еще несколько вещей,
я собираюсь добавить в дополнение
70 и 30 пикселей на его окрестности,
а затем поле нулевого пикселя вокруг,
и я установлю фон этого на 9575CD.
Это несколько более темный фиолетовый цвет, который, кажется, очень хорошо идет на Jumbotron.
Опять же, методом проб и ошибок,
я выбрал этот цвет,
а также цвет текста как цветочный белый.
Итак, для Jumbotron
мы собираемся применить эти классы, а также,
я собираюсь применить еще один класс к классу адресов.
У нас есть адрес в нижнем колонтитуле,
поэтому я собираюсь изменить размер шрифта на 80 процентов,
немного меньший шрифт, чем обычный шрифт,
и поле, я дам ему нулевой пиксель,
а цвет, я собираюсь использовать ноль F,
ноль F, ноль F,
а затем сохранить изменения.
Таким образом, добавлено еще несколько классов CSS,
переключившись обратно на index.html.
То, что я собираюсь сделать сейчас,
это перейти к строкам содержимого, а затем
я попытаюсь разместить этот контент в середине,
вертикально в этой строке.
Здесь я собираюсь воспользоваться помощью
вертикального выравнивания, которое поддерживает сетка начальной загрузки через поддержку Flexbox.
Чтобы сделать это, я бы сказал align-items-center,
поэтому это другой класс, который мне нужно добавить, align-items-center.
И я собираюсь добавить это к остальным двум строкам также,
align-items-center ко второй и третьей строкам,
и это должно сделать вертикальное выравнивание содержимого строк.
Мы увидим результат через минуту.
Спустимся в нижний колонтитул.
В нижнем колонтитуле вы видите, что мы использовали
колонку auto для этого контента авторских прав там.
Теперь я собираюсь разместить это прямо в середине по горизонтали,
используя этот класс justofy-content-center,
поэтому там есть оправдание контента и несколько других классов.
Я собираюсь использовать для оправдания класса Content-center для этого.
Это по существу разместит этот столбец в центре строки там.
Это применимо к этому, а затем,
одно небольшое изменение, которое я собираюсь сделать,
- это этот внутренний div там,
я собираюсь применить класс в качестве текстового центра к
этому, чтобы эти ссылки центрировались на экране.
С этими изменениями, давайте посмотрим на веб-страницу,
в конце этого упражнения.
Перейдя на нашу веб-страницу,
наша веб-страница уже начинает выглядеть еще лучше,
так что теперь вы можете видеть, что Jumbotron теперь стилизован с новым цветом фона,
который немного темно-фиолетовый там,
и надпись теперь в цветочном белом цветочном цвете,
немного отступом там,
затем теперь можно увидеть, что содержимое в строках содержимого теперь центрируется по вертикали,
для трех строк содержимого.
Это использование align-items-center, который мы применили к строкам там.
Затем, перейдя в нижний колонтитул,
теперь можно увидеть, что это авторское право теперь оправдано до центра экрана.
Посмотрите, как здесь были сосредоточены ссылки.
Я понял, что хочу также позиционировать это вертикально центрирование в этой конкретной строке,
поэтому давайте пойдем и применим еще один класс, чтобы переместить это
в центр этой конкретной строки по вертикали.
Так что, чтобы сделать это, возвращаясь к индексу.
html, в нижнем колонтитуле для этого конкретного столбца, который содержит их,
я буду применять класс как align-self-center.
Это должно быть применено к div, который использует класс столбца.
При этом конкретное содержимое будет выровнено по центру строки.
Оставшийся контент останется на вершине.
Давайте в конце взглянем на нижний колонтитул.
Перейдя к нижнему колонтитулу на нашей веб-странице,
теперь вы можете увидеть, как это было позиционировано вертикально в центре.
Эти два фрагментов содержимого все еще выровнены в верхней части строки,
это нормально, потому что это выглядит там хорошо,
но этот я перетащил его вертикально в центр этой конкретной строки.
С этим мы завершаем это упражнение.
В этом упражнении мы видели использование пользовательских классов CSS,
а также использовали некоторые классы для
обоснования содержимого по горизонтали и вертикали в наших строках.
Это хорошее время для вас сделать хороший комментарий с сообщением,
Bootstrap grid, часть вторая.