StyleBootStrap - это рамка пользовательского интерфейса с открытым исходным кодом, основанная на начальной загрузке. В настоящее время существует множество плагинов для расширения на основе стиля Bootstrap, таких как Bootswatch, Bootmetro и т. Д. Мы представили их раньше. Следует сказать, что StyleBootStrap является продолжением стиля начальной загрузки. В дополнение к некоторым основным кнопкам, формам и меню, StyleBootStrap также разработал комплексный цветовой пикап, который очень хорош.
Особенности StyleBootStrap
Он имеет характеристики того, что начальная загрузка является простым и эффективным, и имеет гибкую конфигурацию.
Совместим с любой версией Bootstrap.
Мощная цветовая палитра - его самая большая особенность.
СПАСИТЕЛЬНЫЙ СПАСИТЕЛЬНЫЙ КОМПОНТЫ И КОД
1. Навигационная планка
Функции навигации StyleBootStrap относительно мощные. В дополнение к обычным пунктам меню, он также может иметь различные комбинации раскрывающихся меню и форм. Больше всегою является то, что он может настраивать и регулировать стиль меню, включая такие параметры, как верхняя и нижняя поля, цвет фона и т. Д.
CORE CSS CODE:
.navbar-inner {founal-image: -moz-linear-gradient (top, #ffffff, #f2f2f2); Фоно-изображение: -ms-linear-gradient (top, #ffffff, #f2f2f2); Справочный Image: -webkit-Gradient (линейный, 0 0, 0 100%, от (#ffffff), до (#f2f2f2)); Фоно-изображение: -Webkit-Linear-Gradient (top, #ffffff, #f2f2f2); Фоно-изображение: -o-linear-gradient (top, #ffffff, #f2f2f2); Фоно-изображение: -o-linear-gradient (top, #ffffff, #f2f2f2); Фоно-изображение: -o-linear-gradient (top, #ffffff, #f2f2f2); Фоно-изображение: -o-linear-gradient (top, #ffffff, #f2f2f2); Фоно-изображение: линейно-градиент (топ, #ffffff, #f2f2f2); Фильтр: Progid: dximagetransform.microsoft.gradient (startColorStr = '#' ffffff, endColorStr = '#' f2f2f2, gradientType = 0);}. Navbar .brand {padding: 8px 20px 12px; размер шрифта: 20px; Цвет: #727272;}. Navbar .divider-Ventical {высота: 41px; фоновый цвет: #ffffff; граница правая: 1px solid #c6c6c6;}. Navbar .nav> li> a {padding: 10px 10px 11px; размер шрифта: 14px; Цвет: #666666;}. Navbar .nav> .active> a, .navbar .nav> .active> a: hover, .navbar .nav> .active> a: Focus {color: #424242;}2. Кнопка
Точно так же кнопки StyleBootStrap могут не только устанавливать богатые цвета, но и поддержать раскрытие, что выглядит очень хорошо.
CORE CSS CODE:
.btn {color: #3333333; Фоно-изображение: -моз-линейр-градиент (топ, #ffffff, #e6e6e6); Facon-Image: -ms-Linear-Gradient (top, #ffffff, #e6e6e6); Справочный Image: -webkit-Gradient (линейный, 0 0, 0 100%, от (#ffffff), до (#e6e6e6)); Справочный Image: -webkit-Linear-Gradient (top, #ffffff, #e6e6e6); Справочный Image: -o-Linear-Gradient (top, #ffffff, #e6e6e6); Фоно-изображение: линейно-градиент (топ, #ffffff, #e6e6e6); Фильтр: Progid: dximagetransform.microsoft.gradient (startColorStr = '#' ffffff, endColorStr = '#' e6e6e6, gradientType = 0);}. Btn: Hover, .btn: Active, .btn.active, .btn.disabled, .btn [disabled]##3333 фоновый цвет: #e6e6e6;}. btn-primary {background-color: #006dcc; Фоно-изображение: -моз-линейр-градиент (вверху, #0088CC, #0044CC); Справочный Image: -ms-Linear-Gradient (Top, #0088CC, #0044CC); Справочный Image: -webkit-Gradient (линейный, 0 0, 0 100%, от (#0088CC), до (#0044CC)); Справочный Image: -webkit-Linear-Gradient (Top, #0088CC, #0044CC); Справочный Image: -o-Linear-Gradient (Top, #0088CC, #0044CC); Справочный Image: -o-Linear-Gradient (Top, #0088CC, #0044CC); Фоно-изображение: линейно-градиент (вверху, #0088CC, #0044CC); Фильтр: Progid: dximagetransform.microsoft.gradient (startColorStr = '#' 0088CC, endColorStr = '#' 0044CC, gradientType = 0);}. Btn-primary: Hover, .btn-primary: Active, .btn-primary.Aviate, .btn-primary.Batn-primary: Active, .btn-primary.bate. фоновый цвет: #0044CC;}. Btn-Warning {founal-image: -moz-linear-gradient (top, #fbb450, #f89406); Справочный Image: -ms-Linear-Gradient (Top, #FBB450, #F89406); Справочный Image: -webkit-Gradient (линейный, 0 0, 0 100%, от (#FBB450), до (#F89406)); Справочный Image: -webkit-Linear-Gradient (Top, #FBB450, #F89406); Справочный Image: -o-Linear-Gradient (Top, #FBB450, #FBB450, #F89406); Фоно-изображение: линейно-градиент (вверху, #FBB450, #F89406); Фильтр: Progid: dximageTransform.microsoft.gradient (startColorStr = '#' fbb450, endColorStr = '#' f89406, gradientType = 0);}. Btn-warning: Hover, .btn-Warning: Active, .bt-Warning.Active,. Фоно-цвета: #F89406;}. Btn-Danger {Color: Facker-Image: -moz-Linear-Gradient (Top, #EE5F5B, #BD362F); Фоно-изображение: -ms-linear-gradient (вверху, #EE5F5B, #BD362F); Справочный Image: -webkit-Gradient (линейный, 0 0, 0 100%, от (#ee5f5b), до (#bd362f)); Справочный Image: -webkit-Linear-Gradient (Top, #EE5F5B, #BD362F); Справочный Image: -o-Linear-Gradient (Top, #EE5F5B, #BD362F); Справочный Image: -o-Linear-Gradient (Top, #EE5F5B, #BD362F); Фоно-изображение: линейно-градиент (вверху, #EE5F5B, #BD362F); Фильтр: Progid: dximagetransform.microsoft.gradient (startColorStr = '#' ee5f5b, endColorStr = '#' bd362f, gradientType = 0);}. Btn-danger: Hover, .btn-danger: Active, .btn-danger.Active, .btn-danger. #bd362f} .btn-success {color: founk-image: -moz-linear-gradient (top, #62c462, #51a351); Справочный Image: -ms-Linear-Gradient (Top, #62C462, #51A351); Справочный Image: -webkit-Gradient (линейный, 0 0, 0 100%, от (#62C462), до (#51A351)); Справочный Image: -webkit-Linear-Gradient (Top, #62C462, #51A351); Справочный Image: -o-Linear-Gradient (Top, #62C462, #51A351); Справочный Image: -o-Linear-Gradient (Top, #62C462, #51A351); Справочный изображение: линейный градиент (вверху, #62C462, #51A351); Фильтр: Progid: dximagetransform.microsoft.gradient (startColorStr = '#' 62C462, EndColorStr = '#' 51A351, GradientType = 0);}. Btn-Success: Hover, .btn-Success: Active, .btn-success.active, .btn-success.disabled, .btn-success [disabled] {фоновый цвет: #51a351;}. Btn-info {#fffffffffffffffffffffffffffffffffffffffffff Справочный Image: -moz-Linear-Gradient (Top, #5bc0de, #2F96B4); Фоно-изображение: -ms-linear-gradient (вверху, #5bc0de, #2F96B4); Справочный Image: -webkit-Gradient (линейный, 0 0, 0 100%, от (#5bc0de), до (#2F96B4)); Фоно-изображение: -Webkit-Linear-Gradient (Top, #5bc0de, #2F96B4); Справочный Image: -o-Linear-Gradient (Top, #5bc0de, #2F96B4); Справочный Image: -o-Linear-Gradient (Top, #5bc0de, #2F96B4); Фоно-изображение: линейно-градиент (вверху, #5bc0de, #2F96B4); Фильтр: Progid: dximagetransform.microsoft.gradient (startColorStr = '#' 5bc0de, endColorStr = '#' 2f96b4, gradientType = 0);}. Btn-info: Hover, .btn-info: Active, .btn-info.active, .btn-infobled,. фоновый цвет: #2f96b4;}3. Цветовой коллектор
Сборщик Colorbootstrap очень мощный. Вы можете выбрать цвет в цветной версии или ввести шестнадцатеричное значение цвета. В то же время вы можете перетащить область цветового блока, чтобы быстро найти нужный цвет.
Используя плагин JPicker, вы можете загрузить код CSS плагина JPicker здесь и ссылаться на его проект, а затем позвонить по следующему коду CSS:
@media all {#jpicker {margin: 0px 8px; Текст-альбом: слева; } #jpicker ul {font-size: 15px; Полевая: 0px 0px 15px; Заполнение: 0px; } #jpicker ul li {list-style: disc; Подкладка: 2px 0px; } #jpicker ul li ul {margin-bottom: 10px; } #jpicker ul li ul li {list-style: circle; } #jpicker p {font-size: 13px; Заполнение: 0px 10px; } #jpicker hr {clear: оба; } #jpicker h2.jpicker {font-size: 16px; Заполнение: 20px 10px; } #jpicker code {color: #8bd; размер шрифта: 14px; шрифт-вес: жирный шрифт; } #jpicker pre {founale: #eee; Граница: 1PX SOLID #000; Цвет: #000; дисплей: блок; размер шрифта: 11px; Маржа: 10px 5px; Заполнение: 5px; } #jpicker span {font-size: 13px; Текст-альбом: Центр; } #jpicker a {color: #ff8050; } #jpicker input {font-size: 13px; Заполнение: 2px 5px; } #jpicker h2 {font-size: 16px; Полевая: 10px 0px; }}Суммировать
В целом, StyleBootStrap по -прежнему хорош как CSS -структура. Для получения дополнительной информации об использовании StyleBootStrap, вы также можете перейти непосредственно на его официальный веб -сайт, чтобы просмотреть его.
Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам 3 захватывающих тем:
Начальная учебник по обучению
Bootstrap Practical Rutorial
Учебное пособие по использованию плагина Bootstrap
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.