基於Bootstrap的UI擴展StyleBootstrap

StyleBootstrap是一款基於Bootstrap的開源UI框架，目前基於Bootstrap風格的擴展插件很多，比如Bootswatch、BootMetro等，這些之前我們都有做過介紹。 StyleBootstrap應該說是對Bootstrap樣式風格的一種擴展，除了一些基本的按鈕、表單、菜單之外，StyleBootstrap還設計了功能全面的顏色拾取器，非常不錯。

StyleBootstrap的特點

擁有Bootstrap簡潔高效的特點，配置靈活。

兼容任一版本的Bootstrap。

功能強大的調色板是其最大的特色。

StyleBootstrap相關組件實例及代碼

一、導航條

StyleBootstrap的導航條功能比較強大，除了普通的菜單項，還可以有下拉菜單和表單的各種組合，其更大的亮點是可以自定義調節菜單的樣式，包括上下邊距、背景色等參數。

核心CSS代碼：

 .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: 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;}

二、按鈕

同樣的，StyleBootstrap的按鈕不僅可以設置豐富的色彩，而且同樣支持下拉，外觀非常不錯。

核心CSS代碼：

 .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; color: #ffffff; 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: 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 { color: #ffffff; 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, #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: #ffffff; 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: 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: #ffffff; 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: 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: 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;}

三、取色器

StyleBootstrap的取色器功能很強大，你可以從色版上選擇一種顏色，也可以輸入顏色的十六進制值，同時你可以拖動色塊區域快速定位你需要的顏色。

運用了jPicker插件，關於jPicker插件的CSS代碼，你可以在這裡下載，並引用到項目中，然後通過以下CSS代碼調用：

 @media all { #jPicker { margin: 0px 8px; text-align: left; } #jPicker ul { font-size: 15px; margin: 0px 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; }}

總結

總的來說，StyleBootstrap作為一款CSS框架還是不錯的，更多關於StyleBootstrap的使用，你也可以直接前往其官方網站進行查看。

如果大家還想深入學習，可以點擊這裡進行學習，再為大家附3個精彩的專題：

Bootstrap學習教程

Bootstrap實戰教程

Bootstrap插件使用教程

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。