Последние учебники веб-разработки
 

Bootstrap Theme "Simply Me"

❮ Предыдущая Следующая Глава ❯

Создать тему: "Simply Me"

Эта страница покажет вам , как построить 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>

Добавить Bootstrap 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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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>

Результат:

Кто я?

птица

Я авантюрист

Попробуй сам "

Добавить цвет фона и центра текстовых

1. Добавить пользовательский класс (.bg-1) в контейнер, чтобы добавить цвет фона.

2. Добавьте .text-center класса к центру текст внутри контейнера:

пример

<style>
.bg-1 {
    background-color: #1abc9c; /* Green */
    color: #ffffff;
}
</style>

<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>

Результат:

Кто я?

птица

Я авантюрист

Попробуй сам "

Круг изображения

Форма изображения на окружности с .img-circle класса:

пример

<img src="bird.jpg" class="img-circle" alt="Bird">

Результат:

Кто я?

птица

Я авантюрист

Попробуй сам "

Подробнее Содержание

Добавьте больше содержания и поместить его в новые контейнеры:

пример

<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>

<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>

Результат:

Кто я?

птица

Я авантюрист

Что я?

Lorem Ipsum Dolor сидеть Амет, consectetur adipiscing Элит, СЭД у eiusmod Tempor incididunt ут Лаборе и др Dolore магна aliqua. Ут enim объявления миним veniam, Quis nostrud ullamco Laboris упражнение НИСИ ут aliquip ех еа Commodo consequat.

Где меня найти?

Lorem Ipsum Dolor сидеть Амет, consectetur adipiscing Элит, СЭД у eiusmod Tempor incididunt ут Лаборе и др Dolore магна aliqua. Ут enim объявления миним veniam, Quis nostrud ullamco Laboris упражнение НИСИ ут aliquip ех еа Commodo consequat.

Попробуй сам "

Добавить Padding

Позволяет сделать контейнеры хорошо выглядеть, добавляя некоторое дополнение:

пример

<style>
.container-fluid {
    padding-top: 70px;
    padding-bottom: 70px;
}
</style>

Результат:

Кто я?

птица

Я авантюрист

Что я?

Lorem Ipsum Dolor сидеть Амет, consectetur adipiscing Элит, СЭД у eiusmod Tempor incididunt ут Лаборе и др Dolore магна aliqua. Ут enim объявления миним veniam, Quis nostrud ullamco Laboris упражнение НИСИ ут aliquip ех еа Commodo consequat.

Где меня найти?

Lorem Ipsum Dolor сидеть Амет, consectetur adipiscing Элит, СЭД у eiusmod Tempor incididunt ут Лаборе и др Dolore магна aliqua. Ут enim объявления миним veniam, Quis nostrud ullamco Laboris упражнение НИСИ ут aliquip ех еа Commodo consequat.

Попробуй сам "

Добавление кнопки

Добавьте кнопку к середине контейнера:

пример

<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>

Результат:

Что я?

Lorem Ipsum Dolor сидеть Амет, consectetur adipiscing Элит, СЭД у eiusmod Tempor incididunt ут Лаборе и др Dolore магна aliqua. Ут enim объявления миним veniam, Quis nostrud ullamco Laboris упражнение НИСИ ут aliquip ех еа Commodo consequat.

Поиск
Попробуй сам "

Добавить иконку

Добавить значок поиска на кнопку "Поиск":

пример

<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>

Результат:

Где меня найти?

Lorem Ipsum Dolor сидеть Амет, consectetur adipisicing Элит, СЭД у eiusmod Tempor incididunt ут Лаборе и др Dolore магна aliqua.

Образ

Lorem Ipsum Dolor сидеть Амет, consectetur adipisicing Элит, СЭД у eiusmod Tempor incididunt ут Лаборе и др Dolore магна aliqua.

Образ

Lorem Ipsum Dolor сидеть Амет, consectetur adipisicing Элит, СЭД у eiusmod Tempor incididunt ут Лаборе и др Dolore магна aliqua.

Образ
Попробуй сам "

Делают Изображения Отзывчивый

Добавьте .img-responsive класс для всех изображений.

Добавить display:inline к первому изображению , чтобы заставить его по центру (The .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">
Попробуй сам "

Добавление NavBar

Добавьте стандартную панель навигации в верхней части страницы с и сделать его разборные на небольших экранах:

пример

<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>

Результат:

Попробуй сам "

Стиль Navbar

Используйте 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;
}

Результат:

Попробуй сам "

Добавление Footer

Добавьте колонтитула и использовать 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="http://www.w3ii.com">www.w3ii.com</a></p>
</footer>

Результат:

Попробуй сам "

Последнее прикосновение

Сделайте свою тему, добавив шрифт, который вам нравится. Мы использовали "Монсерат" из библиотеки шрифтов Google.

Ссылка на шрифт в <head> раздел:

<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

После этого вы можете использовать его на странице:

пример

body {
    font: 20px "Montserrat", sans-serif;
    line-height: 1.8;
    color: #f5f6f7;
}

p {font-size: 16px;}

Мы также создали "вспомогательный" запас класс, чтобы добавить дополнительное пространство, где мы думаем, что это необходимо; как правило , после каждого <h3> и <img> элемент.

пример

.margin {margin-bottom: 45px;}
Попробуй сам "

Complete "Simply Me" Theme


Полное демонстрационной страницы Полный исходный код

❮ Предыдущая Следующая Глава ❯