Как устроен и работает framework Твиттер Бутстрап.

Фреймворк Twitter Bootstrap. Первое знакомство и обзор кода.

...

...

Фреймворк Bootstrap - это свободный набор инструментов для создания сайтов и веб-приложений ... Написан на HTML, CSS, LESS, Sass, JavaScript ... Три варианта установки :
Компиляция из исходных файлов через npm, gem, Composer или Meteor на Linux подобных системах ...
Подключение к коду страницы и использование готовых скомпилированных CSS или JS из BootstrapCDN ... link rel=stylesheet href= ... script src= ...
Официальные премиум темы, созданные на Bootstrap, с новыми компонентами и плагинами, документами и инструментами сборки ...
Используемая библиотека jQuery не входит в комплект поставки и требует отдельного кода подключения ...

Framework Bootstrap - download, documentation, examples ... Bootstrap - самая популярная библиотека HTML, CSS и JS в мире ...

Готовые решения Bootstrap от $39 до $59 - предлагаются к загрузке в широком ассортименте ... Самые последние добавления в коллекцию ... Популярные - лидеры продаж за неделю ... Messenger - адаптивное приложение начальной загрузки ... Готовые шаблоны : Shopper - универсальный для электронной коммерции ... Landkit - многофункциональный + комплект пользовательского интерфейса ... Keen - безлимитная Admin тема ... Dashkit - для администратора и панели инструментов ... Front - многоцелевой и отзывчивый ... Leap - многоцелевой + UI Kit ... Falcon - панель администратора и шаблон веб-приложения ... Гипер - отзывчивый Admin и Dashboard ... Looper ... Quick - Веб-сайт UI Kit ... AppStack ... Cartzilla - универсальный ... Электронная коммерция и розничная торговля ... Space - многоцелевой ... Falcon [React] ... CreateX ... AppStack [ReactJS] ... Wizixo - многофункциональная корпоративная тема ... Directory - каталог и листинг, электронная розничная торговля ... Spaces - коворкинг шаблонов недвижимости... GO - универсальный шаблон начальной загрузки ... Бумеранг - бизнес и корпоративный ... Milo - журнал / блог ... Now UI Kit PRO - премиум портфолио и блог ... Insight - многофункциональный бизнес ... Bootstrap позволяет создавать адаптивные интерактивные и мобильные web-проекты, используя front-end библиотеки компонентов интерфейса, множество готовых компонентов и мощных плагинов, основанных на jQuery ...

Как, видно - выбор большой и разнообразие, под любые потребности вкусы и предпочтения ... Но, только платными решениями - дело не ограничивается : есть и множество бесплатных тем ...

bootstrap themes free search, поиск бесплатных тем ...

jQuery - набор функций JavaScript, фокусирующийся на взаимодействии JavaScript и HTML ... Библиотека jQuery обеспечивает легкий доступ к любому элементу DOM, атрибутам и содержимому, манипуляции, удобный API для работы с AJAX ... Ajax - применяется для создания интерактивных пользовательских интерфейсов веб-приложений, использующих фоновый обмен данными браузера с веб-сервером ... Этот подход допускает частичную догрузку / перекомпоновку страницы и веб-приложения становятся динамичнее, быстрее и удобнее ... Все это необходимо применять вследствие ограничения JavaScript - клиентской среды обработки кода - которой (часто) не позволены серверные операции и запросы в силу безопасности на стороне пользователя ...

Итак, Bootstrap - это что-то вроде инструмента для разработки веб-страниц сайта и веб-приложений, таких как CMS (система управления контентом сайта, Web Admin Panel) ... Но, Bootstrap - это не CMS, это инструмент веб-проекта для создания и поддержки работоспособности интернет приложений ... Страницы проекта должны быть сверстаны по новейшим стандартам : обязательно включать использование HTML5 doctype и viewport meta tag для правильного / отзывчивого поведения на любых устройствах ... Ребут - новая библиотека CSS, не использующая классов и обеспечивающая модульный подход ...

