إن تعلم bootstrap بسيط للغاية ، والأسلوب الذي يوفره جميل للغاية. مجرد دراسة بسيطة بسيطة يمكن أن تخلق صفحات جميلة.
موقع Bootstrap الصيني: http://v3.bootcss.com/
يوفر Bootstrap ثلاثة أنواع من التنزيلات:
bootstrap لبيئات الإنتاج
تجميع وملفات CSS ، JavaScript ، وخط. لا تحتوي على مستندات وملفات المصدر.
رمز مصدر bootstrap
أقل ، JavaScript ، وملفات الخطوط الرمز المصدر ومع الوثائق. يتطلب مترجم أقل وبعض أعمال الإعداد.
ساس
هذا مشروع للنقل المصدر من أقل إلى ساس لإدخاله السريع في مشاريع القضبان أو البوصلة أو SASS فقط.
في الواقع ، يمكننا استخدامه دون تنزيل bootstrap:
قام موقع Bootstrap Chinese ببناء خدمة تسريع CDN المجانية بشكل خاص لـ Bootstrap. استنادًا إلى خدمة CDN لمصنعي السحابة المحليين ، تكون سرعة الوصول أسرع ، وتأثير التسارع أكثر وضوحًا ، ولا يوجد قيود على السرعة وعرض النطاق الترددي ، وهو مجاني بشكل دائم.
base.html
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua- contablate" content = "ie = edge"> <meta name = "viewport" content = "width = width ، وأي محتوى آخر * يجب * متابعتها! -> <title> bootstrap 101 قالب </title> <!-bootstrap-> <link rel = "stylesheet" href = "http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.cs"> </head> <h1> </h1> <!-jQuery (ضروري لمكونات JavaScript الخاصة بـ bootstrap)-> <script src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </script> <! src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script> </body> </html>
تم تقديم bootstrap في base.html. احفظه ويمكننا استخدام الأنماط التي توفرها Bootstrap.
أيقونة الخط
يوفر Bootstrap أكثر من 200 رمز بشكل افتراضي. يمكننا استخدام هذه الرموز من خلال علامة SPAN:
<h3> icon </h3> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> </span>
زر
يتم استخدام العلامة <Untry> </butting> لإنشاء أزرار ، ويوفر Bootstrap أنماط زر غنية. <h3> الزر </h3> <button type = "button"> زر </button> <button type = "button"> الأساسي </button> <button type = "button"> النجاح </button> <button type = "button"> info </button> <button> <button> <button> button> button> button> button> <button> type = "button"> زر </button> <button type = "button"> الأساسي </button> <button type = "button"> النجاح </button> <button type = "button"> info </nutton> <h3> أظهر الرمز في الزر </h3> <button type = "button> </span> </button>
بالإضافة إلى الحجم الافتراضي للزر ، يوفر Bootstrap أيضًا ثلاثة معلمات لضبط حجم الزر ، أي: BTN-LG و BTN-SM و BTN-XS.
القائمة المنسدلة
القائمة المنسدلة هي واحدة من أكثر التفاعلات شيوعًا ، ويوفر Bootstrap أنماطًا جميلة.
<h3> القائمة المنسدلة </h3> <viv> <button type = "button" id = "sropdownmenu1" data-toggle = "sropdown" aria-expanded = "true"> sropdown <span> </span> </button> <ul rom = "menu" aria-labelledby = "sropdownu1 HREF = "#"> الإجراء </a> </li> <li rob = "العرض التقديمي"> <a rol = "menuitem" tabindex = "-1" href = "#" rob = "menuitem" tabindex = "-1" href = "#"
مربع الإدخال
استخدم علامة <Purns> </pected> لإنشاء مربع إدخال.
<h3> مربع الإدخال </h3> <viv> <span> </span> <input type = "text" placeholder = "username"> </viv> <viv> <span> </span> <inport type = "password" placeholder = "password"> </viv>
شريط الملاحة
شريط التنقل ضروري كدليل لموقع الويب بأكمله.
<h3> شريط التنقل </h3> <viv> <div id = "navbar"> <ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#about"> on </a> </li> <li> <a href = rob = "button" aria-expanded = "false"> المنسدلة <span> </span> </a> <ul rob = "menu"> <li> <a href = "#"> الإجراء </a> </li> <li> <li> <a href = "#" الرابط </a> </li> </li> </li></ul> </viv> <!-/.
استمارة
يجب إكمال نقل البيانات بين الأشخاص والأنظمة بواسطة النماذج. على سبيل المثال ، يقدم تقديم معلومات التسجيل/تسجيل الدخول ، وتقديم شروط الاستعلام ، وما إلى ذلك.
<h3> النموذج </h3> <port> <viv> <span> </span> <input type = "email" id = "exampleInputEmail1" placeholder = "elect type = "file" id = "exampleInputFile"> <p> مثال نص التعليمات على مستوى الكتلة هنا. </p> </viv> <viv> <ball> <input type = "checkbox">
مربع تحذير
تعد صناديق التحذير وسيلة مهمة للنظام لنقل المعلومات وتقديم التوجيه للمستخدمين. لا توجد ملصقات لصناديق التحذير ، ويمكن للأسلوب الذي توفره Bootstrap إنشاء صناديق تحذير جميلة على الفور.
<h3> مربع التحذير </h3> <div rob = "alert"> <button type = "button" data-dismiss = "Alert" aria-label = "close"> <span aria-hidden = "true"> × </span> </nutton> <strong> تحذير! </viv> <div rol = "Alert"> <a href = "#"> النجاح! </a> </div> <div rob> <"alert"> <a href = "#"> info! </div>
شريط التقدم
غالبًا ما تتطلب عملية معالجة النظام من المستخدمين الانتظار ، ويسمح شريط التقدم للمستخدمين بإدراك عملية معالجة النظام ، وبالتالي زيادة التسامح.
<h3> شريط التقدم </h3> <viv> <div rol = "progressbar" aria-valuenow = "70" aria-valuemin = "0" aria-valuemax = "100"> 70 ٪ </viv> </viv>
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.
إذا كنت لا تزال ترغب في التعلم بعمق ، فيمكنك النقر هنا للتعلم وإرفاق موضوعين مثيرين لك: Bootstrap التعلم التعليمي التعليمي التعليمي العملي