Как сделай сайт с bootstrap

Добавлено: 23.02.2018, 13:01 / Просмотров: 85532
Закрыть ... [X]

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


30.11.2016


15:13


4465


пока нет


Создание простого сайта на 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> bootstrap <!-- 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. Практика по пройденному материалу

Предыдущая запись
Тесты Bootstrap 3 онлайн. Основы Bootstrap 3 для начинающих Следующая запись
Бесплатный курс по основам Bootstrap3

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


Источник: http://stepkinblog.ru/bootstrap/sozdanie-prostogo-sajta-na-bootstrap-3-praktika-po-projdennomu-materialu.html/



Рекомендуем посмотреть ещё:



Начало работы Bootstrap по-русски Основной маркетинговый сайт Как чтонибудь сделать для кукол


Как сделай сайт с bootstrap Как сделай сайт с bootstrap Как сделай сайт с bootstrap Как сделай сайт с bootstrap Как сделай сайт с bootstrap Как сделай сайт с bootstrap Как сделай сайт с bootstrap Как сделай сайт с bootstrap

ШОКИРУЮЩИЕ НОВОСТИ