Latest web development tutorials
×

Bootstrap курс

Bootstrap курс Bootstrap Краткое введение Bootstrap Установка по окружающей среде

Bootstrap CSS

Bootstrap CSS обзор Bootstrap Grid System Bootstrap наборный Bootstrap код Bootstrap таблица Bootstrap форма Bootstrap кнопка Bootstrap изображение Bootstrap Вспомогательный класс Bootstrap Отзывчивый Утилиты

Bootstrap Компоненты макета

Bootstrap значок шрифты Bootstrap Выпадающее меню Bootstrap Группа кнопок Bootstrap Кнопка в раскрывающемся меню Bootstrap группа Поле ввода Bootstrap элементы навигации Bootstrap Панель навигации Bootstrap панировочные сухари Bootstrap пейджинг Bootstrap этикетка Bootstrap знак Bootstrap Большой экран Bootstrap Название страницы Bootstrap Миниатюры Bootstrap предупреждение Bootstrap Шкала прогресса Bootstrap Мультимедийные Bootstrap Список групп Bootstrap панель Bootstrap Wells

Bootstrap Виджет

Bootstrap Plug-Glance Bootstrap эффект перехода Bootstrap режимное окно Bootstrap Выпадающее меню Bootstrap Свиток монитор Bootstrap таб Bootstrap подсказки Bootstrap Всплывающее окно Bootstrap Предупреждение коробки Bootstrap кнопка Bootstrap сгиб Bootstrap карусель Bootstrap Дополнительная навигация

Bootstrap другое

Bootstrap UI редактор Bootstrap V2 курс Bootstrap HTML стандарты кодирования Bootstrap CSS стандарты кодирования

Bootstrap Профиль

цель

Bootstrap самый популярный передний конец рамки, выпустила третью версию (v3.0.0). Этот учебник будет считать вас, чтобы начать обучение Bootstrap 3.

Вы также увидите, как использовать различные рамки пользовательские функции кадра, например с использованием сетки для создания макета, навигации создается нав, используя пирушка создать выпадающий список, добавить социальные плагины и Google Map и других сторонних плагинов.

Скриншот демо


Что такое Bootstrap

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

В современном веб-разработки, есть несколько компонентов для почти всех веб-проектов, которые необходимы.

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

Кроме того, есть много других полезных интерфейсных компонентов, таких как выпадающие, навигация, модальности, Typehead, нумерацию страниц, пирушка, хлебных крошек, Tab, эскизы, заголовки и так далее.

С их помощью вы можете создать веб-проект, и дайте ему поработать, чтобы более быстро и легко.

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

Она основана на нескольких лучших практик, мы считаем, что это хорошее место, чтобы начать изучать современные возможности веб-разработки, как только вы освоили основы HTML и JavaScript / JQuery, вы можете применить эти знания в веб-разработке.

Хотя некоторые критики, все проекты, построенные Bootstrap выглядят одинаково, вам не нужно знать слишком много о HTML + CSS знания могут построить веб-сайт. Тем не менее, мы должны понимать, Bootstrap представляет собой общие рамки, как и любые другие общие вещи, которые вам нужно настроить, чтобы сделать его уникальным. Если вы хотите настроить, необходимо углубленное исследование, не существует хороший HTML + CSS база не представляется возможным.

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

Почему проект должен использовать Bootstrap?


Скачать файловую структуру и понять

Вы можете выбрать один из https://github.com/twbs/bootstrap/archive/v3.0.0.zip или https://github.com/twbs/bootstrap/releases/download/v3.0.0/bootstrap-3.0.0-dist .zip загрузить Bootstrap версии 3.0.0 на. Мы используем первый, вы можете использовать второй.

Кроме того, мы предоставляем загружаемый код содержит ссылку для загрузки первого по начальной загрузки папки кода. Эта сторона также содержит оригинал, используемый для настройки Bootstrap CSS из custom.css.

После распаковки вы найдете, в корневой папке бутстраповского-3.0.0 Некоторые файлы и папки.

