Stylebootstrap adalah kerangka UI open source berdasarkan bootstrap. Saat ini, ada banyak plug-in ekstensi berdasarkan gaya bootstrap, seperti bootswatch, bootmetro, dll. Kami telah memperkenalkannya sebelumnya. Stylebootstrap harus dikatakan sebagai perpanjangan gaya bootstrap. Selain beberapa tombol, bentuk, dan menu dasar, Stylebootstrap juga merancang pickup warna yang komprehensif, yang sangat bagus.
Fitur Stylebootstrap
Ini memiliki karakteristik bootstrap sederhana dan efisien, dan memiliki konfigurasi yang fleksibel.
Kompatibel dengan kedua versi bootstrap.
Palet warna yang kuat adalah fitur terbesarnya.
Stylebootstrap Komponen Terkait Instance dan Code
1. Bilah navigasi
Fungsi bilah navigasi Stylebootstrap relatif kuat. Selain item menu biasa, ia juga dapat memiliki berbagai kombinasi menu dan formulir drop-down. Sorotan yang lebih besar adalah dapat menyesuaikan dan menyesuaikan gaya menu, termasuk parameter seperti margin atas dan bawah, warna latar belakang, dll.
Kode CSS inti:
.navbar-inner {latar belakang-gambar: -moz-linear-gradient (atas, #ffffff, #f2f2f2); latar belakang-gambar: -ms-linear-gradient (atas, #FFFFFF, #f2f2f2); latar belakang-gambar: -webkit-gradient (linear, 0 0, 0 100%, dari (#ffffff), ke (#f2f2f2)); latar belakang-gambar: -webkit-linear-gradient (atas, #ffffff, #f2f2f2); latar belakang-gambar: -o-linear-gradient (atas, #ffffff, #f2f2f2); latar belakang-gambar: -o-linear-gradient (atas, #ffffff, #f2f2f2); latar belakang-gambar: -o-linear-gradient (atas, #ffffff, #f2f2f2); latar belakang-gambar: -o-linear-gradient (atas, #ffffff, #f2f2f2); latar belakang-gambar: linear-gradient (atas, #ffffff, #f2f2f2); Filter: progid: dximagetransform.microsoft.gradient (startColorStr = '#' ffffff, endcolorstr = '#' f2f2f2, gradientType = 0);}. Navbar .Brand {padding: 8px 20px 12px; font-size: 20px; Warna: #727272;}. Navbar .Divider-Vertical {Height: 41px; Latar Belakang-Color: #FFFFFF; Border-Right: 1px solid #c6c6c6;}. navbar .nav> li> a {padding: 10px 10px 11px; Ukuran font: 14px; Warna: #666666;}. NAVBAR .NAV> .Active> a, .navbar .nav> .Active> A: Hover, .Navbar .nav> .Active> A: Focus {Color: #424242;}2. Tombol
Demikian pula, tombol Stylebootstrap tidak hanya dapat mengatur warna yang kaya, tetapi juga mendukung pull-down, yang terlihat sangat bagus.
Kode CSS inti:
.btn {warna: #333333; latar belakang-gambar: -moz-linear-gradient (atas, #ffffff, #e6e6e6); latar belakang-gambar: -ms-linear-gradient (atas, #ffffff, #e6e6e6); latar belakang-gambar: -webkit-gradient (linear, 0 0, 0 100%, dari (#ffffff), ke (#e6e6e6)); latar belakang-gambar: -webkit-linear-gradient (atas, #ffffff, #e6e6e6); latar belakang-gambar: -o-linear-gradient (atas, #FFFFFF, #e6e6e6); latar belakang-gambar: linear-gradient (atas, #ffffff, #e6e6e6); Filter: Progid: dximagetransform.microsoft.gradient (startColorStr = '#' ffffff, endcolorstr = '#' e6e6e6, gradientType = 0);}. Btn: hover, .btn: Active ,.btn.active ,.btn.disabled ,. latar belakang-warna: #e6e6e6;}. btn-primary {background-color: #006dcc; latar belakang-gambar: -moz-linear-gradient (atas, #0088cc, #0044cc); latar belakang-gambar: -ms-linear-gradient (atas, #0088cc, #0044cc); latar belakang-gambar: -webkit-gradient (linear, 0 0, 0 100%, dari (#0088cc), ke (#0044cc)); latar belakang-gambar: -webkit-linear-gradient (atas, #0088cc, #0044cc); latar belakang-gambar: -o-linear-gradient (atas, #0088cc, #0044cc); latar belakang-gambar: -o-linear-gradient (atas, #0088cc, #0044cc); latar belakang-gambar: linear-gradient (atas, #0088cc, #0044cc); Filter: Progid: dximagetransform.microsoft.gradient (startColorStr = '#' 0088cc, endcolorstr = '#' 0044cc, gradientType = 0);}. BTN-primary: .Btn-primary: aktif, .btn-primary. {latar belakang-warna: #0044cc;}. Btn-warning {latar belakang-gambar: -moz-linear-gradient (atas, #fbb450, #f89406); latar belakang-gambar: -ms-linear-gradient (atas, #fbb450, #f89406); latar belakang-gambar: -webkit-gradient (linear, 0 0, 0 100%, dari (#fbb450), ke (#f89406)); latar belakang-gambar: -webkit-linear-gradient (atas, #fbb450, #f89406); latar belakang-gambar: -o-linear-gradient (atas, #fbb450, #fbb450, #f89406); latar belakang-gambar: linear-gradient (atas, #fbb450, #f89406); Filter: Progid: dximagetransform.microsoft.gradient (startColorStr = '#' fbb450, endcolorstr = '#' f89406, gradienttype = 0);}. Btn-warning: hover, .btn-warning: aktif ,.btn-warning.aktif,. {latar belakang-warna: #f89406;}. Btn-Danger {color: latar belakang-gambar: -moz-linear-gradient (atas, #ee5f5b, #bd362f); latar belakang-gambar: -ms-linear-gradient (atas, #ee5f5b, #bd362f); latar belakang-gambar: -webkit-gradient (linear, 0 0, 0 100%, dari (#ee5f5b), ke (#bd362f)); latar belakang-gambar: -webkit-linear-gradient (atas, #ee5f5b, #bd362f); latar belakang-gambar: -o-linear-gradient (atas, #ee5f5b, #bd362f); latar belakang-gambar: -o-linear-gradient (atas, #ee5f5b, #bd362f); latar belakang-gambar: linear-gradient (atas, #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 [dinonaktifkan] {latar belakang: #bd362f} .btn-sucsess {color: latar belakang: -mage:-latar belakang: -moage}. #51A351); latar belakang-gambar: -MS-linear-gradient (atas, #62c462, #51a351); latar belakang-gambar: -webkit-gradient (linear, 0 0, 0 100%, dari (#62c462), ke (#51a351)); latar belakang-gambar: -webkit-linear-gradient (atas, #62c462, #51a351); latar belakang-gambar: -o-linear-gradient (atas, #62c462, #51a351); latar belakang-gambar: -o-linear-gradient (atas, #62c462, #51a351); latar belakang-gambar: linear-gradient (atas, #62c462, #51a351); Filter: progid: dximagetransform.microsoft.gradient (startColorStr = '#' 62c462, endcolorstr = '#' 51a351, GradientType = 0);}. Btn-success: hover, .btn-success: aktif, .btn-success.active, .btn-success.disabled, .btn-success [dinonaktifkan] {latar belakang: #51a351;}. Btn-info { #51a351; latar belakang-gambar: -moz-linear-gradient (atas, #5bc0de, #2f96b4); latar belakang-gambar: -ms-linear-gradient (atas, #5bc0de, #2f96b4); latar belakang-gambar: -webkit-gradient (linear, 0 0, 0 100%, dari (#5bc0de), ke (#2f96b4)); latar belakang-gambar: -webkit-linear-gradient (atas, #5bc0de, #2f96b4); latar belakang-gambar: -o-linear-gradient (atas, #5bc0de, #2f96b4); latar belakang-gambar: -o-linear-gradient (atas, #5bc0de, #2f96b4); latar belakang-gambar: linear-gradient (atas, #5bc0de, #2f96b4); Filter: Progid: dximagetransform.microsoft.gradient (startColorStr = '#' 5BC0DE, endColorStr = '#' 2F96B4, GradientType = 0);}. Btn-info: hover, .btn-info: aktif, .btn-info.active, .btn-info.disabled, .btn-info [dinonaktifkan] {latar belakang-color: #2f96b4;}3. Kolektor Warna
Pemetik warna Stylebootstrap sangat kuat. Anda dapat memilih warna dari versi warna, atau memasukkan nilai heksadesimal warna. Pada saat yang sama, Anda dapat menyeret area blok warna untuk dengan cepat menemukan warna yang Anda butuhkan.
Menggunakan plug-in jpicker, Anda dapat mengunduh kode CSS plug-in JPicker di sini dan merujuknya ke proyek, dan kemudian memanggilnya melalui kode CSS berikut:
@media all {#jpicker {margin: 0px 8px; Teks-Align: Kiri; } #jpicker ul {font-size: 15px; margin: 0px 0px 15px; padding: 0px; } #jpicker ul li {List-style: disc; padding: 2px 0px; } #jpicker ul li {margin-bottom: 10px; } #jpicker ul li li {List-style: Circle; } #jpicker p {font-size: 13px; padding: 0px 10px; } #jpicker hr {clear: keduanya; } #jpicker h2.jpicker {font-size: 16px; padding: 20px 10px; } Kode #jpicker {Color: #8BD; Ukuran font: 14px; font-weight: tebal; } #jpicker pre {background: #eee; Perbatasan: 1px Solid #000; Warna: #000; Tampilan: Blok; Ukuran font: 11px; margin: 10px 5px; padding: 5px; } #jpicker span {font-size: 13px; Teks-Align: tengah; } #jpicker a {color: #ff8050; } input #jpicker {font-size: 13px; padding: 2px 5px; } #jpicker h2 {font-size: 16px; margin: 10px 0px; }}Meringkaskan
Secara umum, stylebootstrap masih bagus sebagai kerangka kerja CSS. Untuk informasi lebih lanjut tentang penggunaan stylebootstrap, Anda juga dapat langsung pergi ke situs web resminya untuk melihatnya.
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan 3 topik menarik kepada Anda:
Tutorial Pembelajaran Bootstrap
Tutorial Praktis Bootstrap
Tutorial Penggunaan Plug-In Bootstrap
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.