Учебник по начальной загрузке
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.