Основной CSS-файл - bootstrap.css и его упрощенная версия бутстраповского-min.css, расположенный в корневой папке 'Dist' Папка '' CSS файл начальной загрузки-3.0.0 в папке.

В 'Dist' внутри, есть папка '' содержит JS основные bootstrap.js файлов JavaScript и его упрощенный вариант.

Файл в корне, есть папка отдельный '' JS содержит различные файлы различных JavaScript плагинов.

В корневом файле внутри "активов", вы найдете папку другой "Js. Это место, с подкладкой из HTML5 html5shiv.js, для получения поддержки IE8. Существует также respond.min.js файл для поддержки IE8 мультимедийных запросов. Эта папка также содержит JS плагин Bootstrap зависимых jquery.js.

В той же папке, есть папка "ICO" содержит множество мобильных устройств и иконок FavIcon.

В 'CSS' тот же путь, папка содержит файл CSS документ.

Папка '_includes' и '_Layouts' содержит некоторую структуру макета по умолчанию документа, который может быть полезен дизайн для быстрого прототипирования.

Корневая папка 'меньше' папка содержит некоторый .less файл. Если вы хотите быть разработан на основе МЕНЬШЕ, эти файлы могут быть полезны.

В корневой папке, есть некоторые файлы. Некоторые из них используются для основных прототипирование HTML файлов, некоторые из которых основаны на беседке для скомпилированного bower.json, browserstack.json. Кроме того, там composer.json и YAML файл _config.yml.

Кроме того, чтобы загрузить из данной ссылке, вы можете также использовать следующую команду, чтобы собрать все CSS, JS файлы -

$ bower install bootstrap

Вы можете скопировать отчет Bootstrap Git

git clone git://github.com/twbs/bootstrap.git

Для этого урока мы только загрузили файл Zip, он не использует.

После того, как вы узнаете этот учебник, мы рекомендуем вам Бауэр монтажной рамы, чтобы увидеть, как это работает.

NetDNA сборник поддержка и упрощенная версия Bootstrap CSS, JS и другие темы CSS. Вы можете цитировать их следующее заявление

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

Разработанный с использованием Bootstrap v3.0.0

Основные HTML

Ниже приведены основные HTML структура для нашего проекта

<! DOCTYPE HTML>
<HTML>
  <Head>
    Шаблон <Название> Bootstrap V3 </ title>
    <META NAME = "вьюпорт" содержание = "ширина = ширина устройства, начальный масштаб = 1.0">
    <! - Bootstrap ->
    <Ссылка HREF = "/ bootstrap.min.css бутстраповский-3.0.0 / расстояние / KSS" REL = "таблицы стилей" медиа = "экран">

    <! - HTML5 прокладка и поддержка Respond.js IE8 элементов HTML5 и медиа-запросов ->
    <! - [Если л IE 9]>
      <Script SRC = "самозагрузки-3.0.0 / активы / JS / html5shiv.js"> </ скрипт>
      <SCRIPT SRC = "самозагрузки-3.0.0 / активы / JS / respond.min.js"> </ SCRIPT>
    <! [Endif] ->
  </ Head>
  <Body>
    <H1> Привет, мир! </ H1>

    <- JQuery (необходимые для плагинов JavaScript Bootstrap в) ->
    <Script SRC = "// code.jquery.com/jquery.js"> </ скрипт>
    <! - Включить все скомпилированные плагины (ниже), или включать в себя отдельные файлы по мере необходимости ->
    <Script SRC = "самозагрузки-3.0.0 / расстояние / JS / bootstrap.min.js"> </ скрипт>
  </ Body>
</ HTML>

Обратите внимание , что шаблон и добавил html5shiv.js respond.min.js для получения поддержки IE8. В Bootstrap версии 3 была добавлена к этим файлам.

Мы щебет-самозагрузки файл в корневой папке папки веб-сервера, он был помещен самозагрузки-3.0.0 папку. Все HTML-файлы, которые мы создаем, будут помещены в твит-загрузчиком. Причина проиллюстрировать этот момент, чтобы упростить процесс разработки.

Настроить

