Домой / Самообразование / Верстка в bootstrap

Верстка в bootstrap

Верстка в bootstrap
Верстка в bootstrap

Верстка в bootstrap простой темы для WordPress

Здравствуйте, уважаемые постоянные посетители и гости моего сайта «Блог Валерия Бородина»!


Сейчас мы с вами сверстаем простую тему для WordPress в bootstrap!

Я не буду вдаваться в подробности, например bootstrap это ...

Я уже рассказывал о bootstrap это что такое и для чего он нужен в своем материале.

Посмотреть его можно здесь.

А мы сегодня займемся другим делом, это «Верстка в bootstrap простой темы для WordPress».

Как все делать и с чего начинается верстка в bootstrap разберем в подробностях.

Посмотрим видеоурок для наглядности о верстке в bootstrap.

Я думаю, что смогу вам донести о bootstrap все полезные и необходимые для вебмастера-верстальщика его качества и преимущества верстки в bootstrap уникальных, отзывчивых и адаптивных тем для WordPress!

И так начнем:

Для начала нам нужен сам bootstrap. Качаем его бесплатно вот здесь: скачать bootstrap
Устанавливаем WordPress или он уже у вас установлен. Создаем папку testthemas на своем хостинге по адресу http://ваш сайт/wp-content/themes/.
Он уже должен быть у Вас!
Если его нет, тогда предлагаю приличный хостинг с прекрасной техподдержкой и автоустановкой всех приложений, не дорогой, многфункциональный, которым уже много лет сам пользуюсь и очень доволен: МакХост
Затем закачиваем и распаковываем bootstrap в созданную папку testthemas. Должно выглядеть вот так:

распаковываем bootstrap
распаковываем bootstrap

И создадим еще папки и файлы в ранее созданной нами папке testthemas. Какие смотрим далее.

 

Верстка в bootstrap простой темы для WordPress

Урок первый: Создадим макет для нашей темы в bootstrap для WordPress

Для макета нашей новой темы создаем файл index.php и добавляем в него вот этот стандартный код:

<!DOCTYPE html>
<html lang="ru">
 <head>
 <meta charset="utf-8">
 <title>Тема для WordPress</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="author" content="Имя автора">

 <meta content="Название сайта" />
 <meta content="website" />
 <meta content="Ссылка на изображение логотипа" />

 <link href="./css/bootstrap.css" rel="stylesheet">
 <link href="./style.css" rel="stylesheet">
 <link href="./css/bootstrap-responsive.css" rel="stylesheet">

 <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
 <!--[if lt IE 9]>
 <script src="./js/html5shiv.js"></script>
 <![endif]-->
 </head>

Теперь создаем файл стилей style.css и скачиваем вот этот файл, который вам пригодится в дальней шей работе. Распаковываете его и из папки dist и копируете файл html5shiv.js, который вставляете в js папку.

Следующее действие разметка нашей темы:

Добавляем этот код в файл index.php ниже закрывающегося тега head.

<body>
<div id="wrap"><!-- Фиксированная респонсив навигация -->
<header>

<div class="navbar navbar-fixed-top">

<div class="navbar-inner">

<div class="container"><a class="brand" href="#">Имя сайта</a>

<div class="nav-collapse collapse">
<menu></menu></div>
</div>
</div>
</div>
</header>

<div class="container">

<div class="row">

<div class="span7">Тест контент</div>

<div class="span3">
<aside>Тест сайдбар</aside></div>
</div>
</div>

 <!-- Прижимаем футер к низу -->

<div id="push"></div>
</div>

<footer>

<div id="footer">

<div class="container">Подвал</div>
</div>
</footer>
    <!-- Подключаем скрипты --><script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
</body>
</html>

И добавляем вот этот код в наши стили в файл style.css

header {
       padding-bottom: 70px;
     }
   /* Стили для подвала внизу страницы */
     html,
     body {
       height: 100%;
     }

     #wrap {
       min-height: 100%;
       height: auto !important;
       height: 100%;

       margin: 0 auto -60px;
     }

     /* Высота футера */
     #push,
     #footer {
       height: 60px;
     }
     #footer {
       background-color: #f5f5f5;
     }

     @media (max-width: 767px) {
       #footer {
         margin-left: -20px;
         margin-right: -20px;
         padding-left: 20px;
         padding-right: 20px;
       }
     }

   /* Ширна контейнера */
     .container {
       max-width:970px;
       width: auto;
     }
     }
     .container .credit {
       margin: 20px 0;
     }

Теперь разметка нашей новой тестовой темы готова. Она отзывчивая. Посмотрите, как она будет реагировать на изменения размера окна вашего браузера. Видите!
Видеоурок: Верстка в bootstrap

Верстка в bootstrap простой темы для WordPress Урок первый создание макета темы

Во второй части урока мы с вами займемся оформлением нашей новой темы для WordPress.
Если Вам понравилась статья отметьте это в комментариях!
Спасибо за внимание!
До скорой встречи в следующем уроке:Верстка в bootstrap Урок второй Оформление темы.

Все уроки по верстке в bootstrap адаптивной, уникальной темы для WordPress



Про Валерий Бородин

Проверьте также

обновить WordPress

Как обновить WordPress безопасно и без проблем?

Как самому обновить WordPress безопасно и без проблем для сайта? Здравствуйте, уважаемые друзья и гости …

  • http://martens-05.ru Алена

    Ваша тема сайта сверстана в bootstrap? Хочу попробовать сделать,моя тема сайта не устраивает.

    • https://pribylwm.ru/ Валерий Бородин

      Здравствуйте, Алена! Спасибо, что подписались на мой канал в Youtube! Вы хотите сами верстать шаблон?

      • http://martens-05.ru Алена

        Да, хочу попробовать, мне это интересно! Кстати, ссылка, где скачать bootstrap,выдает ошибку. Я сама нашла сайт, но, не пойму, какие компонеты включить для скачивания. Я так поняла, не все могут понадобиться.

        • https://pribylwm.ru/ Валерий Бородин

          Спасибо Алена за то, что подсказали на счет битой ссылки, исправил. Да, там в скачанных файлах нужно выбирать нужные. Сейчас уже точно не скажу, давно писал и уже немного подзабыл. Но почитайте и я думаю разберетесь. Удачи! Если, что пишите!

          • http://martens-05.ru Алена

            Спасибо! Буду заходить к вам на блог, много интересного и полезного на вашем сайте.

          • https://pribylwm.ru/ Валерий Бородин

            Спасибо Вам, Алена! Я очень рад, что мой блог вам понравился и пригодился. Жду Вас в гости! Я буду к Вам заходить!

Блог Валерия Бородина: LiveInternet число посетителей за сегодня Блог Валерия Бородина: данные за сегодня (Yandex.Metrika) Блог Валерия Бородина: рейтинг МайлРу