Одна из главных особенностей фреймворка Бутстрап - это использование вместо неуклюжих кирпичных таблиц - 12-шаговой сетки ... Это значит, что для любой ширины экрана, от 200px до 2200px - в контейнере (строке) всегда доступны 12 ячеек сетки ... Другое дело - как использовать их ... Например, если ширина блока содержимого 300px, то для разных экранов устройств можно указать, как блок будет задействовать ячейки : ...
для экрана 1800px - использовать 6 блоков по 2 ячейки = 12 ячеек, при сворачивании ширины динамически переносить блоки вниз (перенос строки) ...
для 1200px - 4 блока по 3 ячейки = 12 ячеек ...
для 800px - 2 блока по 6 ячеек = 12 ячеек ...
для 320px - 1 блок / 12 ячеек ... Все другие блоки будут автоматически выстроены и центрованы по вертикали на узком экране мобильного устройства ... С таблицей такой фокус, просто - не пройдет ...
Необязательно использовать все 12 ячеек ... Можно указать любое количество в строке / контейнере (возможно, теперь - без переноса, хотя ... ) ...

Первое, на что интересно посмотреть кодеру - это исходный код, чтобы быстро понять устройство взаимосвязей и свои возможности по работе с фреймворком ... Для себя я решил рассмотреть минимальный bootstrap.min.css ... Это 141 КБ (144877 байт) кода, 24180 слов, сочетание упоминания более 4300 .xyz классов с 1751 {xyz} функцией стиля разметки ... Чтобы увидеть истинную картину связей используемых классов и настроек - пришлось сильно обезжирить код таблицы стилей ...

CSS-фреймворк Bootstrap начинал разрабатываться, как внутренняя библиотека компании Twitter с названием Twitter Blueprint ... Поэтому часто упоминается, как Twitter Bootstrap ... v4 - практически заново переписанный код третьей версии ... Сетки - размеры колонок ... Шаблоны - фиксированный вид или резиновый документ ... Типографика - шрифт для оптимальной отрисовки текста на любом устройстве, под любой ОС ... Медиа - управление изображениями и видео ... Таблицы - оформление и возможности сортировки ... Формы - ввод и обработка событий ... Навигация - панели, вкладки, ссылки, меню ... Алерты - тревожные сработчики подсказок, диалоговых и всплывающих окон ...

Несведущему и привыкшему к стандартным тегам кода - практически нереально понять, например, что span - это col ... Надо просто проникнуться и привыкнуть к ссылочным именам ... В коде часто встречается упоминание WebKit ... Это браузерный движок, разработанный Apple, на основе кода библиотек KHTML и KJS KDE и используемый браузере Safari, а также во всех веб-браузерах iOS ... Впоследствии - крупные разработчики присоединились к проекту и интегрировали функционалы разработки, обеспечивая поддержку macOS, Windows, Linux и других Unix-подобных систем в своих приложениях ...

Только такой способ помог мне найти необходимую вещь - шпаргалка по Bootstrap 4 ... Интерактивный список классов для версии 4 на русском языке ... Без нее, на первых порах - вообще непонятно, как работать ))) ... Разработка очень интересная - не зря она занимает лидирующее положение по применяемости в веб-проектах ... Для любого элемента (в документации или поиском в коде библиотеки) - можно найти правильное написание и установленные значения ...

Необязательно знать все теги (и, тем более - добавлять пользовательские стили), чтобы начать учится использовать фреймворк ... В нем достаточно функционала, чтобы обеспечить все потребности адаптивного CSS форматирования на начальном этапе ... Можно начинать с известных и широко употребляемых тегов / классов ... Главное - понять принцип : сетка, 12 ячеек (псевдо колонок таблицы) в строке и 4 предустановленных размера экрана ... 100% ширины экрана делить на 12 ячеек = 8,3% ширины на ячейку ... Отличие версий : v4 выполнена на rem и flex ; v3 сделана на px и float (если я не вру) ... Глубокое изучение откроет и другие особенности и секреты использования Бутстрап ...

