Как сделать - веб-сайт с Bootstrap
Узнайте, как создать адаптивный веб-сайт с помощью платформы CSS Bootstrap.
Создание веб-сайта с помощью Bootstrap
Bootstrap является наиболее популярной платформой HTML, CSS и JavaScript для разработки адаптивных мобильных веб-сайтов. Bootstrap абсолютно бесплатна для скачивания и использования.
Примечание: Если вы не знаете Bootstrap, мы советуем вам ознакомиться с нашим учебником Bootstrap.
"проект макета"
Перед созданием веб-сайта может быть целесообразно нарисовать черновик макета страницы:
Navigation bar
Side Content
Some text some text..
Main Content
Some text some text..
Some text some text..
Some text some text..
Footer
Первый шаг-базовая HTML страница
HTML — это стандартный язык разметки для создания веб-сайтов, а CSS — это язык, описывающий стиль HTML-документа. Мы будем сочетать HTML и CSS для создания базовой веб-страницы.
Примечание: Если вы не знаете, HTML и CSS, мы предлагаем вам прочитать HTML учебник.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta
charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>My Website</h1>
<p>A website created by me.</p>
</body>
</html>
Пример как работает
<!DOCTYPE html>
Декларация определяет этот документ как HTML5<html>
элемент является корневым элементом HTML-страницы<head>
элемент содержит мета-информацию о документе<title>
элемент задает заголовок документа<meta>
элемент должен определить кодировку UTF-8<meta>
элемент с именем = "видовой экран" делает веб-сайт хорошо выглядеть на всех устройствах и разрешение экрана<style>
элемент содержит стили для веб-сайта (макет/дизайн)<body>
элемент содержит видимое содержимое страницы<h1>
элемент определяет большой заголовок<p>
элемент определяет абзац
Создание содержимого страницы
Внутри <body>
элемента нашего сайта, мы будем использовать наш "макет проекта" и создать:
- A header
- A navigation bar
- Main content
- Side content
- A footer
Заголовка
Заголовок обычно находится в верхней части веб-сайта (или прямо под верхним навигационным меню). Он часто содержит логотип или название сайта:
<div class="header">
<h1>My Website</h1>
<p>A website
created by me.</p>
</div>
Затем мы используем CSS для стиля заголовка:
.header {
padding: 80px; /* some padding */
text-align: center; /* center the text */
background: #1abc9c;
/* green background */
color: white; /* white text color */
}
/* Increase the font size of the <h1> element */
.header h1 {
font-size: 40px;
}
Панель навигации
Панель навигации содержит список ссылок, помогающих посетителям перемещаться по веб-сайту:
<div class="navbar">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" class="right">Link</a>
</div>
Используйте CSS для стиля панели навигации:
/* Style the top navigation bar */
.navbar {
overflow: hidden; /* Hide overflow */
background-color: #333;
/* Dark background color */
}
/* Style the navigation bar links */
.navbar
a {
float: left; /* Make sure that the links stay
side-by-side */
display: block; /* Change the display to
block, for responsive reasons (see below) */
color: white; /* White text color */
text-align: center;
/* Center the text */
padding: 14px 20px; /* Add some padding */
text-decoration: none;
/* Remove underline */
}
/*
Right-aligned link */
.navbar a.right {
float: right;
/* Float a link to the right */
}
/*
Change color on hover/mouse-over */
.navbar a:hover {
background-color: #ddd; /* Grey background color */
color: black;
/* Black text color */
}
Содержимого
Создайте макет из 2 столбцов, разделенный на "боковое содержимое" и "основное содержимое".
<div class="row">
<div class="side">...</div>
<div
class="main">...</div>
</div>
Мы используем CSS Flexbox для обработки макета:
/* Column container */
.row {
display: -ms-flexbox;
/* IE10 */
display: flex;
-ms-flex-wrap:
wrap; /* IE10 */
flex-wrap: wrap;
}
/* Create
two unequal columns that sits next to each other */
/* Sidebar/left column
*/
.side {
flex: 30%; /* Set the width of the sidebar
*/
background-color: #f1f1f1; /* Grey background color
*/
padding: 20px; /* Some padding */
}
/* Main column */
.main {
flex: 70%; /* Set the width of the main content */
background-color: white; /* White background color */
padding: 20px; /* Some padding */
}
Затем добавьте мультимедийные запросы, чтобы сделать макет отзывчивым. Это позволит убедиться, что ваш сайт хорошо смотрится на всех устройствах (настольных компьютерах, ноутбуках, планшетах и телефонах). Измените размер окна обозревателя, чтобы увидеть результат.
/* Responsive layout - when the screen is less than 700px wide, make the two
columns stack on top of each other instead of next to each other */
@media
(max-width: 700px) {
.row {
flex-direction: column;
}
}
/*
Responsive layout - when the screen is less than 400px wide, make the
navigation links stack on top of each other instead of next to each other */
@media (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
Совет: Чтобы создать различный вид макета, просто измените ширину Flex (но убедитесь, что она добавляет до 100%).
Совет: Вам интересно, как работает @media правило? ПодроБнее об этом читайте в нашей главе "медиа-запросы CSS".
Совет: Чтобы узнать больше о гибкой модуль макета окна, прочитайте нашу CSS Flexbox главе.
Нижний колонтитул
Наконец, мы добавим нижний колонтитул.
<div class="footer">
<h2>Footer</h2>
</div>
И стиль его:
.footer {
padding: 20px; /* Some padding */
text-align: center; /* Center text*/
background: #ddd;
/* Grey background */
}
Поздравляю! Вы создали сайт с нуля.