Bootstrap тема "просто я"
Создать тему: "просто я"
На этой странице будет показано, как создать тему Bootstrap с нуля.
Мы начнем с простой HTML-страницы, а затем добавить все больше и больше компонентов, пока у нас есть полностью функциональный, персональный и отзывчивый веб-сайт.
Результат будет выглядеть так, и вы можете изменять, сохранять, обмениваться, использовать или делать все, что вы хотите с ним:
Начальная страница HTML
Мы начнем со следующей страницы HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Theme Simply Me</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h3>Who Am I?</h3>
<img src="bird.jpg" alt="Bird">
<h3>I'm an adventurer</h3>
</body>
</html>
Добавить загрузочный CDN и поместить элементы в контейнер
Добавьте Bootstrap CDN и ссылку на jQuery и поместите HTML-элементы внутри контейнера:
Пример
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Theme Simply Me</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h3>Who Am I?</h3>
<img src="bird.jpg" alt="Bird">
<h3>I'm an adventurer</h3>
</div>
</body>
</html>
Результат:
Who Am I?
I'm an adventurer
Добавление цвета фона и центра текста
1. Добавьте пользовательский класс (. BG-1) в контейнер, чтобы добавить цвет фона.
2. Добавьте .text-center класс для центрирования текста внутри контейнера:
Пример
<head>
<style>
.bg-1 {
background-color: #1abc9c; /* Green */
color: #ffffff;
}
</style>
</head>
<body>
<div class="container-fluid bg-1 text-center">
<h3>Who Am I?</h3>
<img src="bird.jpg" alt="Bird">
<h3>I'm an adventurer</h3>
</div>
</body>
Результат:
Who Am I?
I'm an adventurer
Окружность изображения
Сформируйте изображение по окружности с помощью .img-circle класса:
Пример
<img src="bird.jpg" class="img-circle" alt="Bird">
Результат:
Who Am I?
I'm an adventurer
Больше содержания
Добавьте больше содержимого и поместите его внутрь новых контейнеров:
Пример
<head>
<style>
.bg-1 {
background-color: #1abc9c; /* Green */
color: #ffffff;
}
.bg-2 {
background-color: #474e5d; /* Dark Blue */
color: #ffffff;
}
.bg-3 {
background-color: #ffffff; /* White */
color: #555555;
}
</style>
</head>
<body>
<div class="container-fluid bg-1 text-center">
<h3>Who Am I?</h3>
<img src="bird.jpg" class="img-circle" alt="Bird">
<h3>I'm an adventurer</h3>
</div>
<div class="container-fluid bg-2 text-center">
<h3>What Am I?</h3>
<p>Lorem ipsum..</p>
</div>
<div class="container-fluid bg-3 text-center">
<h3>Where To Find Me?</h3>
<p>Lorem ipsum..</p>
</div>
</body>
Результат:
Who Am I?
I'm an adventurer
What Am I?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Where To Find Me?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Добавить заполнение
Позволяет сделать контейнеры выглядят хорошо, добавив некоторые обивка:
Пример
<style>
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
</style>
Результат:
Who Am I?
I'm an adventurer
What Am I?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Where To Find Me?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Добавление кнопки
Добавьте кнопку в контейнер mid:
Пример
<div class="container-fluid bg-2 text-center">
<h3>What Am I?</h3>
<p>Lorem ipsum..</p>
<a href="#" class="btn btn-default btn-lg">Search</a>
</div>
Результат:
What Am I?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
SearchДобавление значка
Добавить значок поиска на кнопке "Поиск":
Пример
<a href="#" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-search"></span> Search
</a>
Результат:
Изменить третий контейнер (добавить сетку)
Добавьте три столбца одинаковой ширины внутри третьего контейнера ( .col-sm-4 ):
Пример
<div class="container-fluid bg-3 text-center">
<h3>Where To Find Me?</h3>
<div class="row">
<div class="col-sm-4">
<p>Lorem ipsum..</p>
<img src="birds1.jpg" alt="Image">
</div>
<div class="col-sm-4">
<p>Lorem ipsum..</p>
<img src="birds2.jpg" alt="Image">
</div>
<div class="col-sm-4">
<p>Lorem ipsum..</p>
<img src="birds3.jpg" alt="Image">
</div>
</div>
</div>
Результат:
Where To Find Me?
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Сделать образы отзывчивыми
Добавьте .img-responsive класс ко всем изображениям.
Добавьте display:inline к первому изображению, чтобы заставить его быть центрированным ( .img-responsive класс добавляет display:block к изображению, что делает его переходом в левую часть экрана).
Если требуется, чтобы изображение простирается по всей ширине экрана, когда оно начинает складываться, добавьте width:100% к изображению.
При открытии примера не забудьте изменить размер экрана, чтобы увидеть ответный эффект:
Пример
<!-- The circular bird -->
<img src="bird.jpg" class="img-responsive img-circle" style="display:inline" alt="Bird">
<!-- The birds in our grid: -->
<img src="birds1.jpg" class="img-responsive" style="width:100%" alt="Image">
<img src="birds2.jpg" class="img-responsive" style="width:100%" alt="Image">
<img src="birds3.jpg" class="img-responsive" style="width:100%" alt="Image">
Добавление навигационной навигации
Добавьте стандартную панель навигации в верхней части страницы и сделать ее складной на небольших экранах:
Пример
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Me</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">WHO</a></li>
<li><a href="#">WHAT</a></li>
<li><a href="#">WHERE</a></li>
</ul>
</div>
</div>
</nav>
Результат:
Стиль навигационной навигации
Используйте CSS для настройки панели навигации:
Пример
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
}
.navbar-nav li a:hover {
color: #1abc9c !important;
}
Результат:
Добавление нижнего колонтитула
Добавьте нижний колонтитул и используйте CSS для его стиля:
Пример
<style>
.bg-4 {
background-color: #2f2f2f;
color: #ffffff;
}
</style>
<footer class="container-fluid bg-4 text-center">
<p>Bootstrap Theme Made By <a href="https://html5css.ru">html5css.ru</a></p>
</footer>
Результат:
Последний штрих
Персонализация темы путем добавления шрифта, который вам нравится. Мы использовали "Монтсеррат" из библиотеки шрифтов Google.
Ссылка на шрифт в <head> разделе:
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
Затем вы можете использовать его на странице:
Пример
body {
font: 20px "Montserrat", sans-serif;
line-height: 1.8;
color: #f5f6f7;
}
p {font-size: 16px;}
We have also created a "helper" margin class to add extra space
where we think it's needed; usually after each <h3> and <img> element.
Пример
.margin {margin-bottom: 45px;}