* Bootstrap v4.0.0 (https://getbootstrap.com) ...
* Copyright 2011-2018 The Bootstrap Authors ...
* Copyright 2011-2018 Twitter, Inc. ...
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) ...
* /*# sourceMappingURL=bootstrap.min.css.map */

[-lg -md -sm -xl] ... --breakpoint-xs:0 ... --breakpoint-sm:576px ... --breakpoint-md:768px ... --breakpoint-lg:992px ... --breakpoint-xl:1200px ... Базовые точки останова / принятия решения обработки размеров экрана для основных стилей ... Предполагается : маленький - small, medium или middle, large, ну и размер XL / extra large - очень большой (как размер одежды) ...

.alert ... Вплывающие предупреждения и оповещения ... -danger -dark -dismissible -heading -info -light -link -primary -secondary -success -warning -baseline -bottom ... -content [-lg -md -sm -xl] -around -between -center -end -start -stretch -baseline ... [-items -center -end -middle ... [-lg -md -sm -xl -baseline -center -end -start -stretch] ... -self [-lg -md -sm -xl] -auto -baseline -center -end -start -stretch] ... -text [-bottom -top] ... -top ...

.badge ... Значки и бэйджики ... -danger -dark -info -light -pill -primary -secondary -success -warning :empty [href]:focus [href]:hover ...

.bg ... Бэкграунд, задний фон ? Утилита цветов ... -danger -dark -info -light -primary -secondary -success -transparent -warning -white ...

.border ... Утилиты рамки / границы ... -0 -bottom -danger -dark -info -left -light -primary -right -secondary -success -top -warning -white ...
.rounded ... -0 -bottom -circle -left -right -top ...

.breadcrumb ... Панировочные сухари ))) ... Хлебные крошки, местоположение активной страницы в навигационной иерархии ... -item.active -item+ ::before :hover::before ...

.bs ... ??? ... -popover-auto -tooltip-auto [x-placement ^=bottom ^=left ^=right ^=top] ...

.btn ... Кнопки, группы и модификаторы кнопок ... -block -block+ -danger -dark ... -group [-lg -sm -toggle -vertical] ... -info -light -link -outline [-danger -dark -info -light -primary -secondary -success -warning] ... -toolbar -warning [:disabled :focus :hover :not(:disabled) :active] ...

.card ... Карты / открытки ... -body -columns -deck -footer ... -group [:first-child :last-child :not :only-child] ... -header [-pills -tabs] ... -img [-bottom -overlay -top] ... -link -link+ -subtitle -text -title ...

.carousel ... Карусель ... -caption ... -control [-next -next-icon -prev -prev-icon] ... -indicators -inner ... -item [-next -prev active -left -right] ... .active.carousel-item [-left -prev -right -next] ...

.clearfix [::after] ... Утилиты позиционирования / плавающие элементы ...
.fixed ... -bottom -top ...
.float ... -left -none -right -italic -weight [-bold -light -normal] ... [-lg -md -sm -xl] ...

.close ... Различные утилиты ... [:focus :hover :not(:disabled)] ...
.embed ... -responsive [-16by9 -1by1 -21by9 -4by3] ...
И другие ... shadow, stretched-link ...
.invisible ...
.sr-only ...
.visible ...

.collapse ... Коллапс, видимость контента в проекте ... .collapse.show .collapsing ...

.container ... Работа с сеткой / GRID ... Контейнер для ячеек сетки ... -fluid ...
.col ... -1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 ... -auto -form [-label -lg -sm] ... [-lg -md -sm -xl] ...
.row ...
.no-gutters ...
.offset ... -1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -lg -md -sm -xl ...
.order ... -1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -first -last -lg -md -sm -xl ...
nested columns - отсутствует в моей версии ...

