Базовый шаблон

Начните с базового HTML шаблона или используйте эти примеры. Мы надеемся, что разработчики будут использовать эти шаблоны в качестве примера, а не как конечный результат.

Приведеный ниже HTML-код использует минимизированную версию Bootstrap.

<!DOCTYPE html>
<html lang="en">
  <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 101 Template</title>

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

    <!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Привет, мир!</h1>

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

Шаблоны Bootstrap. Примеры

Дополнительные шаблоны созданы на основе базового, представленного разделом выше. Также рекомендуем посмотреть советы по Настройке Bootstrap для использования вашего собственного варианта.

Использование CSS

Базовый шаблон

Базовый шаблон Bootstrap-3

Ничего лишнего, кроме основного: CSS, JavaScript и использован контейнер.

Разметка

Сетка Bootstrap

Несколько примеров разметки сетки Bootstrap с различными уровнями вложенности.


Jumbotron

Jumbotron Bootstrap

Основу макета составляет большой экран Jumbotron и базовая система разметки. В панель навигации включены поля формы.

Узкий Jumbotron

Jumbotron Bootstrap узкий

Большой экран Jumbotron на основе узкого контейнера. В качестве навигации используются навигационные табы.


Панель навигации

Навигационное меню

Меню навигации Bootstrap

Базовый шаблон, который включает панель навигации вместе с дополнительным контентом.

Статическое меню

Статическое меню Bootstrap

Базовый шаблон, который включает статичесую панель навигации вместе с дополнительным контентом.

Фиксированное меню

Фиксированное меню Bootstrap

Базовый шаблон, который включает зафиксированную панель навигации вместе с дополнительным контентом.


Базовое применение Bootstrap

Тема Bootstrap

Темы Bootstrap

Основная тема Bootstrap-3 с популярными элементами визуального оформления.

Блог

Шаблон блога на Bootstrap

Простой блог в две колонки с пользовательской навигацией, заголовком, и видом.


Обложка

Одностраничный шаблон Bootstrap

Одностраничный шаблон, растянутый на весь экран, для построения простых и красивых сайтов.

Слайдер

Шаблон Bootstrap Карусель

В слайдере можно использовать изображения и текст. В контенте страницы добавлены некоторые новые компоненты.


Выровненное меню

Выровненное меню Bootstrap

Панель навигации с выровненными по ширине ссылками меню. Внимание! Не очень дружит с WebKit.

Панель администратора

Шаблон Панели администратора на Bootstrap

Шаблон базовой структуры панели администратора с фиксированным боковым меню и панелью навигации.


Страница входа на сайт

Страница входа на сайт

Простой шаблон страницы входа на сайт.

Прижатый футер

Футер прижатый к низу страницы

Прижатый футер отображается в нижней части страницы, когда содержимое окна слишком короткое.

Прижатый футер с меню

Футер прижатый к низу страницы с меню

Прижатый футер отображается в нижней части страницы, когда содержимое окна слишком короткое. Панель навигации в верхней части.


Эксперименты

Неадаптивный Bootstrap

Неадаптивный Bootstrap

Как отключить адаптивную разметку в Bootstrap читайте в разделе Блокировка адаптивности в Bootstrap.

Отключение меню

Создание навигационного меню с возможностью его отключения при малом разрешении экрана.

Комментарии