Учебник по начальной загрузке

Twitter Bootstrap - самый популярный интерфейсный фреймворк в последнее время. Это изящная, интуитивно понятная и мощная интерфейсная среда для мобильных устройств, которая упрощает и ускоряет веб-разработку. Он использует HTML, CSS и Javascript. Это руководство научит вас основам Bootstrap Framework, с помощью которых вы можете легко создавать веб-проекты. Учебник разделен на разделы, такие как Базовая структура Bootstrap, Bootstrap CSS, Компоненты макета Bootstrap и Плагины Bootstrap. Каждый из этих разделов содержит связанные темы с простыми и полезными примерами.

Зачем изучать Bootstrap?

  • Mobile first approach - Bootstrap 3, фреймворк состоит из стилей Mobile first по всей библиотеке, а не из отдельных файлов.

  • Browser Support - Поддерживается всеми популярными браузерами.

  • Easy to get started- Только со знанием HTML и CSS любой может начать работу с Bootstrap. Также на официальном сайте Bootstrap есть хорошая документация.

  • Responsive design- Адаптивный CSS Bootstrap подстраивается под настольные компьютеры, планшеты и мобильные телефоны. Подробнее об адаптивном дизайне читайте в главе « Адаптивный дизайн Bootstrap».

  • Предоставляет чистое и единообразное решение для создания интерфейса для разработчиков.

  • Он содержит красивые и функциональные встроенные компоненты, которые легко настроить.

  • Он также обеспечивает настройку через Интернет.

  • И, что лучше всего, это открытый исходный код.

Привет, мир с помощью Bootstrap.

Чтобы вас немного порадовал Bootstrap, я собираюсь дать вам небольшую обычную программу Bootstrap Hello World. Вы можете попробовать ее, используя ссылку Demo.

<!DOCTYPE html>
<html>
   
   <head>
      <title>Bootstrap 101 Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      
      <!-- 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.3.0/respond.min.js"></script>
      <![endif]-->
      
   </head>
   
   <body>
      <h1>Hello, world!</h1>

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

Приложения Bootstrap

  • Scaffolding- Bootstrap предоставляет базовую структуру с сеткой, стилями ссылок и фоном. Это подробно описано в разделеBootstrap Basic Structure

  • CSS- Bootstrap поставляется с функцией глобальных настроек CSS, основными элементами HTML, стилизованными и улучшенными с помощью расширяемых классов, и расширенной сеточной системой. Это подробно описано в разделеBootstrap with CSS.

  • Components- Bootstrap содержит более десятка многократно используемых компонентов, созданных для отображения значков, выпадающих списков, навигации, предупреждений, всплывающих окон и многого другого. Это подробно описано в разделеLayout Components.

  • JavaScript Plugins- Bootstrap содержит более десятка настраиваемых плагинов jQuery. Вы можете легко включить их все или по одному. Это подробно описано в разделеBootstrap Plugins.

  • Customize - Вы можете настроить компоненты Bootstrap, переменные LESS и плагины jQuery, чтобы получить свою собственную версию.

Аудитория

Это руководство было подготовлено для всех, кто имеет базовые знания HTML и CSS и хочет разрабатывать веб-сайты. После изучения этого руководства вы обнаружите, что обладаете умеренным опытом в разработке веб-проектов с использованием Twitter Bootstrap.

Предпосылки

Прежде чем приступить к изучению этого руководства, мы предполагаем, что вы уже знакомы с основами HTML и CSS. Если вы не очень хорошо знакомы с этими концепциями, мы предлагаем вам ознакомиться с нашим кратким руководством по HTML Tutorial и CSS Tutorial.