.custom ... Кастомные / пользовательские формы ... -checkbox -control [-inline -input -label .is-invalid .invalid-feedback .was-validated .invalid-tooltip .is-valid ... сложные сочетания классов] ... -file [-input -label] ... -radio -select [-lg -sm] ... -select [::-ms-expand :disabled :focus ::-ms-value multiple size] ...

.d ... Утилиты дисплея / экрана ... -block -flex -inline ... -none -print ... -table [-cell -row] ... [-lg -md -sm -xl] ...

.display ... Средства типографии / отображение шрифтов ... [-1 -2 -3 -4] ...
.blockquote ... Цитата ... -footer [::before] ...
.lead ...
.list ... -group [-flush -item [-action -danger -dark -info -light -primary -secondary -success -warning]] ... -inline -unstyled ...

.dropleft ... .dropright .dropup ...

.fade ...

.figure ... Тег HTML5 ... -caption -img ...

.flex ... Утилиты Flexbox / Гибкость ячеек сетки ... -column -nowrap -row -row-reverse -wrap ... [-lg -md -sm -xl] ...
Дополнительно применяется совместно с justify , align, order ...

.form ... Формы, группы форм ... -check [-inline -input -label] ... -control [-file -range -lg -plaintext -sm] ... -group -inline -row -text ...
.dropdown ... Выпадающие элементы / меню... -divider -header ... -item [.active .disabled, .dropdown] ... -menu -toggle ...
.input ... -group [-append -text -prepend] ...

.h ... Утилиты размеров ... [-100 -25 -50 -75] ...
.h ... Заголовки страницы ... [1 2 3 4 5 6] ...
.mh ... -100
.mw ... -100 ...
.w -100 -25 -50 -75 ...
.p ... -0 -1 -2 -3 -4 -5 -lg -md -sm -xl ...

.img ... Работа с изображениями ... -fluid -thumbnail ...

.initialism ...

.invalid [-feedback -tooltip] ...

.jumbotron ... Аннотация, гибкий компонент для демонстрации ключевого содержимого сайта ... -fluid ...

.justify ... Элемент выравнивания ... -content [-around -between -center -end -lg -md -sm -xl] ...

.m ... Утилиты организации свободного места / отступы элементов ... .mb .my ... .ml .mx ... .mr .mx ... .mt .my ... -0 -1 -2 -3 -4 -5 -auto -lg -md -sm -xl ...
.pb .py .pl .px .pr .px .pt .py ... -0 -1 -2 -3 -4 -5 -lg -md -sm -xl ...

.mark ...

.media ... Медиа объекты ... -body ...

.modal ... Модальный плагин для диалогов / взаимодействие с пользователем ... -backdrop [.fade .show] ... -body -content -dialog-centered -footer -header l-open -scrollbar -measure -sm -title -dialog ...

.nav ... Навигация по сайту, ссылки ... -fill -item -justified ... -link [.disabled :focus :hover] ... -pills -tabs ...

.navbar ... Навигационные заголовки и панели ... -brand [:focus :hover] ... -collapse -dark ... -expand [-lg -md -sm -xl] ... -light -nav -text ... -toggler [-icon :focus :hover :not(:disabled)] ...

.page ... Пагинация / многостраничность, деление страниц ... -item [.active .disabled :first-child :last-child] ... -link [:focus :hover :not(:disabled)] ...
.pagination ... -lg -sm ...

.popover ... Информеры и всплывающие подсказки к любому элементу сайта ... -body ... -header [:empty ::after ::before] ...

.position ... Какое-то положение ... -absolute -fixed -relative -static -sticky ...

.pre-scrollable ...

.progress ... Пользовательские индикаторы выполнения Bootstrap / Прогресс бар ... -bar [-animated -striped] ...

.small ...

.tab-content ...

.table ... Разработка таблиц ... -active -bordered [td th thead] ... -danger -dark -hover -info -light -primary -responsive [-lg -md -sm -xl] ... -secondary -sm -striped -success -warning ...
.table ... .thead-dark th .thead-light th tbody+tbody .table td .table th .table thead th ...

