Bootstrap Введение

Что такое Bootstrap?

Bootstrap — это фронтенд-фреймворк для быстрой разработки веб-приложений и сайтов. Bootstrap основан на HTML, CSS и JAVASCRIPT.

История

Bootstrap был создан вTwitterofМарком ОттоиДжейкобом ТорнтономРазработан. Bootstrap — это продукт с открытым исходным кодом, выпущенный на GitHub в августе 2011 года.

Почему стоит использовать Bootstrap?

  • Mobile-firstНачиная с Bootstrap 3, фреймворк включает стили mobile-first во всей библиотеке.
  • Поддержка браузеровВсе основные браузеры поддерживают Bootstrap.

    Internet Explorer Firefox Opera Google Chrome Safari

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

    响应式设计

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

Содержимое пакета Bootstrap

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

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

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

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

Примеры Bootstrap

<div class="container"> <div class="jumbotron"> <h1>Моя первая страница Bootstrap</h1> <p>Измените размер окна, чтобы увидеть адаптивный эффект!</p> </div> <div class="row"> <div class="col-sm-4"> <h3>Колонка 1</h3> <p>То, что вы изучаете, — это не только технологии, но и мечты!</p> <p>Как бы ни была велика мечта, она не выдержит вашего глупого упорства.</p> </div> <div class="col-sm-4"> <h3>Колонка 2</h3> <p>То, что вы изучаете, — это не только технологии, но и мечты!</p> <p>Как бы ни была велика мечта, она не выдержит вашего глупого упорства.</p> </div> <div class="col-sm-4"> <h3>Колонка 3</h3> <p>То, что вы изучаете, — это не только технологии, но и мечты!</p> <p>Как бы ни была велика мечта, она не выдержит вашего глупого упорства.</p> </div> </div> </div>

Попробуйте »

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

Примеры Bootstrap 2

<div class="table-responsive"> <table class="table table-striped table-bordered"> <thead> <tr> <th>#</th> <th>Имя</th> <th>Улица</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Анна Осом</td> <td>Брум-стрит</td> </tr> <tr> <td>2</td> <td>Дебби Даллас</td> <td>Хьюстон-стрит</td> </tr> <tr> <td>3</td> <td>Джон Доу</td> <td>Мэдисон-стрит</td> </tr> </tbody> </table> </div>

Попробуйте »

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

Другие расширения