Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

Главная » Основы Bootstrap 3 » Создание простого сайта на Bootstrap 3. Практика по пройденному материалу

30.11.2016


15:13


6208


пока нет


Создание простого сайта на Bootstrap 3. Практика по пройденному материалу

Создание простого сайта на Bootstrap 3. Практика по пройденному материалу

Всем привет!
Вот и подошли мы к завершению изучения основ Bootstrap.
Сегодня будем учиться использовать на практике все знания, которые вы получили, изучая Bootstrap  на моем блоге.
Что я вам предлагаю?
Я предлагаю вместе со мной создать простой сайт-визитку с использованием Bootstrap 3.
Тип сайта – портфолио для художника.
Вот такой схеме должен соответствовать сайт, над которым будем работать:

Создание простого сайта на Bootstrap 3. Практика по пройденному материалу

Структура сайта:
вся информация будет на одной веб-странице, но скрыта.
То есть, при нажатии по какому-либо разделу меню, будет отображаться только тот контент, который принадлежит этому же разделу меню. Макет будет полностью адаптивный под мобильные устройства.
В конце урока вы сможете посмотреть результат, а художники, которым нужен простенький адаптивный сайт, смогут скачать готовый макет.

План действий:

  1. Подключение файлов bootstrap к «index.html»
  2. Создание меню
  3. Создание контента
  4. Создание фотогалереи
  5. Вставка формы
  6. Проверка работоспособности сайта

1. Подключение файлов bootstrap к «index.html»

Расписывать, как подключить файлы «Bootstrap» я не буду, так как это уже пройденный материал, и кто не помнит, что за чем нужно делать, повторите вот этот урок (Подключение.).

Итак, создайте файл «index.html» вот с таким кодом:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 3 на StepkinBLOG.RU</title>

<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>
</html>

2.Создаем меню

Теперь между тегами <body></body> вставляем горизонтальное меню (читайте тут).
Создаем меню с такими разделами:
- ГЛАВНАЯ;
- ОБО МНЕ;
- ПОРТФОЛИО;
- БЛОГ;
- КОНТАКТЫ.

<nav role="navigation" class="navbar navbar-default navbar-static-top col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="http://stepkinblog.ru/" class="navbar-brand">STEPKINBLOG.RU</a>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#home" data-toggle="tab">ГЛАВНАЯ</a></li>
<li><a href="#obo_mne" data-toggle="tab">ОБО МНЕ</a></li>
<li><a href="#portfolio" data-toggle="tab">ПОРТФОЛИО</a></li>
<li><a href="#blog" data-toggle="tab">БЛОГ</a></li> 
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#contakt" data-toggle="tab">КОНТАКТЫ</a></li>
</ul>
</div>
</nav>

Помните, выше я уточнял, что вся информация будет на одной веб-странице, но вся сразу видна не будет? Так вот, для реализации такого эффекта я буду использовать вкладки.
В ссылке в меню обязательно должны присутствовать:

data-toggle="tab"

href="#уникальное название"

В вашем случае копируйте все так, как сейчас есть.
Должен получиться вот такой вид:

Создание простого сайта на Bootstrap 3. Практика по пройденному материалу

3.Создаем контент

Теперь работаем над контентом.
Вставим его сразу после меню, но для начала я его отцентрирую через класс «container».

 <div class="container">.......</div>

Далее, я думаю, для сайта нужна шапка (heder).
Скачайте уже готовый «heder.jpg» или же создайте свой:

Создание простого сайта на Bootstrap 3. Практика по пройденному материалу
Скачать

Не забывайте «heder.jpg» спрятать в папку «images».
Предлагаю шапку разместить сразу после div с классом «container»:

<div class="container">
<!-- Шапка сайта -->
<img src="images/heder.jpg" class="img-responsive" alt="...">

Для адаптивности картинки, добавьте класс «img-responsive» к img.
Сам текст будет находиться вот в этом коде

<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<!-- Контент -->
</div>
</div>

Контент будет в сетке (col-lg-12 col-md-12 col-sm-12 col-xs-12).

Свяжите для каждого div свой  id, то есть, если ссылка в меню была:

<a href="#obo_mne" data-toggle="tab">ОБО МНЕ</a>

обратите внимание на «#obo_mne»
То в контенте для div,  id будет «obo_mne»:

