StyleBootstrap هو إطار واجهة المستخدم مفتوح المصدر يعتمد على bootstrap. حاليًا ، هناك العديد من المكونات الإضافية للتمديد استنادًا إلى نمط bootstrap ، مثل bootswatch ، bootmetro ، إلخ. لقد قدمناها من قبل. يجب أن يقال أن StyleBootstrap امتداد لأسلوب bootstrap. بالإضافة إلى بعض الأزرار والأشكال والقوائم الأساسية ، صمم StyleBootstrap أيضًا التقاط ألوان شامل ، وهو أمر جيد جدًا.
ميزات stylebootstrap
لديها خصائص bootstrap تكون بسيطة وفعالة ، ولها تكوين مرن.
متوافق مع أي إصدار من bootstrap.
لوحة ألوان قوية هي أكبر ميزة لها.
مثيلات المكونات ذات الصلة بالأنماط والرمز والرمز
1. شريط الملاحة
وظائف شريط التنقل في StyleBootstrap قوية نسبيا. بالإضافة إلى عناصر القائمة العادية ، يمكن أن تحتوي أيضًا على مجموعات مختلفة من القوائم والأشكال المنسدلة. أبرز ما أكبر هو أنه يمكن تخصيص أسلوب القائمة وضبطها ، بما في ذلك المعلمات مثل هوامش الخلفية العلوية والسفلية ، ولون الخلفية ، إلخ.
رمز CSS الأساسي:
.Navbar-Inner {background-image: -moz-linar-radient (top ، #ffffff ، #f2f2f2) ؛ صورة الخلفية: -MS-Linar-Radient (Top ، #ffffff ، #f2f2f2) ؛ خلفية-صورة: -webkit-radient (خطي ، 0 0 ، 0 100 ٪ ، من (#ffffff) ، إلى (#f2f2f2)) ؛ خلفية-صورة: -webkit-linar-regient (Top ، #ffffff ، #f2f2f2) ؛ -صورة الخلفية: -O-Linar-Radient (Top ، #ffffff ، #f2f2f2) ؛ -صورة الخلفية: -O-Linar-Radient (Top ، #ffffff ، #f2f2f2) ؛ -صورة الخلفية: -O-Linar-Radient (Top ، #ffffff ، #f2f2f2) ؛ -صورة الخلفية: -O-Linar-Radient (Top ، #ffffff ، #f2f2f2) ؛ الخلفية-صورة: Linear-Radient (Top ، #ffffff ، #f2f2f2) ؛ Filter: ProgID: dximagetransform.microsoft.gradient (startColorstr = '#' ffffff ، endcolorstr = '#' f2f2f2 ، gradientType = 0) ؛}. حجم الخط: 20 بكسل ؛ اللون: #727272 ؛} خلفية اللون: #ffffff ؛ الحدود اليمين: 1PX Solid #C6C6C6 ؛}. NAVBAR .NAV> li> a {padding: 10px 10px 11px ؛ حجم الخط: 14px ؛ اللون: #666666 ؛}2. زر
وبالمثل ، لا يمكن لأزرار StyleBootStrap تعيين ألوان غنية فحسب ، بل تدعم أيضًا المنسدلة ، والتي تبدو جيدة جدًا.
رمز CSS الأساسي:
.btn {color: #333333 ؛ -صورة الخلفية: -Moz-Linar-Radient (Top ، #ffffff ، #e6e6e6) ؛ خلفية-صورة: -MS-Linar-Radient (Top ، #ffffff ، #e6e6e6) ؛ خلفية-صورة: -webkit-radient (خطي ، 0 0 ، 0 100 ٪ ، من (#ffffff) ، إلى (#e6e6e6)) ؛ خلفية-صورة: -webkit-linar-radient (Top ، #ffffff ، #e6e6e6) ؛ -صورة الخلفية: -O-Linar-Radient (Top ، #ffffff ، #e6e6e6) ؛ الخلفية-صورة: Linear-Radient (Top ، #ffffff ، #e6e6e6) ؛ Filter: ProgID: dimizageTransform.microsoft.gradient (startColorStr = '#' ffffff ، endcolorstr = '#' e6e6e6 ، gradientType = 0) ؛}. btn: hover ، .btn:. خلفية اللون: #e6e6e6 ؛}. خلفية-صورة: -Moz-Linar-Radient (Top ، #0088cc ، #0044cc) ؛ خلفية-صورة: -MS-Linar-Radient (Top ، #0088cc ، #0044cc) ؛ خلفية-صورة: -webkit-radient (خطي ، 0 0 ، 0 100 ٪ ، من (#0088cc) ، إلى (#0044cc)) ؛ خلفية-صورة: -webkit-linar-radient (TOP ، #0088CC ، #0044CC) ؛ خلفية صورة: -O-Linar-Radient (Top ، #0088cc ، #0044cc) ؛ خلفية صورة: -O-Linar-Radient (Top ، #0088cc ، #0044cc) ؛ صورة الخلفية: Linear-Radient (Top ، #0088cc ، #0044cc) ؛ Filter: progid: dimizageTransform.microsoft.gradient (StartColorstr = '#' 0088cc ، endcolorstr = '#' 0044cc ، GradientType = 0) ؛}. #F89406) ؛ -صورة الخلفية: -MS-Linar-Radient (TOP ، #FBB450 ، #F89406) ؛ خلفية-صورة: -webkit-radient (خطي ، 0 0 ، 0 100 ٪ ، من (#fbb450) ، إلى (#f89406)) ؛ خلفية-صورة: -webkit-linar-radient (Top ، #fbb450 ، #f89406) ؛ خلفية-صورة: -O-Linar-Radient (TOP ، #FBB450 ، #FBB450 ، #F89406) ؛ الخلفية-صورة: الخطية (TOP ، #FBB450 ، #F89406) ؛ Filter: progid: dimizageTransform.microsoft.gradient (startColorstr = '#' fbb450 ، endcolorstr = '#' f89406 ، gradientType = 0) ؛}. خلفية اللون: #f89406 ؛}. -صورة الخلفية: -MS-Linar-Radient (TOP ، #EE5F5B ، #BD362F) ؛ خلفية-صورة: -webkit-radient (خطي ، 0 0 ، 0 100 ٪ ، من (#ee5f5b) ، إلى (#bd362f)) ؛ خلفية-صورة: -webkit-linar-radient (TOP ، #EE5F5B ، #BD362F) ؛ خلفية-صورة: -O-Linar-Radient (TOP ، #EE5F5B ، #BD362F) ؛ خلفية-صورة: -O-Linar-Radient (TOP ، #EE5F5B ، #BD362F) ؛ خلفية صورة: Linear-Radient (Top ، #EE5F5B ، #BD362F) ؛ Filter: progid: dimizageTransform.microsoft.gradient (startColorStr = '#' ee5f5b ، endcolorstr = '#' bd362f ، gradientType = 0) ؛}. btn-danger: hover ، .btn-danger:. #bd362f} .btn-success {color: background-image: -moz-liner-rgirient (top ، #62c462 ، #51a351) ؛ صورة الخلفية: -MS-Linar-Radient (Top ، #62C462 ، #51a351) ؛ خلفية-صورة: -webkit-radient (خطي ، 0 0 ، 0 100 ٪ ، من (#62C462) ، إلى (#51A351)) ؛ صورة الخلفية: -webkit-linar-Radient (Top ، #62C462 ، #51a351) ؛ خلفية-صورة: -O-Linar-Radient (Top ، #62C462 ، #51a351) ؛ خلفية-صورة: -O-Linar-Radient (Top ، #62C462 ، #51a351) ؛ صورة الخلفية: Linear-Radient (TOP ، #62C462 ، #51A351) ؛ Filter: progid: dimizageTransform.microsoft.gradient (StartColorstr = '#' 62C462 ، endcolorstr = '#' 51a351 ، GradientType = 0) ؛} خلفية-صورة: -Moz-Liner-Radient (Top ، #5BC0DE ، #2F96B4) ؛ صورة الخلفية: -MS-Linar-Radient (TOP ، #5BC0DE ، #2F96B4) ؛ الخلفية-صورة: -webkit-radient (خطي ، 0 0 ، 0 100 ٪ ، من (#5BC0DE) ، إلى (#2F96B4)) ؛ خلفية-صورة: -webkit-linar-radient (TOP ، #5BC0DE ، #2F96B4) ؛ خلفية-صورة: -O-Linar-Radient (Top ، #5BC0DE ، #2F96B4) ؛ خلفية-صورة: -O-Linar-Radient (Top ، #5BC0DE ، #2F96B4) ؛ خلفية صورة: Linear-Radient (Top ، #5BC0DE ، #2F96B4) ؛ Filter: progid: dimizageTransform.microsoft.gradient (startColorstr = '#' 5bc0de ، endcolorstr = '#' 2f96b4 ، gradientType = 0) ؛}. لون الخلفية: #2F96B4 ؛}3. جامع الألوان
منتقي ألوان StyleBootstrap قوي للغاية. يمكنك تحديد لون من إصدار اللون ، أو إدخال القيمة السداسية للون. في الوقت نفسه ، يمكنك سحب منطقة كتلة الألوان لتحديد موقع اللون الذي تحتاجه بسرعة.
باستخدام المكونات الإضافية JPicker ، يمكنك تنزيل رمز CSS الخاص بمكون JPicker هنا والرجوع إليه إلى المشروع ، ثم اتصل به من خلال رمز CSS التالي:
media all {#jpicker {margin: 0px 8px ؛ محاذاة النص: اليسار ؛ } #jpicker ul {font-size: 15px ؛ الهامش: 0px 0px 15px ؛ الحشو: 0px ؛ } #jpicker ul li {style style: disc ؛ الحشو: 2px 0px ؛ } #jpicker ul li ul {margin-bottom: 10px ؛ } #jpicker ul li ul li {style 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 {background: #EEE ؛ الحدود: 1 بكسل الصلبة #000 ؛ اللون: #000 ؛ العرض: كتلة ؛ حجم الخط: 11px ؛ الهامش: 10px 5px ؛ الحشو: 5 بكسل ؛ } #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 التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.