1. Форма
Файл исходного кода:
_form.scss
Mixins/_form.scss
1. Согласно иерархии: форм-группа-> контроль формы/входной группы/форма-статический контроль-> Различные теги
2. Контейнеры, такие как форм-группа/форм-контроль/входная группа/форм-статический контроль, делятся на два метода отображения: блок и встроенный блок. Табличная клетка используется для достижения уровня входной группы.
.Input-Group {Display: Inline Table; Вертикальная атака: средняя; . INPUT-GROUP-ADDON,. INPUT-GROUP-BTN, .form-Control {ширина: Auto; }}3. INPUT-GROUP-ADDON: если класс вставляет значок текста веб-страницы, он выручит предыдущий пиксель.
Решение: Glyphicon не может использоваться в сочетании с другими стилями, но используется внутри, потому что Glyphicon имеет 1 пиксельную настройку для сверху:
.glyphicon {позиция: относительно; Верх: 1px; дисплей: встроенный блок; Фонт-семья: «Глификоны Халфлинги»; в стиле шрифта: нормальный; шрифт-вес: нормальный; высота линии: 1; -Webkit-font-smothing: innealiased; -moz-osx-font-smothing: greyscale;}2. Навигационный бар (Navbar)
Файл исходного кода:
_navbar.scss
1. В основном делят внутренние области, такие как голова, другие области; и позиционирование навигационных полос
2. Реализация папки (удаленная в 4.0), то есть класс Navbar-Collapse, вместо коллапса, а на кнопке появляется скрытый слой.
2.1. Navbar-Collapse: когда он больше, чем точка останова, он будет отображаться (потому что коллапс скрыт по умолчанию)
3. Контент поддерживает NAV, Brand, Form, Toggler
4. Navbar-Toggler (4.0 удален): установите для отображения, когда экран меньше значения точки останова (768), а в 4.0 обрушивается для непосредственного отображения этой кнопки. В размере экрана нет ограничений. Применение Navbar-Toggle также должно использоваться в сочетании с коллапсом.
5. Navbar-Static Top: он добавляет только Zindex, удаляет округлые углы, ширину границы и другое содержимое.
6.
7. Navbar-Brand: Brand, вы можете поместить имена веб-страниц, логотипы компании и другое содержимое
8. Navbar-toggle: изображение щелчка, используемого для сокращения, которое будет отображаться, когда он меньше, чем точка останова, и если он больше, чем это значение, он будет скрыт (и, дисплей Togger Right Floation и служит относительным элементом позиционирования)::
.navbar-toggle {позиция: относительно; Поплавок: верно; Право маржи: $ navbar-goorizontal; Заполнение: 9px 10px; @include vavbar-vertical-align (34px); фоновый цвет: прозрачный; Справочный Image: нет; // сбросить необычный стиль firefox-on-android по умолчанию; См. https://github.com/necolas/normalize.css/issues/214 Граница: 1px Solid Transparent; граница-радис: $ border-radius-баз; // Мы удаляем здесь «очередь», но позже компенсируем, прикрепляя `: hover` // стили к`: focus`. &: Focus {Outline: 0; } // bars .icon-bar {display: block; Ширина: 22px; Высота: 2px; граница радий: 1PX; } .icon-bar + .icon-bar {margin-top: 4px; } @Media (min-width: $ grid-float-breakpoint) {display: none; }}9. Navbar-Nav: оригинальный NAV сделал несколько совместимых настроек. Если мы настраиваем стиль под точкой Breakpoint-Max, а также стиль под точки Breakpointg, или удалить цвет фона по умолчанию, тень и т. Д.
10.
11. NAVBAR-TEXT и NAVBAR-BTN: оба сделали соответствующие настройки совместимости на основе по умолчанию
12. Navbar предоставляет две темы: по умолчанию и обратно. Каждая тема имеет соответствующую обработку совместимости стиля для соответствующих компонентов.
13. Навигационной панель не имеет много стилей. Он предоставляет только два содержимого: переключатель и бренд, в основном предоставляющий две темы, а также комбинация четырех компонентов: раскрывающийся список, коллапс, форма и NAV.
Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам замечательную тему: учебник по обучению Bootstrap
Эта серия учебных пособий была составлена в: Bootstrap Basic Lutorials Специальные темы, добро пожаловать, чтобы щелкнуть, чтобы учиться.
Выше приведено в этой статье, я надеюсь, что для всех будет полезно изучить программирование JavaScript.