<div class="tab-pane fade" id="obo_mne">ОБО МНЕ</div>

Вот так будет выглядеть код с контентом:

<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active fade in" id="home">Главная страница</div>
<div class="tab-pane fade" id="obo_mne">ОБО МНЕ</div>
<div class="tab-pane fade" id="portfolio">ПОРТФОЛИО</div>
<div class="tab-pane fade" id="blog">БЛОГ</div>
<div class="tab-pane fade" id="contakt">КОНТАКТЫ</div>
</div>

Вот так будет выглядеть код с контентом + шапка сайта :

<div class="container">
<!-- Шапка сайта -->
<img src="images/heder.jpg" class="img-responsive" alt="...">

<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<!-- Контент -->
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active fade in" id="home"><h2>Главная страница</h2> </div>
<div class="tab-pane fade" id="obo_mne"><h2>Обо мне </h2> </div>
<div class="tab-pane fade" id="portfolio"> <h2>Портфолио</h2> </div>
<div class="tab-pane fade" id="blog"><h2>Блог</h2> </div>
<div class="tab-pane fade" id="contakt"><h2>Контакты</h2> </div>
</div>

</div>
</div>
</div>

 

4.Создаем фотогалерею

Скажите, может ли быть портфолио художника без фотогалереи его работ?
В разделе «ПОРТФОЛИО» сделаем фотогалерею.
Создайте папку «image-gallery». В эту папку закиньте фотографии (ваших) работ.

<div class="row">
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="image-gallery/kartinka.jpg">
<img class="img-responsive" src="image-gallery/kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="image-gallery/kartinka.jpg">
<img class="img-responsive" src="image-gallery/kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="image-gallery/kartinka.jpg">
<img class="img-responsive" src="image-gallery/kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="image-gallery/kartinka.jpg">
<img class="img-responsive" src="image-gallery/kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="image-gallery/kartinka.jpg">
<img class="img-responsive" src="image-gallery/kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="image-gallery/kartinka.jpg">
<img class="img-responsive" src="image-gallery/kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="image-gallery/kartinka.jpg">
<img class="img-responsive" src="image-gallery/kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="image-gallery/kartinka.jpg">
<img class="img-responsive" src="image-gallery/kartinka.jpg" />
</a>
</div>

</div>

Естественно, в коде замените названия картинок своими, так как у меня «kartinka.jpg».

И в самом конце добавляем сразу перед </body> вот этот код:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a.fancyimage").fancybox();
});
</script>
<!-- подключение CSS файла Fancybox -->
<link rel="stylesheet" href="fancybox/jquery.fancybox.css" type="text/css" media="screen" />
<!-- Подключение JS файла Fancybox -->
<script type="text/javascript" src="fancybox/jquery.fancybox.pack.js"></script>

5.Вставляем форму

Сегодня без формы обратной связи не обойдется ни один сайт. В «Контакты» я предлагаю указать не только адрес или данные, чтобы связаться с вами, но дать возможность отправить письмо прямо с сайта.
Для формы достаточно три поля:

1. Имя человека
2. Электронная почта
3. Поле для ввода сообщения