Мы будем настраивать различные стили CSS коробки. Таким образом, на основе оригинального CSS не уничтожает файлы на (находится бутстраповский-3.0.0 из папки Dist) в той же папке, мы создадим отдельный файл CSS с именем custom.css. Тогда мы в HTML-файл, сразу после того, как исходного файла CSS, ссылки на файл CSS. Таким образом, мы можем переопределить стиль по умолчанию мы хотим изменить, однако, если обновить Bootstrap, исходный файл CSS не будет разрушать наш обычай на основе обновлений. Мы также рекомендуем вам следовать этому подходу в процессе развития.

Создание навигации

Для создания навигации, в HTML-файл, а затем тела после начального тега, добавьте следующий код.

<Nav класс = "Navbar Navbar-обратная Navbar фиксированной сверху" роль = "навигация">
  <Ul класс = "нав Navbar-нав">
  <Li> <a href="new.html" class="navbar-brand">
<IMG SRC = "logo.png"> </a> </ li>
  <Li класс = "активный"> <a href="#"> Главная </a> </ li>
  <Li> <a href="price.html"> Цена </a> </ li>
  <Li> <a href="contact.html"> Контактная </a> </ li>
  <Li класс = "раскрывающимся">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Social <б класс = "каретка"> </ b> </a>
        <Ul класс = "выпадающий меню">
          <LI класс = "" общественные мероприятия> <г: plusone аннотацию = "инлайн" ширина = "150"> </ г: plusone> </ li>
          <Li класс = "социального характера"> <DIV класс = "FB-типа" данных HREF = "https://developers.facebook.com/docs/plugins/~~number=plural" данные по ширине = "Ширина пикселя плагина" данные -высота = "высота пикселя плагина" данных ColorScheme = "свет" данных макет = "стандарт" данные действия = "как" данные-шоу-граней = "истинной" дата-посыла = "ложных"> < / DIV> </ li>
          <Li класс = "социального характера"> <a href="https://twitter.com/share" class="twitter-share-button"> Tweet </a>
