Bootstrap-самая популярная HTML, CSS и JS Framework для разработки адаптивных макетов, мобильных веб-проектов. - Начальная китайская документация
Bootstrap стала самой популярной фронтальной структурой разработки из-за своей поддержки отзывчивого макета, приоритета мобильного устройства и простых в использовании и простых в изучении.
Отзывчивый дизайн Bootstrap, разработка компонентов и разработка подключаемых модулей JavaScript и методы разработки сценариев также стоит изучить.
исходный код
Скачать и компиляцию исходного кода
Рекомендуется загрузить последний и самый полный исходный код начальной загрузки на GitHub.
GitHub - это хранилище хостинга исходного кода Bootstrap, которое содержит не только исходный код, но и исходные файлы документации Bootstrap. Поэтому вы можете просмотреть документы на локальной машине, собирая и запустив исходный код документа без сети.
Справочник исходного кода
Каталог исходного кода начальной загрузки содержит:
• Код развертывания документов suberectory_gh_pages/
• Документ исходный код подкаканинации/ Документы/
• Код развертывания начальной загрузки подканализованный Dist/
• Подкаканинация сценария начальной загрузки JS/
• Подкаканинатор в стиле начальной загрузки меньше/
• Подкаканинационные шрифты шрифтов начальной загрузки/
• Grunt Build Tool Script Suberirectory Grunt/
• Диспетчер пакетов Nuget Suberirectory Nuget/
• Многие файлы конфигурации
Точка входа
Исходный код структуры начальной загрузки очень сложный, и, несомненно, трудно проанализировать с точки зрения структуры разработки автора. Проблема может быть упрощена, не обращая внимания на то, как структура строится или развернута, но сосредоточив внимание только на том, как работает структура, а именно на HTML, CSS/Less и JS.
Благодаря идее разделения и управления сложные проблемы разбиты на многие простые проблемы и решаются. Когда все небольшие проблемы будут решены, сложные проблемы будут легко решены.
Разделите всю структуру начальной загрузки на компоненты, возьмите компоненты в качестве точки входа, понимайте их принцип работы, а затем постепенно проанализируйте всю структуру.
Анализ компонентов
Выпачающее меню выпадает
HTML -код
<!-Компонент: раскрывающееся меню-> <div> <!-кнопка триггера-> <button type = "button" data-toggle = "выпадающий"> выпадающий в панели <pran> </span> </button> <!-раскрывающееся меню-> <ul> <li> <a href = "#"> Action </a> </li> <li> <a href = "#"> Другое действие </а> </li> <li> <a href = "#"> другое действие </li> </li> </li> <pi> <al> <a href = "#"#" href = "#"> что -то еще здесь </a> </li> </ul> </div>
Примечание. Доступный атрибут ARIA-* В исходном коде удаляется из кода для легкого анализа. Это не может быть пропущено в практических приложениях. Стиль кнопки здесь не расширен для анализа
CSS -код
// выпадающая стрелка/caret.caret {display: inline block; Ширина: 0; высота: 0; Полевая левая: 2PX; Вертикальная атака: средняя; Пограничная топ: @ @caret-base-база пунктир; Пограничная топ: @Столденый солидный солидный ~ "/9"; // IE8 READER-RIGHT: @Сплошная прозрачная база; Борничная левая: @Твердое прозрачное прозрачное;} // Опатная обертка (div) .dropup, .dropdown {position: относительно; // Относительное позиционирование родительского элемента} // Предотвращение фокуса на выпадающем переключателе при закрытии раскрывающегося времени. // абсолютное расположение детских элементов Верх: 100%; // раскрывающееся меню близко к нижнему краю родительского элемента слева: 0; z-index: @Zindex-Dropdown; дисплей: нет; // Скрыть по умолчанию, когда отображается кнопка триггера (отображение: блок) float: слева; Мин-ширина: 160px; Подкладка: 5px 0; Полевая: 2px 0 0; // переопределить по умолчанию в стиле списка UL: нет; размер шрифта: @font-size-base; Текст-альбом: слева; фоновый цвет: @Выпадающий-bg; Граница: 1PX SOLID @Выпадающий флажок-фрагмент; // IE8 Swarkback Border: 1px Solid @Выпадающая часть; Border-Radius: @Border-Radius-Base; .box-shadow (0 6px 12px rgba (0,0,0, .175)); фоновая зажима: прокладка; // выравнивает выпадающее меню с правой и. Слева: Авто; } // горизонтальный разделитель с высотой 1px.divider {.nav-divider (@выпадающий дивейдер-bg); } // Ссылки в раскрывающемся меню> li> a {display: block; Заполнение: 3px 20px; ясно: оба; шрифт-вес: нормальный; Линия-высота: @Line-Height-Base; Цвет: @Выпадающий складыш; Белое пространство: Nowrap; // Предотвращение обертывания ссылок}} // Hover/focus state.dropdown-menu> li> a {&: Hover, &: Focus {Text-Decoration: None; Цвет: @Распадая-изгибая цвета; фоновый цвет: @выпадающий складыш-ховер-BG; }} // Active state.dropdown-menu> .active> a {& &: Hover, &: Focus {color: @Dropdown-Link-Active-Color; Текстовое декорация: нет; Схема: 0; фоновый цвет: @Выпадающий складыш-активный-BG; }} // Покажите выпадающее меню.open {> .dropdown-menu {display: block; // показать} // Удалить контур, когда: фокус запускается> a {upline: 0; }} // меню позиционирование.dropdown-menu-Right {left: auto; // сбросить по умолчанию из `.dropdown-menu` right: 0;} //` .pull-right` component .. dropdown-menu-left {слева: 0; Справа: Auto;} // Заголовки раскрытия. Заполнение: 3px 20px; Font-Size: @Font-Size-Small; Линия-высота: @Line-Height-Base; Цвет: @Выпадающий заголовок Color; Белое пространство: Nowrap; // как с> li> a} // Область меню без капли. слева: 0; Справа: 0; Внизу: 0; Верх: 0; z-index: (@Zindex-Dropdown-10); // Убедитесь, что выпадающее меню не будет закрыто при нажатии на выпадающее меню} // Право выровненное раскрываемое. Слева: auto;} // разрешить раскрывающиеся вверх снизу вверх (aka, Dropup-menu) /////// Просто добавить .dropup после стандартного класса. Border-Bottom: @база для ширины лечения пунктир; Border-Bottom: @Столденый солидный ~ "/9"; // IE8 Content: ""; } // Разное позиционирование для меню снизу вверх .dropdown-menu {top: auto; Внизу: 100%; маржинальный бат: 2px; }} // Выравнивание компонентов //// Повторяет за Navbar.less и модифицированное выравнивание компонентов. } // необходимо для переопределения правого меню по умолчанию. // Удалит Come v4 по всей вероятности. .dropdown-menu-left {.dropdown-menu-left (); }}}Поведение этого раскрывающегося компонента меню: когда кнопка триггера нажимается, под ним отображается раскрывающееся меню, а когда нажимается область меню, не связанного с распадом, скрывается раскрывающийся меню.
Принцип реализации:
1. Только кнопка триггера отображается в начале, раскрывающееся меню с оберточной упаковкой по умолчанию закрыто, и.
2. Когда кнопка триггера нажимается, добавьте класс. В. Так что добавьте/удалить класс.
3. При нажатии на область меню, не связанного с Dopdown,. Dropdown Удаляет класс. Опен, то есть скрывает раскрывающееся меню. Принцип реализации области меню, не связанного с распадом, состоит в том, что фиксированное позиционирование, плитка и z-индекс меньше раскрывающегося меню, так что раскрывающийся меню не будет скрыто при нажатии на раскрывающее меню.
Код JavaScript
/* ======================================================================= ======================================================================= ======================================================================= ======================================================================= ======================================================================= ======================================================================= ======================================================================= ======================================================================= Лицензирован в соответствии с MIT (https://github.com/twbs/bootstrap/blob/master/license) * ======================================================================= ======================================================================= var fackdrop = '.dropdown-backdrop' var toggle = '[data-toggle = "выпадает"]' var houpdowd = function (element) {$ (element) .on ('click.bs.dropdown', this.toggle)} dropdown.version = '3.3.6' function getParent ($ this) {var selctor = $ this. $ this.attr ('href') selection = selector && /#^-za-zy/.test(selector) && selector.replace (/.*(?=#^/ s]*$)/, '' ') // strip для ie7} var $ parent = selector && $ (selector) return $ parent && $ parent.length? $ parent: $ this.parent ()} function clearmenus (e) {if (e && e.which === 3) return $ (fackdrop) .remove () $ (toggle) .each (function () {var $ this = $ (this) var $ parent = getParent ($ this) varTarget = {insulityTarget: это} if ($ parent. e.type == 'click' && /inputtarea/i.test(e.target.tagname) && $ .contains ($ parent [0], e.target)) return $ parent.trigger (e = $ .event ('hide.bs.dropdown', связанный срок), если (e.isdefpreved (') return $ this. 'false') $ parent.removeclass ('open'). Trigger ($. Event ('hidden.bs.dropdown', indiveTarget))})} uptown.prototype.toggle = function (e) {var $ this = $ (this) if ($ this. $ parent.hasclass ('open') clearmenus () if (! isactive) {if ('ontouchstart' в document.documentelement &&! .InserTafter ($ (this)) .on ('click', clearmenus)} var insulityTarget = {insulityTarget: this} $ parent.trigger (e = $ .event ('show.bs.dropdown', indiendtarget)) if (e.isdefaultprevent () return $. .togGleclass ('open') .trigger ($. Event ('shod.bs.dropdown', insulityTarget))} вернуть false} распадается. e.preventdefault () e.stoppropagation () if ($ this.is ('. отключен,: отключен')) return var $ parent = getParent ($ this) var visactive = $ parent.hasclass ('open') if (! isactive && e.which! Вернуть $ this.trigger ('click')} var desc = 'li: не (.disabled): visible a' var $ ements = $ parent.find ('.. Выпадающий menu' + desc) if (! $ ements.length) return var index = $ items.index (e.target) if (e.which == 38 && index> 0). 1) index ++ // down if (! ~ Index) index = 0 $ ements.eq (index) .trigger ('Focus')} // Определение выпадающего плагина // =========================================================================================== {var $ this = $ (this) var data = $ this.data ('bs.dropdown') if (! data) $ this.data ('bs.dropdown', (data = new Roaddown (this))) if (typeof option == 'string') data [Option]. $ .fn.dropdown.constructor = выпадающий // распаданный конфликт // ====================================================================================================== ================================================================================= ================================================================================= $ (document) .on ('click.bs.dropdown.data-api', clearmenus) .on ('click.bs.dropdown.data-api', '.dropdown form', function (e) {e.stoppropagation ()}) .on ('click.dropdown.data-api', toggle, dropdowp. .on ('keydown.bs.dropdown.data-api', toggle, drotdown.prototype.keydown) .on ('keydown.bs.dropdown.data-api', '.dropdown-menu', drotdown.prototype.keydown)} (jquery);Структура кода JavaScript может быть разделена на три части:
1. Строки определения класса 1-125
2. Линии определения плагина 126-144
3. Установите конфликтные линии 148-153
4. Применить к стандартному раскрывающемуся элементам меню линии 155-166
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.