Если есть желание продолжить список, например, поле для ввода телефона, год рождения и смерти (ой, это не сюда :mrgreen:, то можете посмотреть урок№14.

Внимание! Во избежание лишних вопросов, уточняю: форма – это только внешний вид. Чтобы она заработала (чтобы приходили письма на почту), нужен обработчик php.

Итак, вставляем код формы вот сюда:

<div class="tab-pane fade" id="contakt">
<h2>Контакты</h2>
<!-- здесь будет форма -->
</div>

А вот и сама форма:

<form>
<div class="row">
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
<input name="name" type="text" class="form-control" placeholder="Ваше имя*">
</div>
</div>
<br />
<div class="row">
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
<input name="email" type="text" class="form-control" placeholder="Электронная почта*">
</div>
</div>

<br />
<div class="row">
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
<textarea name="body" cols="1" rows="5" class="form-control"/></textarea>
</div>
</div>
<br />
<button type="submit" class="btn btn-default">Отправить</button>
</form>

6.Проверка работоспособности сайта

Вот и подошли мы к завершению запланированных работ.
В итоге у вас будет:

Создание простого сайта на Bootstrap 3. Практика по пройденному материалу

А в файле «index.html» будет вот такой код:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 3 на StepkinBLOG.RU</title>
 
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
 
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav role="navigation" class="navbar navbar-default navbar-static-top col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="http://stepkinblog.ru/" class="navbar-brand">STEPKINBLOG.RU</a>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#home" data-toggle="tab">ГЛАВНАЯ</a></li>
<li><a href="#obo_mne" data-toggle="tab">ОБО МНЕ</a></li>
<li><a href="#portfolio" data-toggle="tab">ПОРТФОЛИО</a></li>
<li><a href="#blog" data-toggle="tab">БЛОГ</a></li> 
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#contakt" data-toggle="tab">КОНТАКТЫ</a></li>
</ul>
</div>
</nav>

<div class="container">
<!-- Шапка сайта -->
<img src="images/heder.jpg" class="img-responsive" alt="...">
 
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<!-- Контент -->
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active fade in" id="home"><h2>Главная страница</h2> </div>
<div class="tab-pane fade" id="obo_mne"><h2>Обо мне </h2> </div>
<div class="tab-pane fade" id="portfolio"> <h2>Портфолио</h2> 
<div class="row">
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="image-gallery/kartinka.jpg">
<img class="img-responsive" src="image-gallery/kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="image-gallery/kartinka.jpg">
<img class="img-responsive" src="image-gallery/kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="image-gallery/kartinka.jpg">
<img class="img-responsive" src="image-gallery/kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="image-gallery/kartinka.jpg">
<img class="img-responsive" src="image-gallery/kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="image-gallery/kartinka.jpg">
<img class="img-responsive" src="image-gallery/kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="image-gallery/kartinka.jpg">
<img class="img-responsive" src="image-gallery/kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="image-gallery/kartinka.jpg">
<img class="img-responsive" src="image-gallery/kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="image-gallery/kartinka.jpg">
<img class="img-responsive" src="image-gallery/kartinka.jpg" />
</a>
</div>
 
</div>
</div>
<div class="tab-pane fade" id="blog"><h2>Блог</h2> </div>
<div class="tab-pane fade" id="contakt"><h2>Контакты</h2>
<form>
<div class="row">
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
<input name="name" type="text" class="form-control" placeholder="Ваше имя*">
</div>
</div>
<br />
<div class="row">
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
<input name="email" type="text" class="form-control" placeholder="Электронная почта*">
</div>
</div>
 
<br />
<div class="row">
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
<textarea name="body" cols="1" rows="5" class="form-control"/></textarea>
</div>
</div>
<br />
<button type="submit" class="btn btn-default">Отправить</button>
</form>
</div>
</div>
 
</div>
</div>
</div>
 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a.fancyimage").fancybox();
});
</script>
<!-- подключение CSS файла Fancybox -->
<link rel="stylesheet" href="fancybox/jquery.fancybox.css" type="text/css" media="screen" />
<!-- Подключение JS файла Fancybox -->
<script type="text/javascript" src="fancybox/jquery.fancybox.pack.js"></script>
</body>
</html>

Смотрим результат!

[смотреть результат]

А те, кто пришел сюда случайно по запросу «создать свой мини сайт для художника», могут скачать результат, который получился в процессе сегодняшней практики:

[скачать сайт для художника]

Поздравляю всех, кто изучал мои курсы от самого начала до сегодняшнего момента, с окончанием изучения основ Bootstrap3!!!!!

Удачи!

Создание простого сайта на Bootstrap 3. Практика по пройденному материалу



Случайные записи:

  1. Cкелет HTML. Основы HTML для начинающих. Урок №1
  2. Горизнтальное меню. Основы bootstrap 3 для начинающих. Урок №10
  3. Списки в CSS. Основы CSS для начинающих. Урок №10
  4. Создание простого сайта на Bootstrap 3. Практика по пройденному материалу
  5. Слои в CSS. Основы CSS для начинающих. Урок №16

Последние записи рубрики:

  1. Бесплатный курс по основам Bootstrap3
  2. Тесты Bootstrap 3 онлайн. Основы Bootstrap 3 для начинающих
  3. Создание галереи изображений. Основы bootstrap3 для начинающих. Урок №26
  4. Миниатюры. Основы bootstrap 3 для начинающих. Урок №25

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 245