<! Рукописные> функция (d, s, ID) {вар JS, FJS = d.getElementsByTagName (s) [0]; если {Js = d.createElement (s) (d.getElementById (ID)!); Js. ID = ID; js.src = "// platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}} (документ," сценарий "," Twitter-WJS "); < / скрипт> </ li>
       </ UL>
      </ Li>
  </ UL>
</ Nav>

Для навигации, использование Bootstrap 'Navbar' класс в иерархии контейнера. Таким образом, он будет назначен, чтобы держать весь элемент навигации Nav.

Мы использовали класс 'Navbar-обратное ", чтобы изменить цвет по умолчанию на панели навигации, использование света до темноты, а не по умолчанию. класс 'Navbar фиксированной сверху' гарантирует, что, когда мы прокручиваем вниз HTML-страницы, панель навигации в верхней части фиксированного положения.

В Bootstrap v3.0.0, когда навигация создается при использовании роли = "навигация" является новым. Bootstrap рекомендуют такое использование, для легкого доступа к панели навигации.

На данный момент, мы должны увеличить тело документа в custom.css 'отступа-топ: 80px; ". Вы добавляете к телу в верхней части заполненных пикселей могут быть разными, но если вы этого не сделаете, верхняя часть панели навигации после того, будет скрыт.

В контейнере нав, мы имеем класс "нав" и "NavBar-нав 'неупорядоченного списка. В этом неупорядоченный список, каждый элемент списка содержит навигационную ссылку.

класс "Navbar-бренд" для представления торговой марки. Мы использовали изображение. Поскольку высота высоты изображения больше, чем базовая панель навигации, где мы делаем некоторые настройки. '.navbar-Нав> li> а' 'высота строки' свойство от первоначального 20px по умолчанию для 50px, изменить размер шрифта в 16px.

Ссылка справа, мы увеличили выпадающий список. Для связанной с Ли добавил к классу '' ниспадающего, с последующим добавлением 'выпадающий-переключатель' и якорь 'Caret' с двумя классом. Якорь нашего проекта на самом деле содержит якорный текст социальные. Это литий содержит неупорядоченный список, каждый элемент списка в вложенном списке показаны в следующем окне содержит ссылку.

В раскрывающемся списке, который мы добавили социальный плагин. Первый содержит литий Google Plus знак, а второй содержит Li тег Facebook, а третий содержит дисплей литий тегов кнопки Twitter и некоторые JS скрипт.

Кроме того, вы должны начать после тега тела, добавьте следующую разметку и сценарии, чтобы сделать Facebook кнопка работает

<Div ID = "FB-корень"> </ DIV>

(Функция (d, s, ID) {
  вар JS, FJS = d.getElementsByTagName (s) [0];
  если (d.getElementById (ID)) возвращение;
  ЯШ = d.createElement (s); js.id = ID;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore (JS, FJS);
} (Документ, 'сценарий', 'facebook-jssdk'));

Для того, чтобы Twitter кнопку работы, мы в конце концов перед тегом тела, добавьте следующий скрипт

(Функция () {
    вар ро = document.createElement ( 'сценарий'); po.type = 'текст / JavaScript'; po.async = TRUE;
    po.src = 'https://apis.google.com/js/plusone.js';
    переменная s = document.getElementsByTagName ( 'сценарий') [0]; s.parentNode.insertBefore (ро, s);
  }) ();

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

.socials {
обивка: 10px;
}

Это завершает нашу навигацию.

Создание слайд-шоу с помощью пирушки

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

<Div ID = "карусельного пример-родовое" класс = "карусельный слайд">
  <! - Индикаторы ->
  <КлассПерегр = "карусельного индикаторы">
    <Li данных целевых = "# карусельного пример-родовое" данных слайд-к = "0" класс = "активный"> </ li>
    <Li данных целевых = "# карусельного пример-родовое" данных слайд-к = "1"> </ li>
    <Li данных целевых = "# карусельного пример-родовое" данных слайд-к = "2"> </ li>
  </ Ol>

  <! - Обертка для слайдов ->
  <Div класс = "карусельного внутренний">
    <Div класс = "элемент активен">
      <Img SRC = "computer.jpg" Alt = "...">
      <Div класс = "карусельного надпись">
        <H1> Большие рабочие столы везде </ h1>
        <P> <кнопка класс = "БТН БТН-успех БТН-ДЖИ"> Попробуйте 30-дневную пробную версию сейчас </ p>
      </ Div>
    </ Div>
    <Div класс = "пункт">
      <Img SRC = "mobile.jpg" Alt = "...">
      <Div класс = "карусельного надпись">
        <H1> Черни превосходящими рабочие столы </ h1>
        <P> <кнопка класс = "БТН БТН-успех БТН-ДЖИ"> Попробуйте 30-дневную пробную версию сейчас </ p>
      </ Div>
    </ Div>
<Div класс = "пункт">
      <Img SRC = "cloud1.jpg" Alt = "...">
      <Div класс = "карусельного надпись">
        <H1> Компании внедряют Облачные вычисления быстро </ h1>
        <P> <кнопка класс = "БТН БТН-успех БТН-ДЖИ"> Попробуйте 30-дневную пробную версию сейчас </ p>
      </ Div>
    </ Div>
  </ Div>
  <! - Органы управления ->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <Span класс = "значок-пред"> </ SPAN>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <Span класс = "значок-дальше"> </ SPAN>
  </a>
</ Div>
</ Div>

Есть четыре секции в пирушка. Основной контейнер с использованием 'карусельный слайд' DIV тег с определениями классов.

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

Затем каждый слайд (изображение) помещается с классом 'пункта' от сНу тега. Каждый элемент вложен с классом "карусельного подписи" в дел. карусельного заголовок содержит изображение, отображаемое вместе с названием тега. Пункт содержит h1 и кнопку, вы можете также включать в себя другие собственную марку.

Последняя часть используется для управления при просмотре слайд следующий / предыдущий слайд. Это использование «левых» и «карусельного контроль» по определению класса, используя следующую «право» и «карусельного управления» определение класса.

"Икона-пред 'и' значок-следующий" класс для следующего и предыдущего значка.

Мы сделали некоторые настройки по умолчанию в пирушки. Мы надеемся, что подписи, индикаторы и следующая / предыдущая значки отображаются на верхней части расположения по умолчанию несколько пикселей.

Для этого мы добавим следующие стили custom.css файла

.carousel-внутренняя .item .carousel-заголовок {
позицию: абсолютная;
верх: 200px
}
.carousel-индикаторы {
позицию: абсолютная;
верх: 400px;
}
.navbar {
краю дна: 0;
}
.navbar-нав> Li> а {
высота строки: 50px;
Размер шрифта: 16px
}

Мы также настроить h1, добавить к нему нижнюю границу 30 пикселей.

h1 {
  краю дна: 30px
  }

изображение Response

Возможно, вы заметили, что каждое изображение на слайде, мы использовали 'IMG-отзывчивую' класс. Это бутстраповской v3.0.0 новые возможности. С помощью тега класса 'IMG реагирующих' IMG, Bootstrap так что реакция изображения.

Создать сетку

В следующих слайдах мы использовали сетку, чтобы поместить содержимое. Имея класс '' контейнер из DIV начинают сетку. Обратите внимание, что мы собираемся разработать адаптивный веб-сайт, вместо предыдущей версии Bootstrap, где контейнер имеет один класс, по умолчанию реагирует.

Контейнер DIV с вложенными несколько класса DIV 'строки' (первая строка из трех, вторая линия имеет шесть), чтобы создать бутстраповской линии сетки.

Каждая строка имеет с классом 'Col-ху' из DIV, чтобы создать столбцы. Величина х может быть: хз для мобильных устройств для планшетных ПК см, д.м.н. для ноутбуков и меньшего экрана рабочего стола для Lg большой экран рабочего стола. Это первый метод. Величина у может быть любое целое положительное число, хотя общее количество столбцов в сетке не должно быть не более 12. В нашем проекте, для простоты мы использовали Л.Г., но так как мы уже сделали это, вы можете получить телефон или планшет для просмотра сайта проекта для сравнения.

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

В этом примере, мы хотим, чтобы ширина столбца из первых трех строк равны, поэтому мы используем для всех столбцов 'Col-Л.Г.-4'. Во втором ряду, мы хотим шесть столбцов одинаковой ширины, так что мы используем для всех столбцов 'Col-Л.Г.-2'.

Вот тег, который содержит сетку из двух строк, первая строка есть три, вторая строка имеет шесть.

<Div класс = "строка Бароне">
<Div класс = "Col-Л.Г.-2">
<P> <IMG SRC = "../ сор-содержание / добавления / 2013/10 / php.png"> </ p>
</ Div>
<Div класс = "Col-Л.Г.-2">
<P> <IMG SRC = "../ сор-содержание / добавления / 2013/10 / MySQL-logo.jpg"> </ p>
</ Div>
<Div класс = "Col-Л.Г.-2">
<P> <IMG SRC = "../ сор-содержание / добавления / 2013/10 / JavaScript-logo.png"> </ p>
</ Div>
<Div класс = "Col-Л.Г.-2">
<P> <IMG SRC = "../ сор-содержание / добавления / 2013/10 / java.jpg"> </ p>
</ Div>
<Div класс = "Col-Л.Г.-2">
<P> <IMG SRC = "../ сор-содержание / добавления / 2013/10 / postgresql.png"> </ p>
</ Div>
</ Div>

У нас есть час и нижний колонтитулы со следующими метками конца сетки

<Hr>
<P> Copyright @ 2013-14 по ToDo App. </ P>

Используйте таблицу

В price.html странице нашего проекта, мы используем форму, чтобы сделать прайс-лист, обозначенный следующим образом

<Таблица класс = "таблица таблица каймой">
          <THEAD>
            <Tr>
              <Th> Особенности </ й>
              <Th> Индивидуальный </ й>
              <Th> Небольшая команда </ й>
              <Th> Средние команды </ й>
              <Th> Предприятие </ й>
            </ TR>
          </ THEAD>
          <TBODY>
            <Tr>
              <TD> <h3> Число пользователей </ h3> </ TD>
              <TD> <пролет класс = "значок"> Один </ SPAN> </ TD>
              <TD> <пролет класс = "значок"> Пять </ SPAN> </ TD>
              <TD> <пролет класс = "значок"> Fifteen </ SPAN> </ TD>
              <TD> <пролет класс = "значок"> Безграничный </ SPAN> </ TD>
           </ TR>
            <Tr>
              <TD> <h3> Pro обучение </ h3> </ TD>
              <TD> <пролет класс = "значок"> Нет </ SPAN> </ TD>
              <TD> <пролет класс = "значок"> Да </ SPAN> </ TD>
              <TD> <пролет класс = "значок"> Да </ SPAN> </ TD>
              <TD> <пролет класс = "значок"> Да </ SPAN> </ TD>
           </ TR>
            <Tr>
              <TD> <h3> Форум Поддержка </ h3> </ TD>
              <TD> <пролет класс = "значок"> Да </ SPAN> </ TD>
              <TD> <пролет класс = "значок"> Да </ SPAN> </ TD>
              <TD> <пролет класс = "значок"> Да </ SPAN> </ TD>
              <TD> <пролет класс = "значок"> Да </ SPAN> </ TD>
           </ TR>
	<Tr>
              <TD> <h3> В лицо поддержка </ h3> </ TD>
              <TD> <пролет класс = "значок"> Нет </ SPAN> </ TD>
              <TD> <пролет класс = "значок"> Нет </ SPAN> </ TD>
              <TD> <пролет класс = "значок"> Да </ SPAN> </ TD>
              <TD> <пролет класс = "значок"> Да </ SPAN> </ TD>
           </ TR>
	   <Tr>
              <TD> <h3> Еженедельные вебинары </ h3> </ TD>
              <TD> <пролет класс = "значок"> Нет </ SPAN> </ TD>
              <TD> <пролет класс = "значок"> Нет </ SPAN> </ TD>
              <TD> <пролет класс = "значок"> Да </ SPAN> </ TD>
              <TD> <пролет класс = "значок"> Да </ SPAN> </ TD>
           </ TR>
	 <Tr>
              <TD> <h3> Цена </ h3> </ TD>
              <TD> <кнопка тип = "кнопка" класс = "БТН БТН-предупреждение БТН-ДЖИ"> $ 9 / месяц </ кнопка> </ TD>
              <TD> <кнопка тип = "кнопка" класс = "БТН БТН-предупреждение БТН-ДЖИ"> $ 19 / месяц </ кнопка> </ TD>
              <TD> <кнопка тип = "кнопка" класс = "БТН БТН-предупреждение БТН-ДЖИ"> $ 49 / месяц </ кнопка> </ TD>
              <TD> <кнопка тип = "кнопка" класс = "БТН БТН-предупреждение БТН-ДЖИ"> $ 99 / месяц </ кнопка> </ TD>
           </ TR>
	    <Tr>
              <TD> </ TD>
              <TD> <кнопка тип = класс "Кнопка" = "БТН БТН-успех БТН-ДЖИ"> Купить </ Button> </ TD>
              <TD> <кнопка тип = "кнопка" класс = "БТН БТН-успех БТН-ДЖИ" "> Купить </ Button> </ TD>
              <TD> <кнопка тип = "кнопка" класс = "БТН БТН-успех БТН-ДЖИ" "> Купить </ Button> </ TD>
              <TD> <кнопка тип = "кнопка" класс = "БТН БТН-успех БТН-ДЖИ" "> Купить </ Button> </ TD>
           </ TR>
          </ TBODY>
        </ Table>

Bootstrap с использованием оригинального CSS файл 'таблицы' и 'стол каймой' два класса. Но мы должны сделать следующую таблицу, добавив некоторые пользовательские файлы CSS в customize.css выглядят по- разному

й {
цвет фона: # 428bca;
цвет: # ec8007;
г-индекс: 10;
Текст-тень: 1px 1px 1px #fff;
размер шрифта: 24px;
}

Используйте значок

Мы используем класс "значок", чтобы отобразить текст в таблице. Мы имеем следующий пользовательский CSS с классом значка

.badge {
цвет фона: # 428bca;
цвет: #fff;
размер шрифта: 22px;
}

Для просмотра этой страницы и contact.html страницы, мы добавили еще одно правило CSS в customize.css

.container> h1 {
выравнивания текста: центр;
}

Это позволяет h1 по центру.

Использование форм

В файле contact.html, мы создаем три столбца, первый столбец, мы встроить форму. Используйте таблицу стилей по умолчанию.

<Форма класс = "Форма-горизонтальная" роль = "форма">
  <Div класс = "Форма-группа">
    <Ярлык = "Отправить" класс = "Col-Л.Г.-2 управления метки"> E-mail </ Label>
    <Div класс = "Col-Л.Г.-10">
      <Тип входного = класс "электронная почта" = "форма-контроль" ID = "электронная почта" заполнителем = "Отправить">
    </ Div>
  </ Div>
  <Div класс = "Форма-группа">
    <Ярлык = "имя" класса = "Col-Л.Г.-2 управления метки"> Имя </ Label>
    <Div класс = "Col-Л.Г.-10">
      <Тип входного = "текст" класс = "форма-контроль" ID = "имя" заполнитель = "Name">
    </ Div>
  </ Div>
   <Div класс = "Форма-группа">
    <Ярлык = "страна" класс = "Col-Л.Г.-2 контрольно-метка"> Страна </ метка>
    <Div класс = "Col-Л.Г.-10">
      <Выбрать>
      <Option> США </ вариант>
      <Option> Индия </ вариант>
      <Option> Великобритания </ вариант>
      <Option> Autralia </ вариант>
      </ Select>
    </ Div>
  </ Div>
<Div класс = "Форма-группа">
    <Ярлык = "убывание" класс = "Col-Л.Г.-2 контрольно-метка"> Сообщение </ метка>
    <Div класс = "Col-Л.Г.-10">
      <TEXTAREA строк = "5" смещ_по_столбцам = "50"> </ TextArea>
    </ Div>
  </ Div>

  <Div класс = "Форма-группа">
    <Div класс = "Col-Л.Г.-офсет-2 Col-Л.Г.-10">
      <Тип Button = "отправить" класс = "БТН БТН-умолчанию"> Отправить </ кнопка>
    </ Div>
  </ Div>
</ Форма>

«Форма-горизонтальный" класс позволяет форма поддерживать горизонтальное выравнивание. Обратите внимание , что для простоты доступа, добавить роль = "форма". Это версия 3.0.0 из новых функций.

Чтобы найти каждый управления формы, Bootstrap 3.0.0 использует новый класс 'форм-группы'.

На этой странице, второй столбец сетки, мы просто помещается какой-нибудь текст.

Добавить Google Maps

В contact.html странице, третий столбец сетки, мы добавили карту Google (Google Maps). Для этого мы используем следующие теги

<Div ID = "map_canvas"> </ DIV>
  </ Div>

Следующие JS добавляется в заголовок HTML-файла в заголовке

Функция инициализации () {
        вар map_canvas = document.getElementById ( 'map_canvas');
        вар map_options = {
          центр: новый google.maps.LatLng (23.244066, 87.861276),
          зум: 8,
          MapTypeId: google.maps.MapTypeId.ROADMAP
        }
        вар карта = новый google.maps.Map (map_canvas, map_options)
      }
      google.maps.event.addDomListener (окно, "нагрузка", инициализация);

Перед сказал перед JS, необходимо добавить следующий тег сценария

<Script SRC = "http://maps.googleapis.com/maps/api/js?sensor=false"> </ скрипт>

Для того, чтобы корректно отобразить карту, необходимо добавить следующие стили custom.css

#map_canvas {
        ширина: 400px;
        высота: 400px;
}

Это, как создать простой проект, основанный на Bootstrap v3.0.0. Но мы лишь коснулись поверхности, в последующих главах будет объяснить более подробно.