Введение в Bootstrap
1. Что такое Bootstrap?
Website (Вебсайт) называется "Responsive" (Имеет функцию ответа), если он сочетается с утройствами, имеющими разный размер экрана, как компьютер, планшет (Tablet), мобильный телефон (Mobile).
До 2013 года, чтобы website был совместимым с компьютером и мобильным телефоном, программисты должны были написать 2 разных проекта. Первый проект это веб приложение служившее для пользователей использующих компьютер или планшет. И второй проект это веб приложение для пользователей, использующих устройства с маленькими экранами, как мобильный телефон. Это на самом деле создавало трудности в техническом обслуживании и обновлении вебсайта, потому что вам нужно это сделать для 2 проектов. Помимо этого, оба они должны быть развернуты на 2-х разных доменах (domain), например:
- http://somewebsite.com
- http://mobile.somewesite.com
2013 год считается годом дизайнаов "Responsive", так как пользователи с каждым днем все больше предпочитали мобильные устройства как планшет и смартфон. Изменилось поведение большинства пользователей, они сменили свое чтение новостей на мобильном устройстве.
Bootstrap
Bootstrap это бесплатный фреймворк (framework), с открытым исзодным кодом, основанный на HTML, CSS & Javascript. Он был создан для построения интерфейсов вебсайта, подходящего для всех устройств с разными размерами экрана.
Bootstrap включает базовые ващи как: typography, forms, buttons, tables, navigation, modals, image carousels и многое други. Так же имеет много Component, Javascript поддерживающие легкий дизайн вашего Reponsive, с более удобным и быстрым способом.
На данный момент Bootstrap является одним из самых используемых фреймворкс в мире для создания Responsive Website. Bootstrap создал собственный стандарт и многие программисты его предпочитают. Главное, Bootstrap имеет 3 преимущества:
- Легкий для использования: Так как Bootstrap построен на HTML, CSS & Javascript.
- Responsive: Bootstrap построил "Responsive Css" подходящий разным устройствам, поэтому вам надо только научиться ими пользовать. Данное свойство помогает сохранить много времени для пользователя при создании дружественного Вебсайта.
- Подходящий браузерам: Подходит ко всем браузерам (Chrome, Firefox, Internet Explorer, Safari, Opera). При это, с IE, Bootstrap 4 поддерживает только от IE10 и выше.
История Bootstrap:
Bootstrap, изначально был назван Twitter Blueprint, разработан Mark Otto и Jacob Thornton в Twitter как фреймворк для поддерживания согласованности во внутренних инструментах. Перед Bootstrap, разные библиотеки были использованы для разработки интерфейса, которое привело к отсутствию согласованности и тяжелой нагрузки технического обслуживания.
После нескольких месяцев разработких маленькой группой, многие разработчики в Twitter начали вкладывать в проект, как часть недели Hack, неделя в стиле hackathon для разработчиков Twitter. Он был переименован с Twitter Blueprint в Bootstrap, и был выпущен как проект с открытым исходным кодом 19-го Августа 2011 года. Он продолжал поддерживаться с помощью Mark Otto, Jacob Thornton и маленькой группой основных разработчиков, а так же большим обществом пользователей.
Bootstrap Versions:
Версия | Дата выпуска | Главное содержание |
1.0 | 19/08/2011 | Первая версия Bootstrap, еще не поддерживала Mobile. |
2.0 | 31/01/2012 | Добавлена система Grid-Layout 12 столбцов. Добавлены некоторые новые компоненты (component). И изменены некоторые готовые компоненты. Все еще не поддерживала Mobile. |
3.0 | 19/08/2013 | Компоненты были переменены по стилю плоского дизайна (flat design). И в первый раз поддерживала устройства Mobile. |
4.0 | 19/01/2018 | Bootstrap 4 почти все переписано с Bootstrap 3, и оценивается более легким для использования по сравнению с предыдущей версией. |
Pуководства Bootstrap
- Руководство Bootstrap Jumbotron
- Руководство Bootstrap Dropdown
- Руководство Bootstrap Alert
- Руководство Bootstrap Buttons
- Руководство Bootstrap Button Group
- Руководство Bootstrap Popover (Tooltip)
- Руководство Bootstrap Spinner
- Введение в Bootstrap
- Руководство Bootstrap Grid System
- Руководство Bootstrap Card
- Руководство Bootstrap Container
- Руководство Bootstrap Nav, Tab, Pill
- Руководство Bootstrap NavBar
- Руководство Bootstrap Table
- Руководство Bootstrap Modal
- Руководство Bootstrap Form
- Руководство Bootstrap Pagination
- Руководство Bootstrap Badge
- Руководство Bootstrap Input Group
- Руководство Bootstrap List Group
- Руководство Bootstrap ProgressBar
- Руководство Bootstrap Collapse и Accordion
- Руководство Bootstrap Scrollspy
- Руководство Bootstrap Breadcrumb
- Руководство Bootstrap Carousel
- Руководство Bootstrap Spacing Utility
- Руководство Bootstrap Border Utility
- Руководство Bootstrap Color Utility
- Руководство Bootstrap Text Utility
- Руководство Bootstrap Sizing Utility
- Руководство Bootstrap Position Utility
- Руководство Bootstrap Flex Utility
- Руководство Bootstrap Display Utility
- Руководство Bootstrap Visibility Utility
- Руководство Bootstrap Embed Utility
Show More