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?

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

история

BootstrapМарк ОттоиИаков Торнтонразвития вTwitter.Bootstrap август 2011 года опубликовала на GitHub продуктов с открытым исходным кодом.

Почему Bootstrap?

  • Мобильный Во- первых:с Bootstrap 3 года, структура включает в себя библиотеки на протяжении приоритета мобильного устройства стиля.
  • Поддержка браузеров: Все основные браузеры поддерживают Bootstrap.

    Internet ExplorerFirefoxOperaGoogle ChromeSafari

  • Простота в использовании: до тех пор , пока у вас есть базовые знания HTML и CSS, вы можете начать изучать Bootstrap.
  • Адаптивный дизайн: Bootstrap CSS Отзывчивый , способный адаптивных настольных компьютеров, планшетных компьютеров и мобильных телефонов.Для получения дополнительной информации об адаптивном дизайне, доступной Bootstrap адаптивным дизайном .

    Адаптивный дизайн

  • Она разработчикам создавать простой интерфейс обеспечивает единое решение.
  • Она включает в себя мощные встроенные компоненты, легко настроить.
  • Он также предоставляет веб-интерфейс настройки.
  • Это с открытым исходным кодом.

Bootstrap содержимое упаковки

  • Основная структура: Bootstrap обеспечивает базовую структуру стиль фона ссылку с энергосистемой.Это будет объяснено подробноБутстрап основной фрагмент.
  • CSS: Bootstrap поставляется со следующими особенностями: настройки глобальной CSS, определить основные стили HTML элемент, масштабируемую класс и передовую систему сетки.В этом разделе описывается подробноBootstrap CSS.
  • Компоненты: Bootstrap содержит дюжину повторно используемых компонентов для создания изображений, в раскрывающемся меню, навигация, всплывающее окно оповещения поле и так далее.Это будет объяснено подробнорасположение составных частей.
  • JavaScript виджет: Bootstrap содержит десяток пользовательских JQuery плагин.Вы можете включать в себя все плагины, эти плагины могут также содержать в индивидуальном порядке. Это будет объяснено подробноБутстрап вилочной части.

  • Настройка: Вы можете настроить бутстрапе компоненты, Less переменные и JQuery плагин , чтобы получить свою собственную версию.


Онлайн примеры

Bootstrap сайт учебник содержит сотни примеров.

Вы можете использовать наш интернет-редактор онлайн-редактор кода, и нажмите на кнопку Run для просмотра результатов.

Bootstrap примеры

<Div класс = "контейнер"> <Div класс = "JumboTron"> <H1> Моя первая страница Bootstrap </ h1> <P> сбрасывает размер окна для просмотра адаптивный эффект! </ P> </ Div> <Div класс = "строка"> <Div класс = "Col-см-4 "> <H3> Колонка 1 </ h3 > <P> обучение не только технологии, но и мечта! </ P> <P> снова Niubi мечты, но и уступить дорогу , и вы хотите палку присоску! </ P> </ Div> <Div класс = "Col-см-4 "> <H3> Колонка 2 </ h3 > <P> обучение не только технологии, но и мечта! </ P> <P> снова Niubi мечты, но и уступить дорогу , и вы хотите палку присоску! </ P> </ Div> <Div класс = "Col-см-4 "> <H3> Колонка 3 </ h3 > <P> обучение не только технологии, но и мечта! </ P> <P> снова Niubi мечты, но и уступить дорогу , и вы хотите палку присоску! </ P> </ Div> </ Div> </ Div>

Попробуйте »


Другие примеры

Bootstrap Пример 2

<Div класс = "настольный отзывчивым"> <Таблица класс = "стол стол полосатые таблицы -bordered"> <THEAD> <Tr> <Th> # </ й> <Th> Имя </ й> <Th> Улица </ й> </ TR> </ THEAD> <TBODY> <Tr> <Td> 1 </ TD> <Td> Anna Удивительная </ TD > <Td> Брум - стрит </ TD > </ TR> <Tr> <TD> 2 </ TD> <Td> Дебби Даллас </ TD > <Td> Хьюстон Street </ TD > </ TR> <Tr> <Td> 3 </ TD> <Td> John Doe </ TD > <Td> Madison Street </ TD > </ TR> </ TBODY> </ Table> </ Div>

Попробуйте »

Нажмите на кнопку "Try" , чтобы увидеть,как это работает.