My CSS is Eeaasy II

Приветствую вас всех, ребята! Короче, сегодня, мы выполним My CSS is Easy Ii на статус Approved.

INTRO

Да, сегодня мы выполним проект My CSS is Easy Ii. И сделаем мы данный проект, изучая популярный фреймворк как Bootstrap. Но прежде всего, давайте взглянем на описание проекта.

DESCRIPTION

Проект описывается таким образом : «Вам нужно создать точно такой же макет страницы. Но, реализация требует использования именно Bootstrap 4.0 или 5.0. Но, не Float.»

То есть, мы используя Bootstap должны смастерить точно такой же вид или лучше. Итак, когда мы можем ответить на вопросы:

  1. Что мы должны сделать, конечный результат?
  2. С чем мы должны реализовать его?

Приступим к работе.

Bootstrap

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

Bootstap славится тем, что предоставляет разработчику 12 колонную систему. Что такое 12-колонная система(сетка Bootstrap) ? Это значит, что страница разделяется на 12 колонн при использовании данного фреймворка. И в этой сетке вы можете определить размер, то есть сколько колонн должно занимать каждый блок страницы такие как заголовки, абзацы и кнопки.

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

Кроме своей сетки, Bootstrap также предоставляет

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

Именно поэтому его использует во многих случаях за его доступность, эффективность и качество.

SET UP

Есть два способа использования Bootstrap. Вы можете либо скачать Bootstrap в свой проект, либо загрузить CDN boostrap-a на свой код. Мы воспользуемся вторым методом. Для получения CDN нажмите на данную ссылку и затем скопируйте CSS cdn и вставьте в ваш html file в тег <head>.

………..

MyCssisEasy2

……….

EXAMPLE

Колонны можно использовать внутри блока <div class=»row»>. А <div class=»row»> пишется внутри <div class=»container» или class=»container-fluid»>.

Разница между ними, в том что container-fluid растягивается на всю ширину родительского элемента, в то же время как container распологается с определенными отступами.

Внутри данного блока <div class=»row»>, инициализируем все колонны. Поставьте каждой колонне определенный бэкграунд-калор и увидете как колонны распределились. Каждая колонна должна иметь размер, то есть колонна это же блок, должен занимает определенное количество колон из 12 возможных. Поэтому, последние цифры тут означают сколько колон занимает данный блок.

Main

Empty

GRID SYSTEM & Columns

Мы можем в данном фреймворке, также менять число колон, которое занимает элемент в зависимости от размера viewport-а/ видимого экрана. Как вы видете, представлены 5 видов размера экрана. Для того, чтобы обозначить именно в каком размере, какое количество колон должен занимать элемент пишем в <div class=»<class prefix><number of columns>». Например, я хочу чтобы блок занимал 10 колонн в large экране. Значит, я пишу <div class=»col-lg-10″>. col-lg это префикс, 10 — число колонн.

Realization

Итак, давайте приступим к реализации проекта. Если смотреть на картинку макета выше. То, мы видим что там три ряда. Соответсвенно, у нас будет 3 row блока.

  • В первом ряду будет лишь один элемент Header. И этот элемент занимает как мы заметили, 4 колонны.
  • Во втором ряду есть три элемента: Main, Empty, Sidebar. Main занимает 2 колонны, Empty занимает 1 колонну, Sidebar занимает 1 колонну.
  • В третьем ряду будет один элемент Footer, который занимает 4 колонны.

Сначала создаем главный блок, который имеет класс «container».

Далее, в нем создаем 3 div с классом row.

Первый ряд имеет один блок, который занимает 4 колонны. В качестве размера экрана установим large.

…………

Header

…………..

Второй ряд имеет три блока, который занимает 2,1,1 колонн.

…………

Header

Main

Empty

…………..

И конечный ряд занимает 4 колонн.

…………

Header

Main

Empty

…………..

И на этом все… Как бы это странно не звучало, мы построили данный макет используя bootstrap. Но наверное, вы не видите особые изменения. Поэтому давайте зададим классы им с их же названиями(В коде они все прописаны). Эти классы должны добавлять цвет в наши блоки. Поэтому, создаем style.css, подключаем его в тег <head>.

style.css

.header {
background-color: orange;
}

.my-box {
border-radius: 5px;
text-align: center;
height: 5rem;
line-height: 5rem;
font-size: 20px;
margin-bottom: 5px;
box-shadow: 2px 2px 5px black;
}

.main {
background-color: rgb(36, 39, 207);
}

.empty {
background-color: transparent;
}

.sidebar {
background-color: red;
}

.footer {
background-color: green;
}

И если сейчас откроете вашу html-страницу, то должно выглядеть примерно таким образом.

Re Cap

Итак, мы выполнили данный проект на bootstrap. Мы использовали специальные классы, 12-колонную модель и попрактиковали свои навыки в css.

Надеюсь, материал был полезным в выполнении данного проекта. Но, если вы хотите изучить подробнее bootstrap, то оставляю полезные ссылки.

До скорого ребята, успешной сдачи My CSS is Easy Ii.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.