هذه المرة سوف نلقي نظرة على استخدام مكونات JS. سيكون هذا المقال طويلًا بعض الشيء. آمل أن يتمكن الجميع من قراءتها بصبر وأعتقد أنه سيكون هناك الكثير من المكاسب. أضافني العديد من أصدقاء الحديقة إلى أصدقائي وأعربوا عن أسلوبي في الكتابة. إنه بسيط وواضح. هنا ، شكرًا لك مرة أخرى على دعمكم. من ناحية ، تقع تقنيتي الخاصة وأكتب الأشياء الأساسية نسبيًا. من ناحية أخرى ، أكتب أشياء بناءً على فهمي وأعرب عن أشياء معقدة بأبسط لغة. لذلك ، إذا كان هناك خطأ في الكتابة ، فالرجاء إعطائي بعض التصحيحات.
1. مرجع ملف JS
ملاحظة: يجب تقديم jQuery قبل ملفات JS الأخرى ، لأن الإضافات الأخرى تعتمد على jQuery.
<!-<script src = "js/jquery-1.11.3.min.js"> </script> ملف التحميل المستورد محليًا-> <script src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js" src = "js/bootstrap.min.js"> </script>
2. سمات البيانات
الوظيفة: من خلال سمة البيانات ، يمكنك استخدام أي مكون إضافي bootstrap دون كتابة أي رمز JS. المكونات الإضافية قائمة المرجع المذكورة سابقًا ، مثل بيانات البيانات = "المنسدلة" وغيرها من القوائم المرجعية.
إذن نظرًا لوجود وظيفة تشغيل ، كيف يتم إيقاف تشغيل الوظيفة؟ أضف الرمز التالي إلى JavaScript:
<script type = "text/javaScript"> $ (document) .off ('. data-API') ؛ </script>إذا كنت ترغب في إيقاف تشغيل وظائف مكون إضافي معين ، فأضف الكود التالي:
<script type = "text/javaScript"> // أغلق وظيفة المكون الإضافي لمربع المطالبة $ (document) .off ('. Alert.data-api') ؛ </script>جميع الإضافات JS هي في الأساس الخطوات التالية:
1: كيفية استخدامه؟ --- كيف تكتب الفئة المقابلة؟
2: كيف تتصل؟ --- بعد كتابة الفصل ، كيف تجعل الفصل الذي يكتبه ساري المفعول؟
3: معالجة الأحداث-بما في ذلك الحدوث قبل تشغيل الإجراء والحدوث بعد بدء الإجراء
ملاحظة: تحدث جميع الإجراءات قبل التشغيل ، توفر bootstrap PreventDefault ، والتي تنفذ إيقاف الإجراء قبل تنفيذها. الرمز كما يلي:
$ ('#mymodal'). on ('show.bs.modal' ، function (e) {if (data) returnملاحظة: لا يتخذ Bootstrap تدابير علاجية للمتصفحات التي تعطل JavaScript. لذلك ، نحن بحاجة إلى كتابة قطعة من التعليمات البرمجية لعلاج أنفسنا ، وأعتقد أن الجميع يعرف ذلك.
<Noscript> لا يدعم متصفحك JavaScript ، يرجى تنزيل أحدث المتصفح </noscript>
3. مكون مربع مشروط (modal.js)
ملحوظة:
1: لا يتم دعمه لفتح مربعات مشروطة متعددة في نفس الوقت
2: يجب أن يكون المربع المشروط في عنصر الطفل الطفل قدر الإمكان لتجنب المكونات الأخرى التي تؤثر على شاشة ووظيفة مربع مشروط.
3: تعليمات طرفية متنقلة
4: تعزيز إمكانية الوصول-سمة دور مضافة
5: يمكن تضمين العرض في المربع المشروط ، أي ، toggle = "Modal"
دعونا نلقي نظرة على العمود أدناه. انقر على الزر وسيظهر مربع مشروط. فيما يتعلق بالخصائص هنا ، إذا كنت قد قرأت المقالة السابقة ، فأعتقد أنه ليس من الصعب فهمها. لن أشرح ذلك بالتفصيل هنا. يمكنك نشر الرمز لاختباره بنفسك:
<! 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> </title> <Link Href = "CSS/BOOTSTRAP.CSS" REL = "STYLESHEET"> <Link Href = "CSS/BOOTSTRAP.MIN.CSS" Rel = "stylesheet"> <link Href = "CSS/Style.css" rel = "stylesheet"> data-toggle = "modal" تهدف البيانات = ". bs-example-modal-lg" aria-label = "close"> <span aria-hidden = "true"> × </span> </trutic> <h4> العنوان المشروط </h4> </viv> <v> <p> جسم دقيق واحد ... </p> </p> </div> <div> <button type = "button" dismisis = "modal" </viv> </viv> <!-قم بتغيير حجم المربع الوسيط وأضف الفئة MODAL-SM-> <button type = "button" data-toggle = "modal" target = ". aria-labelledby = "mylargemodallabel"> <viv> --- مربع مشروط صغير <Div> <viv> <button type = "button" data-dismiss = "modal" aria-label = "close"> <span aria-hidden = "true"> × </span <div> <button type = "button" data-dismiss = "modal"> أغلق </button> <button type = "button"> حفظ التغييرات </button> </div> </div> </viv> </viv> </div> <!-تأثيرات الرسوم المتحركة محظورة ، فقط حذف التلاشي-> <النصي src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <script src = "js/bootstrap.min.js"> </script> <script type = "text/javascript"> $ ( --- استدعاء هذا الرمز لجعل المكون الإضافي يعمل </script> </body> </html>
التأثير على النحو التالي:
مع مربعات مشروط ، يمكنك أيضًا إضافة وظائف أخرى إلى محتوى الجسم ، مثل مربعات الإدخال المضمنة في النموذج ، وما إلى ذلك ، ولا يتم نشر رمز هنا.
للأحداث في مربع مشروط ، أضف الكود التالي في JavaScript ، كما هو موضح أدناه:
انسخ الرمز كما يلي: <script src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <script src = "js/bootstrap.min.js $ ("#mymodal"). modal ("show") ؛ --- استدعاء هذا الرمز لجعل المربع الإضافي للملابس الإضافية ساري المفعول وعرض $ ('#mymodal').
تنبيه ("111") ؛
}) --- يعني هذا الحدث أنه سيتم تشغيل حدث التنبيه بعد إغلاق مربع مشروط </script>
دعنا نلقي نظرة على كيفية تضمين المربع المشروط في الفيديو. نحتاج إلى إضافة بعض التعليمات البرمجية والتشغيل التلقائي والإيقاف والوظائف الأخرى. لنلقي نظرة على الكود أولاً
<a href = "#" data-toggle = "modal" data-target = "#videomodal" data-thevideo = "http://v.youku.com/v_show/id_xmtu2odmyma==.html aria-labelledby = "videomodal" aria-hidden = "true"> <viv> <viv> <viv> <button type = "button" data-dismiss = "modal" aria-hidden = "true" src = "js/jquery-1.11.3.min.js"> </script> ملف التحميل المحلي-> <script src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js type = "text/javaScript"> // عرض وظيفة autoplaymodal () {var trigger = $ ("body"). find ('[data-toggle = "modal"]') ؛ trigger.click (function () {var themodal = $ (this) .data ("target") ؛ var videoosrc = $ (this) .Attr ("data-thevideo") ؛ var videoSrcauto = videoSrc+"؟ Button.Close '). }) ؛ }) ؛ }) ؛ } // استدعاء الدالة $ (document) .Ready (function () {autoplaymodal () ؛}) ؛ </script> <Noscript> لا تدعم متصفح JavaScript </script>لم يعد التأثير لقطات شاشة ، يقدم SRC أعلاه عنوان Youku.
4. مكون مراقبة التمرير
المدرجة في شريط التنقل ، أي التبديل تلقائيًا وفقًا لموضع التمرير. دعونا نلقي نظرة على الكود.
1: تأكد من ظهور شريط التمرير.
2: عادةً ما أضف تجسس البيانات إلى الجسم ، أي استخدام data-spy = "scroll" <body data-spy = "scroll" data-target = ". navbar" datial = "70"> <div id = "myscrollspy"> <nav rol ” <li> <a href = "#message"> الرسالة </a> </li> <li> <li> <a href = "#about"> about </a> </li> <li> <a href = "#about"> about </a> </li> <li> <li> <li> Href = "##one"> one </a> <li> <a href = "#two"> اثنان </a> <li> <a href = "#three"> three </a> </ul> </li> </ul> </liv> </viv> </av> <! <P> 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 <p> 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 id = "about"> حول </h1> <p> 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 <HR> <h1 id = "one"> واحد </h1> <p> 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 </p> <h1 id = "two"> اثنان </h1> <p> 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
فهم معنى انبعاث البيانات: أي الإزاحة من الأعلى عندما يكون موضع التمرير. ثانياً ، تشبه معالجة الأحداث استخدام الصناديق الوسيطة ولن يتم شرحها.
الآثار هي كما يلي:
5. مكون مربع المطالبة
يلاحظ:
1: استخدم البيانات toggle = "Tooltip"
2: يمثل وضع البيانات اتجاه مربع المطالبة ، وهناك أربعة اتجاهات ، اليسار ، اليمين ، أسفل ، أعلى
3: إن تشكيل البيانات هو ضبط تأثير الرسوم المتحركة على خطأ ، أي بعد نقل الماوس ، فإنه يتغير من التدريجي الأصلي داخل وخارج المظهر الفوري ، دون التأثير المخزن المؤقت.
<viv> <p> <!-تخفيف-> هذا عنوان اختبار ، <a href = "#" id = "clickevent" data-toggle = "tooltip" data-placement = "bottom" data-original-title = "cnblog.com/jtjds src = "js/jquery-1.11.3.min.js"> </script> ملف التحميل المحلي-> <script src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js type = "text/javaScript"> $ ('[data-toggle = "tooltip"]'). يتم عرضه}) </script>6. مكون الإطار المنبثق
يلاحظ:
1: يضيف المربع المنبثق طبقة معلقة صغيرة إلى أي عنصر لتخزين المعلومات غير المقيدة.
2: عندما يكون طول المحتوى 0 ، لن يتم عرض المربع المنبثق. استخدم البيانات toggle = "popover"
3: الاعتماد على مكون الإضافي المربع الموجه ويجب تهيئته يدويًا (انظر التهيئة في JavaScript)
انظر إلى الكود التالي ولا مزيد من لقطات الشاشة:
انسخ الرمز على النحو التالي: <!-انقر فوق الزر للظهور ، ثم انقر فوق الزر للاختباء->
<button type = "button" data-toggle = "popover" data-content = "وهنا بعض المحتوى المذهل ، إنه جذاب للغاية ، أليس كذلك؟"
عند النقر فوق الزر ، يظهر ، ثم انقر فوق الزر ويختفي. ماذا علي أن أفعل إذا أردت النقر فوقه في مساحة فارغة وإخفائه؟
فقط أضف trigger = "التركيز" لإخفاء التركيز ، يعني المشغل الزناد.
انسخ الرمز على النحو التالي: <!- انقر فوق الزر للظهور ، انقر فوق أي مساحة فارغة لإخفائها. من الأفضل استخدام علامة A ، بالطبع يمكنك أيضًا استخدام زر->
<a tabindex = "0" id = "mypopover" rol = "button" data-toggle = "popover"
data-trigger = "focus"-محتوى البيانات = "وهذا محتوى جميل"> انقر لي أن أختفي </a>
7. مكون مربع التحذير
يلاحظ:
1: استخدم dismiss = "Alert"
2: يمكن أن يضيف المكون الإضافي نقرات ويختفي إلى رسالة التحذير
3: عند استخدام زر الإغلاق ، أي عند استخدام الفئة الإغلاق ، يجب أن يكون العنصر الأول للطفل في حالة تأهب ، ولا يُسمح بالظهور قبل ذلك.
دعونا نلقي نظرة على الكود:
<!-مربع التحذير-> <div id = "myalert"> <button type = "button" data-dismiss = "Alert" Aria-label = "close"> <span aria-hidden = "true" aria-label = "close"> <span aria-hidden = "true"> × </span> </utton> <span> مرحبًا </span> <button type = "button"> التفاصيل </button> </div>
إذا كان هناك عدة مربعات تحذير في JavaScript وكنت ترغب في إغلاق مربع تحذير ، أضف الكود التالي في JavaScript ، على النحو التالي:
$ (" #myalert"). ALERT ('close') // عند إغلاق مربع التحذير الأول ، أو عندما يتم استبدال #Myalert بـ #myAlert1 ، سيتم إغلاق مربع التحذير الثاني $ (' #myalert1'). على ('chiew.bert.alert' ، function ()8. مكون زر
يلاحظ:
1: تبديل حالة الزر (معطل أو تشغيل)-يتم تحقيق ذلك باستخدام AutoComplete = "Off"
2: قم بعمل أزرار متعددة في أشرطة الأدوات ، إلخ.
3: قم بتعيين حالة التحميل عن طريق ضبط Text-Text = "Loading ..."
<!-الزر-> <button type = "button" id = "myButton" تحميل البيانات = "loading ..." autocomplete = "Off" type = "checkbox" autocomplete = "Off" checked> home </billy> <label> <input type = "checkbox" autoComplete = "OFF"
إذا كنت ترغب في تغيير المحتوى بعد النقر فوق الزر ، فأضف Text-Text = "xxxx" وإضافة رمز JavaScript على النحو التالي:
انسخ رمز الرمز على النحو التالي: <!-بعد النقر فوق المشغلات ، قم بتغيير النص المكمل للمحتوى يمثل المحتوى النهائي->
<button type = "button" data-complete-text = "finish" autocomplete = "Off"> سيتغير المحتوى تلقائيًا بعد النقر فوق </button> <script> $ ('. mybtn'). على ('click' ، function () {$ (this) .button ('complete').
لتعيين الزر لتبديل الحالة وتعيين الوقت لتبديل الحالة ، يمكنك إضافة الكود التالي إلى JavaScript:
<script> $ ('#mybutton'). on ('click' ، function (e) {var btn = $ (this) .button ('loading') ؛ setTimeout (function (e) {btn.button ('reset') ؛9. مجموعة إطار قابلة للطي
ملاحظة: استخدم البيانات toggle = "الانهيار" لرؤية الكود:
<a aro = "button" data-toggle = "collapse" href = "#collapSeExample" aria-expanded = "false" aria-controls = "collapsexample"> ارتباط مع href </a> <div id = "collapseexample> <viv> hello ، هذا اختبار! </viv> </viv>
بالإضافة إلى ذلك ، يمكن استخدامه مع مجموعات الألواح ، كما هو موضح أدناه:
<!-مجموعة لوحة-> <div id = "mypanel" rol = "tableist"> <!-اللوحة الأولى-> <div> <div rol id = "tb" id = "headingone"> <h4> <a data-toggle = "collapse" data-barent = "#mypanel" href = "#collapseone" id = "collapseone" rob = "tabpanel"> <viv> مرحبًا عني </div> </viv> </viv> <!-اللوحة الثانية-> </div>
من خلال النقر على المنزل للتحكم في جزء المحتوى ، فإنه هو تعيين HREF = "#Collapseone" وهو المعرف المقابل للمحتوى.
فيما يتعلق بالأحداث ، على غرار تلك المستخدمة في وقت سابق ، فإن هذه المكونات لديها استخدام وقت مماثل ، على النحو التالي
<script type = "text/javaScript"> $ ('#mypanel'). on ('hidden.bs.collapse' ، function () {Alert ("2222") ؛}) </script>10. مكون الانزلاق carsousel
ملاحظة: استخدم Data Ride = "Carousel" ، مثل Carousel الذي نصل إليه عادة. دعونا نلقي نظرة أولاً على رمز مخطط الكاروسيل الذي صنعته:
<div id = "mycontainer"> --- لاحظ هدف استهداف البيانات <div id = "carousel1" data ride = "carousel"> <ol>-تمثل المؤشرات مؤشرا منزلقًا ، أي ، أيهما ينزلق من واحد <li <li data-arget = "#carousel1" data-slide-to = "0"-li>-li. data-slide-to = "1"> </li> <li data-target = "#carousel1" data-slide-to = "2"> </li> </ol> <!-عرض محتوى-> <div real = "listbox"> <div> <img src = "bg.jpeg" Mood ، أنت وأنا سوف نذهب معك </p> </viv> </viv> <viv> <img src = "timg.jpg"> </viv> <viv> <img src = "xx.jpg"> </div> </div> <!-علامتان على اليسار واليمين-> <a href = " aria-hidden = "true"> </span> <span> السابق </span> </a> <a href = "#carousel1" rob = "button" data-slide = "next"> <span aria-hidden = "true"> </span> next </aa> </a> </div>
الآثار هي كما يلي:
فيما يتعلق بسرعة الانزلاق ، يمكنك إضافة بيانات البيانات = "2000" مباشرةً لتعيين دبوس مفتاح 2 ثانية ، ولكن المشكلة في هذه الطريقة هي ذلك
عندما تقوم بتحديث المتصفح ، يجب عليك النقر فوق الأزرار اليمنى واليسرى يدويًا قبل أن تتمكن من التبديل. أفضل طريقة هي ضبطها في جافا سكريبت. كما هو موضح في الكود التالي
<script type = "text/javaScript"> $ (".11. مكونات اللصوص
ملاحظة: استخدم الموضع: ثابت لتحديد المواقع ، واستخدم Data-spy = "Affix" مع انبعاث البيانات لتحقيق المراقبة ، وعندما يحدث حدث معين ، يتم إزاحةه. يرجى قراءة الرمز التالي:
<viv> <!-تخطيط نظام الشبكة-> <div> <ul> <li> 11111111111 </li> <li> 22222222222222 </li> <li> 3333333333333333 3 </li> <li> 4444444444444444441 </LI> <li> 5555555555 </li> <li> 66666666666666666 </li> <li> 7777777777777777777777777777777777777777777777777777777777777777777777777777 77777777777777777777777777777777777777777777777777777777777777777777777777777777 7777777777777777777777777777777777777777777777777777777777777777777777777777777 77777777777777777777777777777777777777777777777777777777777777777777777777777777 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 <p> 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 <viv> <ul> <li> 11111111111111 </li> <li> 222222222222 </li> <li> 333333333333333333 3 </li> <li> 44444444444444444444444444 4/li> 555555555555544444444444444444444444444 <li> 6666666666666 </li> <li> 77777777777777777777777777777777777777777777777777777777777777777777777777777 7777777777777777777777777777777777777777777777777777777777777777777777777777777777 7777777777777777777777777777777777777777777777777777777777777777777777777777777777 7777777777777777777777777777777777777777777777777777777777777777777777777777777777 src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <script src = "js/bootstrap.min.js"> </script> <script type = "text/javascript"> $ (. الإزاحة: {}}) $ ('.انتهى مكون JS هنا تقريبًا ، وتعلم إطار Bootstrap قد انتهى تقريبًا. المقال التالي قد انتهى. أخطط لتصميم صفحة على وجه التحديد باستخدام Bootstrap لإنشائها ومشاركتها معك. إذا كنت تتعلم أيضًا إطار Bootstrap ، فيرجى التواصل والتعلم!
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وإرفاق 3 مواضيع مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.