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

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

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

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

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

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

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

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

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

  • Он также предоставляет веб-настройки.

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

Hello World, используя Bootstrap.

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

<!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 предоставляет базовую структуру с Grid System, стилями ссылок и фоном. Это подробно описано в разделе Базовая структура начальной загрузки.

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

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

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

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

Аудитория

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

Предпосылки

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