مقدمة إلى bootstrap
Bootstrap ، من Twitter ، هو الإطار الأمامي الأكثر شعبية في الوقت الحاضر. يعتمد Bootstrap على HTML و CSS و JavaScript. إنها بسيطة ومرنة ، مما يجعل تطوير الويب أسرع.
مكون Thumbnail
الصور المصغرة الأكثر استخدامًا على مواقع الويب هي صفحة قائمة المنتجات ، التي تعرض عدة صور في سطر واحد ، وبعضها لديه عناوين ومحتوى وصف وأزرار وغيرها من المعلومات تحت الصور.
يفصل إطار bootstrap هذا الجزء إلى مكون الوحدة النمطية ، ويتم تنفيذه من خلال اسم الفصل .thumbnail ونظام شبكة bootstrap. فيما يلي ملفات التعليمات البرمجية المصدرية لإصدارات مختلفة من مكون Tratustrap Thumbnail:
أقل: tbumbnails.less
Sass: _tbumbnails.scss
مبدأ التنفيذ:
يعتمد تنفيذ التصميم بشكل أساسي على نظام الشبكة لإطار bootstrap. ما يلي هو النمط المقابل للثنائي المصغرة
.thumbnail {display: block ؛ padding: 4px ؛ margin-bottom: 20px ؛ line-height: 1.42857143 ؛ background-color: #fff ؛ border: 1px solid #ddd ؛ border-radius: 4px ؛ -webkit-transition: all. img {margin-right: auto ؛ margin-left: auto ؛} A.Thumbnail: hover ، A.Thumbnail: Focus ، A.Thumbnail.active {border color: #428bca ؛}.دعونا نلقي نظرة على مثال:
<viv> <viv> <a herf = "#"> <img src = "img/1.jpg" style = "الارتفاع: 180px ؛ العرض: 100 ٪ ؛ عرض: block"> </a> </viv> <viv> <a herf = "#" block "> </a> </viv> <viv> <a herf ="#"> <img src =" img/3.jpg "style =" height: 180px ؛ width: 100 ٪ ؛ display: block "> </a> </div> <div> <a herf ="#" Block "> </a> </viv> </viv>
الآثار هي كما يلي:
يمكنك مشاهدته باستخدام عرض تصميم Firefox المستجيب
على أساس الصور المصغرة فقط ، أضف حاوية div باسم الفصل.
<viv> <viv> <viv> <a href = "#"> <img src = "img/1.jpg" style = "الارتفاع: 180px ؛ العرض: 100 ٪ ؛ عرض: block"> </a> فيما يلي محتوى الوصف هنا هو محتوى الوصف هنا هو محتوى الوصف هنا هو محتوى الوصف هنا هو محتوى الوصف </p> <a href = "#"> ابدأ في التعلم </a> </viv> <viv> <a href = "#" 2222 </h3> <p> فيما يلي محتوى الوصف 2222 مكان الوصف هو محتوى 2222 مكان الوصف هو محتوى الوصف 222hhere هو محتوى الوصف 2222here هو محتوى الوصف 2222here هو محتوى الوصف 2222 </p> <a href = "#"> البدء في التعلم </a> </div> <viv> <a href = "#"#" style = "الارتفاع: 180 بكسل ؛ العرض: 100 ٪ ؛ عرض: block"> </a> <viv> <h3> هنا هو العنوان الرسم 3333 </h3> <p> هنا هو الوصف محتوى 3333 هنا هو محتوى الوصف 3333 هنا هو محتوى الوصف 3333 هنا هو محتوى الوصف 232 هنا هو محتوى الوصف 333 تعلم </a> </viv> <viv> <a href = "#"> <img src = "img/4.jpg" style = "height: 180px ؛ width: 100 ٪ ؛ display: block"> </a> <viv> <h3> هنا هو العنوان الرسم 4444 </h3> <p> هنا محتوى الوصف 4444444444444417. الوصف محتوى 4444 هو محتوى الوصف 4444 هو محتوى الوصف 4444 </p> <a href = "#"> ابدأ في التعلم </a> <a href = "#"> الدراسة </a> </viv> </viv> </viv>
مكون مربع التنبيه
يستخدم إطار عمل Bootstrap نمط. Alert لتحقيق تأثير مربع التحذير. بشكل افتراضي ، يوفر Bootstrap أربعة تأثيرات مختلفة لصندوق التحذير:
1. مربع تحذير النجاح: يطالب المستخدم بالنجاح في العملية ، إضافة نمط .alert-sccess على أساس .alert ؛
2. مربع تحذير المعلومات: تزويد المستخدمين بمعلومات سريعة ، وإضافة نمط .alert-Info على أساس .alert ؛
3. مربع تحذير التحذير: توفير معلومات التحذير وإضافة نمط.
4. مربع تحذير الخطأ: يطالب المستخدم بالأخطاء في التشغيل ، وإضافة نمط.
من بينها ، يضع نمط .alert بشكل أساسي لون الخلفية والحدود والزاوية المستديرة ولون النص لصندوق التحذير. بالإضافة إلى ذلك ، يتم إجراء معالجة النمط على H4 و P و UL و .Alert-Link. فيما يلي رمز مصدر CSS:
.alert {padding: 15px ؛ margin-bottom: 20px ؛ الحدود: 1px شفافة صلبة ؛ الحدود الحدودية: 4px ؛}. تنبيه H4 {margin-top: 0 ؛ color: muring ؛}. Alert .alert-Link {font-weight: bold ؛}. ALERT> p ، {margin-top: 5px ؛}. ALERT-SUCCESS {color: #3C763D ؛ الخلفية اللون: #dff0d8 ؛ اللون الحدود: #d6e9c6 ؛}. ALERT-SUCCESS HR {border-top-color: #c9e2b3 ؛}. ALERT-SUCCESS. {color: #31708f ؛ background-color: #d9edf7 ؛ border-color: #bce8f1 ؛}. ALERT-INFO HR {border-top-color: #a6e1ec ؛}. ALERT-INFO. #faebcc ؛}. ALERT-WARNING HR {border-top-color: #f7E1B5 ؛}. ALERT-WARNING .Alert-Link {color: #66512c ؛ #e4b9c0 ؛}على سبيل المثال:
<div rol = "Alert"> تهانينا على عمليتك الناجحة! </viv> <div rob = "Alert"> الرجاء إدخال كلمة المرور الصحيحة </div> <div rob> = "Alert"> لقد فشلت مرتين ، وهناك فرصة أخيرة أخرى </div> <div rom = "Alert"> آسف ، تم إدخال كلمة المرور الخاصة بك بشكل غير صحيح! </div>
صندوق تنبيه قابل للإغلاق
1. إلحاق اسم فئة ".
2. أضف .Close إلى تسمية الزر لتنفيذ زر الإغلاق في مربع التحذير
3. تأكد من أن السمة المخصصة لبيانات dismiss = "تنبيه" يتم تعيينها على عنصر الزر الإغلاق (يتطلب إغلاق مربع التنبيه js للكشف عن السمة ، وبالتالي التحكم في إغلاق مربع التنبيه)
مثال:
<div rob = "Alert"> <button type = "button" data-dismiss = "Alert"> × </button> تهنئة على عمليتك الناجحة! </viv> <flivrole = "Alert"> <button type = "button" data-dismiss = "alert"> × </button> الرجاء إدخال كلمة المرور الصحيحة </div> <div rob = "alert"> <button type = "button" divis = "alert"> × </button> لقد فشلت عملية مرتين ، وهناك فرصة أخيرة </div> <div = "div" Data-Dismiss = "Alert"> × </button> آسف ، تم إدخال كلمة المرور الخاصة بك بشكل غير صحيح! </div>
رابط إلى مربع التنبيه
في بعض الأحيان ، تحتاج إلى إضافة رابط إلى مربع التحذير لإخبار المستخدم بالقفز إلى صفحة جديدة. يتم تسليط الضوء على الرابط إلى مربع التحذير في إطار Bootstrap. أضف اسم الفصل باسم. فيما يلي نمط CSS من الرابط التنبيه
.اليرت. #66512C ؛}. ALERT-Danger .alert-Link {color: #843534 ؛}مثال:
<div rom = "Alert"> <strong> أحسنت! </strong> لقد قرأت بنجاح <a href = "#"> رسالة التنبيه المهمة </a> </div> <div roly = "Alert"> <strong> أحسنت! </strong> لقد قرأت بنجاح <a href = "#" اقرأ <a href = "#"> رسالة التنبيه المهمة هذه </a> </div> <div roly = "Alert"> <strong> أحسنت! </strong> لقد قرأت بنجاح <a href = "#" rob = "Alert"> <strong> أحسنت! </strong> لقد قرأت بنجاح <a href = "#"
سأقدم الكثير عن مكون Bootstrap Thumbnail ومكون مربع التحذير الذي تقدمه لك هذه المقالة. آمل أن يكون ذلك مفيدًا لك!