StyleBootstrap is an open source UI framework based on Bootstrap. Currently, there are many extension plug-ins based on Bootstrap style, such as Bootswatch, BootMetro, etc. We have introduced these before. StyleBootstrap should be said to be an extension of Bootstrap style. In addition to some basic buttons, forms, and menus, StyleBootstrap also designed a comprehensive color pickup, which is very good.
Features of StyleBootstrap
It has the characteristics of Bootstrap being simple and efficient, and has flexible configuration.
Compatible with either version of Bootstrap.
A powerful color palette is its biggest feature.
StyleBootstrap related component instances and code
1. Navigation bar
StyleBootstrap's navigation bar functions are relatively powerful. In addition to ordinary menu items, it can also have various combinations of drop-down menus and forms. The bigger highlight is that it can customize and adjust the style of the menu, including parameters such as upper and lower margins, background color, etc.
Core CSS code:
.navbar-inner { background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2); background-image: -ms-linear-gradient(top, #ffffff, #f2f2f2); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2)); background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2); background-image: -o-linear-gradient(top, #ffffff, #f2f2f2); background-image: -o-linear-gradient(top, #ffffff, #f2f2f2); background-image: -o-linear-gradient(top, #ffffff, #f2f2f2); background-image: -o-linear-gradient(top, #ffffff, #f2f2f2); background-image: linear-gradient(top, #ffffff, #f2f2f2); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#'ffffff, endColorstr='#'f2f2f2, GradientType=0);}.navbar .brand { padding: 8px 20px 12px; font-size: 20px; color: #727272;}.navbar .divider-vertical { height: 41px; background-color: #ffffff; border-right: 1px solid #c6c6c6;}.navbar .nav > li > a { padding: 10px 10px 11px; font-size: 14px; color: #666666;}.navbar .nav > .active > a,.navbar .nav > .active > a:hover,.navbar .nav > .active > a:focus { color: #424242;}2. Button
Similarly, StyleBootstrap's buttons can not only set rich colors, but also support pull-down, which looks very good.
Core CSS code:
.btn { color: #333333; background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); background-image: linear-gradient(top, #ffffff, #e6e6e6); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#'ffffff, endColorstr='#'e6e6e6, GradientType=0);}.btn:hover,.btn:active,.btn.active,.btn.disabled,.btn[disabled] { color: #333333; background-color: #e6e6e6;}.btn-primary { background-color: #006dcc; background-image: -moz-linear-gradient(top, #0088cc, #0044cc); background-image: -ms-linear-gradient(top, #0088cc, #0044cc); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc)); background-image: -webkit-linear-gradient(top, #0088cc, #0044cc); background-image: -o-linear-gradient(top, #0088cc, #0044cc); background-image: -o-linear-gradient(top, #0088cc, #0044cc); background-image: linear-gradient(top, #0088cc, #0044cc); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#'0088cc, endColorstr='#'0044cc, GradientType=0);}.btn-primary:hover,.btn-primary:active,.btn-primary.active,.btn-primary.disabled,.btn-primary[disabled] { background-color: #0044cc;}.btn-warning { background-image: -moz-linear-gradient(top, #fbb450, #f89406); background-image: -ms-linear-gradient(top, #fbb450, #f89406); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406)); background-image: -webkit-linear-gradient(top, #fbb450, #f89406); background-image: -o-linear-gradient(top, #fbb450, #fbb450, #f89406); background-image: linear-gradient(top, #fbb450, #f89406); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#'fbb450, endColorstr='#'f89406, GradientType=0);}.btn-warning:hover,.btn-warning:active,.btn-warning.active,.btn-warning.disabled,.btn-warning[disabled] { background-color: #f89406;}.btn-danger { color: background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f); background-image: -ms-linear-gradient(top, #ee5f5b, #bd362f); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f)); background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f); background-image: -o-linear-gradient(top, #ee5f5b, #bd362f); background-image: -o-linear-gradient(top, #ee5f5b, #bd362f); background-image: linear-gradient(top, #ee5f5b, #bd362f); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#'ee5f5b, endColorstr='#'bd362f, GradientType=0);}.btn-danger:hover,.btn-danger:active,.btn-danger.active,.btn-danger.disabled,.btn-danger[disabled] { background-color: #bd362f}.btn-success { color: background-image: -moz-linear-gradient(top, #62c462, #51a351); background-image: -ms-linear-gradient(top, #62c462, #51a351); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351)); background-image: -webkit-linear-gradient(top, #62c462, #51a351); background-image: -o-linear-gradient(top, #62c462, #51a351); background-image: -o-linear-gradient(top, #62c462, #51a351); background-image: linear-gradient(top, #62c462, #51a351); filter: 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] { background-color: #51a351;}.btn-info { color: #ffffff; background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4); background-image: -ms-linear-gradient(top, #5bc0de, #2f96b4); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4)); background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4); background-image: -o-linear-gradient(top, #5bc0de, #2f96b4); background-image: -o-linear-gradient(top, #5bc0de, #2f96b4); background-image: linear-gradient(top, #5bc0de, #2f96b4); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#'5bc0de, endColorstr='#'2f96b4, GradientType=0);}.btn-info:hover,.btn-info:active,.btn-info.active,.btn-info.disabled,.btn-info[disabled] { background-color: #2f96b4;}3. Color collector
StyleBootstrap's color picker is very powerful. You can select a color from the color version, or enter the hexadecimal value of the color. At the same time, you can drag the color block area to quickly locate the color you need.
Using jPicker plug-in, you can download the CSS code of the jPicker plug-in here and reference it to the project, and then call it through the following CSS code:
@media all { #jPicker { margin: 0px 8px; text-align: left; } #jPicker ul { font-size: 15px; margin: 0px 0px 15px; padding: 0px; } #jPicker ul li { list-style: disc; padding: 2px 0px; } #jPicker ul li ul { margin-bottom: 10px; } #jPicker ul li ul li { list-style: circle; } #jPicker p { font-size: 13px; padding: 0px 10px; } #jPicker hr { clear: both; } #jPicker h2.jPicker { font-size: 16px; padding: 20px 10px; } #jPicker code { color: #8bd; font-size: 14px; font-weight: bold; } #jPicker pre { background: #eee; border: 1px solid #000; color: #000; display: block; font-size: 11px; margin: 10px 5px; padding: 5px; } #jPicker span { font-size: 13px; text-align: center; } #jPicker a { color: #ff8050; } #jPicker input { font-size: 13px; padding: 2px 5px; } #jPicker h2 { font-size: 16px; margin: 10px 0px; }}Summarize
In general, StyleBootstrap is still good as a CSS framework. For more information about the use of StyleBootstrap, you can also go directly to its official website to view it.
If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.