Stylebootstrap เป็นเฟรมเวิร์ก UI โอเพ่นซอร์สตาม bootstrap ปัจจุบันมีปลั๊กอินส่วนขยายมากมายตามสไตล์ bootstrap เช่น bootswatch, bootmetro ฯลฯ เราได้แนะนำสิ่งเหล่านี้มาก่อน Stylebootstrap ควรกล่าวกันว่าเป็นส่วนขยายของสไตล์ bootstrap นอกเหนือจากปุ่มพื้นฐานรูปแบบและเมนู Stylebootstrap ยังออกแบบรถปิคอัพสีที่ครอบคลุมซึ่งดีมาก
คุณสมบัติของ Stylebootstrap
มันมีลักษณะของ bootstrap ง่ายและมีประสิทธิภาพและมีการกำหนดค่าที่ยืดหยุ่น
เข้ากันได้กับ Bootstrap ทั้งสองรุ่น
จานสีที่ทรงพลังเป็นคุณสมบัติที่ใหญ่ที่สุด
Stylebootstrap อินสแตนซ์และรหัสส่วนประกอบที่เกี่ยวข้อง
1. แถบนำทาง
ฟังก์ชั่นแถบการนำทางของ Stylebootstrap นั้นค่อนข้างทรงพลัง นอกเหนือจากรายการเมนูธรรมดาแล้วยังสามารถมีเมนูและแบบฟอร์มแบบเลื่อนลงได้หลายแบบ ไฮไลท์ที่ใหญ่กว่าคือมันสามารถปรับแต่งและปรับสไตล์ของเมนูรวมถึงพารามิเตอร์เช่นระยะขอบบนและล่างสีพื้นหลัง ฯลฯ
รหัส CSS หลัก:
.navbar-inner {background-image: -moz-linear-gradient (top, #ffffff, #f2f2f2); ภาพพื้นหลัง-ภาพ: -ms-linear-gradient (บนสุด, #ffffff, #f2f2f2); พื้นหลัง-ภาพ: -webkit-gradient (linear, 0 0, 0 100%, จาก (#ffffff), ถึง (#f2f2f2)); พื้นหลัง-ภาพ: -webkit-linear-gradient (บนสุด, #FFFFFF, #F2F2F2); พื้นหลัง-ภาพ: -O-linear-gradient (บนสุด, #FFFFFF, #F2F2F2); พื้นหลัง-ภาพ: -O-linear-gradient (บนสุด, #FFFFFF, #F2F2F2); พื้นหลัง-ภาพ: -O-linear-gradient (บนสุด, #FFFFFF, #F2F2F2); พื้นหลัง-ภาพ: -O-linear-gradient (บนสุด, #FFFFFF, #F2F2F2); ภาพพื้นหลัง: linear-gradient (บนสุด, #FFFFFF, #F2F2F2); ตัวกรอง: progid: dximagetransform.microsoft.gradient (startColorStr = '#' ffffff, endColorSTR = '#' F2F2F2, GRADIENTTYPE = 0);}. NAVBAR .BRAND ขนาดตัวอักษร: 20px; สี: #727272;}. Navbar. Divider-Vertical {ความสูง: 41px; พื้นหลังสี: #ffffff; Border-Right: 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: โฟกัส {สี: #424242;};2. ปุ่ม
ในทำนองเดียวกันปุ่มของ Stylebootstrap ไม่เพียง แต่ตั้งค่าสีที่หลากหลาย แต่ยังรองรับการดึงลงซึ่งดูดีมาก
รหัส CSS หลัก:
.BTN {สี: #333333; พื้นหลัง-ภาพ: -moz-linear-gradient (บนสุด, #ffffff, #e6e6e6); ภาพพื้นหลัง-ภาพ: -ms-linear-gradient (บนสุด, #ffffff, #e6e6e6); พื้นหลัง-ภาพ: -webkit-gradient (linear, 0 0, 0 100%, จาก (#ffffff), ถึง (#e6e6e6)); พื้นหลัง-ภาพ: -webkit-linear-gradient (บนสุด, #ffffff, #e6e6e6); พื้นหลัง-ภาพ: -o-linear-gradient (บนสุด, #ffffff, #e6e6e6); ภาพพื้นหลัง: linear-gradient (บนสุด, #FFFFFF, #E6E6E6); ตัวกรอง: progid: dximagetransform.microsoft.gradient (startColorstr = '#' ffffff, endColorstr = '#' e6E6E6, gradientType = 0);}. btn: hover, .btn: แอคทีฟ พื้นหลังสี: #e6e6e6;}. btn-primary {พื้นหลังสี: #006dcc; พื้นหลัง-ภาพ: -moz-linear-gradient (บนสุด, #0088cc, #0044cc); ภาพพื้นหลัง: -ms-linear-gradient (บนสุด, #0088cc, #0044cc); ภาพพื้นหลัง-ภาพ: -webkit-gradient (linear, 0 0, 0 100%, จาก (#0088cc), ถึง (#0044cc)); พื้นหลัง-ภาพ: -webkit-linear-gradient (บนสุด, #0088cc, #0044cc); พื้นหลัง-ภาพ: -O-linear-gradient (บนสุด, #0088cc, #0044cc); พื้นหลัง-ภาพ: -O-linear-gradient (บนสุด, #0088cc, #0044cc); ภาพพื้นหลัง: linear-gradient (บนสุด, #0088cc, #0044cc); ตัวกรอง: progid: dximagetransform.microsoft.gradient (startColorstr = '#' 0088cc, endColorSTR = '#' 0044CC, gradientType = 0);}. btn-primary: hover, .btn-primary พื้นหลังสี: #0044cc;}. BTN-Warning {Background-Image: -moz-Linear-Gradient (บนสุด, #FBB450, #F89406); ภาพพื้นหลัง: -ms-linear-gradient (บนสุด, #FBB450, #F89406); พื้นหลัง-ภาพ: -webkit-gradient (linear, 0 0, 0 100%, จาก (#fbb450), ถึง (#F89406)); พื้นหลัง-ภาพ: -webkit-linear-gradient (บนสุด, #FBB450, #F89406); ภาพพื้นหลัง: -O-LINEAR-GRADIENT (บนสุด, #FBB450, #FBB450, #F89406); ภาพพื้นหลัง: linear-gradient (บนสุด, #FBB450, #F89406); ตัวกรอง: progid: dximagetransform.microsoft.gradient (startColorstr = '#' fbb450, endColorstr = '#' f89406, gradientType = 0); พื้นหลังสี: #F89406;}. btn-danger {color: background-image: -moz-linear-gradient (บนสุด, #ee5f5b, #bd362f); ภาพพื้นหลัง: -ms-linear-gradient (บนสุด, #ee5f5b, #bd362f); พื้นหลัง-ภาพ: -webkit-gradient (linear, 0 0, 0 100%, จาก (#EE5F5B), ถึง (#BD362F)); พื้นหลัง-ภาพ: -webkit-linear-gradient (บนสุด, #ee5f5b, #bd362f); พื้นหลัง-ภาพ: -o-linear-gradient (บนสุด, #ee5f5b, #bd362f); พื้นหลัง-ภาพ: -o-linear-gradient (บนสุด, #ee5f5b, #bd362f); ภาพพื้นหลัง: linear-gradient (บนสุด, #EE5F5B, #BD362F); ตัวกรอง: progid: dximagetransform.microsoft.gradient (startColorstr = '#' ee5f5b, endColorstr = '#' bd362f, gradientType = 0); {พื้นหลัง-สี: #bd362f} .btn-success {color: background-image: -moz-linear-gradient (ด้านบน, #62C462, #51A351); ภาพพื้นหลัง: -ms-linear-gradient (บนสุด, #62C462, #51A351); พื้นหลัง-ภาพ: -webkit-gradient (linear, 0 0, 0 100%, จาก (#62C462), ถึง (#51A351)); พื้นหลัง-ภาพ: -webkit-linear-gradient (บนสุด, #62C462, #51A351); พื้นหลัง-ภาพ: -O-linear-gradient (บนสุด, #62C462, #51A351); พื้นหลัง-ภาพ: -O-linear-gradient (บนสุด, #62C462, #51A351); ภาพพื้นหลัง: linear-gradient (บนสุด, #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 [ปิดใช้งาน] {พื้นหลัง-สี: #51a351;}. btn-info พื้นหลัง-ภาพ: -moz-linear-gradient (บนสุด, #5BC0DE, #2F96B4); ภาพพื้นหลัง: -ms-linear-gradient (บนสุด, #5BC0DE, #2F96B4); ภาพพื้นหลัง-ภาพ: -webkit-gradient (linear, 0 0, 0 100%, จาก (#5BC0DE), ถึง (#2F96B4)); พื้นหลัง-ภาพ: -webkit-linear-gradient (บนสุด, #5BC0DE, #2F96B4); พื้นหลัง-ภาพ: -O-linear-gradient (บนสุด, #5BC0DE, #2F96B4); พื้นหลัง-ภาพ: -O-linear-gradient (บนสุด, #5BC0DE, #2F96B4); ภาพพื้นหลัง: linear-gradient (บนสุด, #5BC0DE, #2F96B4); ตัวกรอง: progid: dximagetransform.microsoft.gradient (startColorStr = '#' 5BC0DE, endColorSTR = '#' 2F96B4, gradientType = 0);}. btn-info: hover, .btn-info: active {พื้นหลังสี: #2F96B4;}3. ตัวสะสมสี
ตัวเลือกสีของ Stylebootstrap นั้นทรงพลังมาก คุณสามารถเลือกสีจากรุ่นสีหรือป้อนค่าเลขฐานสิบหกของสี ในเวลาเดียวกันคุณสามารถลากพื้นที่บล็อกสีเพื่อค้นหาสีที่คุณต้องการได้อย่างรวดเร็ว
การใช้ปลั๊กอิน JPicker คุณสามารถดาวน์โหลดรหัส CSS ของปลั๊กอิน JPicker ได้ที่นี่และอ้างอิงไปยังโครงการแล้วเรียกมันผ่านรหัส CSS ต่อไปนี้:
@media all {#jpicker {margin: 0px 8px; TEXT-ALIGN: ซ้าย; } #jpicker ul {font-size: 15px; มาร์จิ้น: 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: ทั้งสอง; } #JPICKER H2.JPICKER {FONT-SIZE: 16PX; Padding: 20px 10px; } #JPICKER CODE {COLOR: #8BD; ขนาดตัวอักษร: 14px; Font-Weight: ตัวหนา; } #JPICKER PRE {พื้นหลัง: #EEE; ชายแดน: 1px Solid #000; สี: #000; แสดง: บล็อก; ขนาดตัวอักษร: 11px; มาร์จิ้น: 10px 5px; ช่องว่าง: 5px; } #JPICKER Span {FONT-SIZE: 13PX; TEXT-ALIGN: CENTER; } #jpicker a {color: #ff8050; } #jpicker อินพุต {font-size: 13px; Padding: 2px 5px; } #JPICKER H2 {FONT-SIZE: 16PX; มาร์จิ้น: 10px 0px; -สรุป
โดยทั่วไป Stylebootstrap ยังคงดีเหมือนกรอบ CSS สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการใช้ Stylebootstrap คุณสามารถไปที่เว็บไซต์ทางการโดยตรงเพื่อดูได้
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น