.text ... Утилиты работы с текстом и его оформлением ... -capitalize -center -danger -dark -hide -info -justify -left -light -lowercase -muted -nowrap -primary -right -secondary -success -truncate -uppercase -warning -white ... [-lg -md -sm -xl] ...

.tooltip ... Подсказки с Popper.js ... [-inner .arrow .show] ...

.valid ... [-feedback -tooltip] ...

Ниже отображены обзоры стилей и поддерживаемых тегов, включенные в bootstrap.min.css ...

* ::-webkit-file-upload-button ...

@-ms-viewport ... @-webkit-keyframes progress-bar-stripes ... @keyframes progress-bar-stripes

@media (max-width: 1199.98px 575.98px 767.98px 991.98px) ... @media (min-width: 1200px 576px 768px 992px) ...

@media print ... @page ... @supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)) ... @supports ((position:-webkit-sticky) or (position:sticky)) ...

[type =button =number =reset =search] ...

{-ms-flex [-item-align -line-pack -pack -preferred-size -wrap :nowrap :wrap]} ...

{-webkit [-animation -appearance -box [-align -flex -ordinal-group -orient -pack] -column-count -transform]} ...

{* ::after ::before background [-color -image [none url] -position] ... -bottom [-left -right -radius -width] ... border [-collapse -color -left -radius -right -top] ... box [-shadow -sizing] ... color content cursor display float ... font [-family -size -style -weight] ... from height left ... margin [-bottom -left -right -top :auto] ... max [-height -width] ... min [-height -width] ... opacity orphans outline ... overflow [-x :auto :hidden :visible] ... padding [-bottom -left -right -top] ... page [-break [-after -inside]] ... pointer-events ... position [:-webkit-sticky :absolute :fixed :relative :static] ... right ... text-align [:center :inherit :justify :left :right] ... text [-decoration -shadow -transform] ... top [:auto :calc] ... vertical-align ... visibility [:hidden :visible] ... white-space [:nowrap :pre-wrap] width [:% :auto :device-width] ... z-index ...

a ... abbr ... address ... article ... aside ... dialog ... figcaption ... figure ... footer ... header ... hgroup ... main ... nav ... section ... b ... strong ... blockquote ... pre ... body ... button ... input ... optgroup ... select ... textarea ... caption ... code ... kbd ... pre ... samp ... dd ... dfn ... dl ... ol ... ul ... dt ... fieldset ... figure ... h ... hr ... html ... img ... tr ... label ... legend ... ol ... ul ... output ... p ... code ... progress ... small ... sub ... sup ... summary ... svg ... table ... tbody ... template ... textarea ... th ... thead ... to ...

Bootstrap vs Grid CSS.

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

...

...

Быстрый поиск по сайту :


Популярное : ...

... | ... Найти ... | ... Радио ... | ... Тюнинг ... | ... Торрент ... | ... Компьютер ... | ... Читать ... | ... Погода ... | ... Идея ... | ... Программы ... | ...

TechStop-Ekb.ru : познавательные развлечения, техника, технологии ... На сайте, для работы и соответствия спецификациям - используются ... Протокол HTTPS шифрования для безопасного соединения с сервером и защиты пользовательских данных ... Антивирус DrWeb для превентивной защиты пользователей от интернет угроз и вирусов ... Ресурс входит в рейтинги Рамблер Топ 100 (познавательно-развлекательные сайты) и Mail Top 100 (авто мото информация) ...

Тех Стоп Екб RU (РФ) официальный сайт, популярные темы, погода, новости, обзоры с картинками, бесплатно, актуально, без регистрации ... Смотреть утром, днем, вечером и ночью - круглосуточно онлайн ...

Меню раздела, новости и новые страницы.

Фреймворк Twitter Bootstrap. Первое знакомство и обзор кода.


© techstop-ekb.ru, 2016++, 2020.