تتحدث المادتان السابقتان فقط عن كيفية استخدام المكونات ، ولا حول JS. يجب مناقشة هذه المدونة بالاشتراك مع JS.
اسمحوا لي أن أشرح عدة مكونات
1. مربع مشروط
2. مراقبة التمرير
3. صفحة العلامة
4. تلميحات الأدوات
5. صندوق منبثق
6. زر
7. تكديس
8. الصفحة الدوارة
9. الشريط الجانبي
استيراد CSS و JS أولاً
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.css"> <link rel = "stylesheet" href = "// cdn.bootcss.com/bootstrap src = "js/jquery-33.1.0.min.js"> </script> <script src = "js/bootstrap.min.js"> </script>
1. مربع مشروط
عادةً ما نستخدم هذا المربع الوسيط عند تسجيل الدخول أو قراءة بعض اللوائح ، لذا فإن مربع الوسائط شائع جدًا
اكتب أولاً زرًا لفتح مربع مشروط
<!-تهدف البيانات هو معرف مربع الخاص بنا ، و data- whatever = "@ime" هو علامة وقيمة مربع مشروط نمررها-> <button type = "button" data-toggle = "modal" target = "#mymodal" data- whatever = "@ime"
ثم اكتب مربع مشروط
<div id = "mymodal" rol = "dialog" aria-label = "mymodallabel" aria-hidden = "true"> <!-هذا مربع مشروط صغير. تغيير Modal-SM إلى Modal-LG هو مربع مشروط كبير-> <div> <!-رأس مربع مشروط-> <div> <!-زر إغلاق في الزاوية اليمنى العليا-> <button type = "button" data-dismiss = "modal" محتوى المربع-> <viv> <!-يمكن أن يكون محتوى الإطار المشروط نصًا أو جدولًا-> <!-<p> Hello </p>-> <Porm> <Div> <blabe> اسم المستخدم </label> <input type = "text"> </sul> <div> <ball> <border> password </sably> <input type = "pwork" data-dismiss = "modal"> إغلاق </button> <button type = "button"> حفظ </button> </div> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </div div> </div> </div> </viv> </viv> </viv> </viv> </viv>
إذا قمت بالنقر فوق الزر ثم تمرير المعلمات إلى الجدول في المربع الوسيط
أضف علامة البيانات إلى سمة الزر: القيمة
تتم إضافة البيانات أعلاه-whateather = "@ime" كمثال. تتم إضافة المعلمة مع الملصق أيا كان وقيمة @تايم.
فيما يلي عملية JS
// method $ ("#mymodal"). on ("show.bs.modal" ، الدالة (e) {// احصل على الزر الذي تنقر عليه لفتح زر var = $ ( modal.find (". modal-title"). النص ("Hello"+المستلم) ؛ // تغيير قيمة الإدخال في modal.find (".2. مراقبة التمرير
انزلق إلى محتويات مختلفة ، ستتغير صفحة علامة التبويب
أولا اكتب سمة الجسم
<!-تم تعيين الإزاحة على 70 ، هذه القيمة هي أفضل قيمة تم اختبارها->
<body data-spy = "scroll" data-target = ". navbar" data data = "70">
ثم اكتب علامة التبويب
<!-الجزء العلوي من المحتوى المعروض ثابتًا في شريط التبويب-> <nav rom = "sevigation"> <viv> <div id = "myscrollspy"> <ul> <!-الاتصال في العلامة هو معرف العنوان أدناه-> <li> <a href = "#iwen"> iwen </a> </li> <li> <!-القائمة المنسدلة في العش في العلامة-> <li> <a href = "#" data-toggle = "sropdown"> القائمة المنسدلة <span> </span> </a> <ul rom = "menu"> <li> <a href = "#one" one "tabindex ="-1 " </li> <li> <a href = "#three" tabindex = "-1"> ثلاثة </a> </li> </ul> </li> </li> </ul> </viv> </viv> </nav>
ثم اكتب المحتوى
<h2 id = "iwen">@iwen </h2> <p> هذا شخص هذا شخص </p> <h2 id = "ime">@ime </h2> <p> هذا شخص هذا الشخص </p> <h2 id = "one">@واحد </h2> <p> هذا شخص هذا الشخص </p> id = "two">@two </h2> <p> هذا شخص هذا الشخص </p> <h2 id = "three">@three </h2> <p> هذا شخص هذا الشخص </p> <h2 id = "three">@three </h2> <p> هذا شخص هذا الشخص </p>
يوصى بكتابة المحتوى لفترة أطول بحيث يكون التأثير أكثر وضوحًا. ليس من المناسب كتابة الكثير من الكلمات عديمة الفائدة هنا.
يمكنك أيضًا كتابة بعض أساليب JS
// method $ ("#myscrollspy"). on ("activate.bs.scrollspy" ، function (e) {Alert ("hello") ؛})3. صفحة العلامة
انقر على علامات مختلفة لعرض محتوى مختلف
اكتب شريط العلامات أولاً
<ul id = "mytab"> <!-يتوافق رابط العلامة مع معرف لوحة التبويب أدناه-> <li> <a href = "#home" data-toggle = "tab"> home </a> </li> <li> <a href = "#profile data-toggle =" tab "</a> </li> <li> <li> data-toggle = "sropdown"> القائمة المنسدلة <span> </span> </a> <ul rom = "menu"> <!-على عكس القوائم المنسدلة العادية ، أضف البيانات toggle = "tab"-> <li> <a href = "#One" data-toggle = "tab"> اثنان </a> </li></ul> </li> </li> </ul>
ثم اكتب محتويات علامات مختلفة
<div id = "mytabContent"> <div id = "home"> <p> home </p> <div id = "profile"> <p> profile </p> <div id = "one"
يمكنك تهيئة صفحة علامة التبويب المعروضة مع JS
هناك عدة طرق لتحديد صفحة علامة تبويب
$ ('#mytabs a [href = "#profile"]'] '). علامة التبويب (' show ') // select $ ('#mytabs a: first '). tab (' show ') // حدد صفحة علامة التبويب الأولى $ ('#mytabs a: last '). tab tab tam tab tam $ (' show show '). (لأن 0 هو الأول). إذا كانت صفحة علامة تبويب في القائمة المنسدلة ، فيجب إضافة الرقم بواسطة 1.4. تلميحات الأدوات
<p> <!-إذا كان محتوى العنوان فارغًا ، فسيتم عرض محتوى البيانات الأصلية. الموضع هو موضع العرض ، والذي يمكن ضبطه على الأعلى | أسفل | اليسار | يمين-> <!-يمكن تعيين المعلمات في البيانات-**** ---
ثم تحتاج إلى تهيئته باستخدام JS ، وإلا فلن يكون له أي تأثير
// تهيئة تلميح الأدوات ، أشر إلى العرض
$ ('[data-toggle = "tooltip"]'). tooltip () ؛
5. صندوق منبثق
يشبه المربع المنبثقة تلميح الأدوات ، لكنه يعرض أكثر ثراءً من تلميح الأدوات وهو أيضًا أكثر شيوعًا.
<!-TRIGGER = "Foucus" انقر فوق الفارغ للاختفاء. إذا لم تضيفه ، فانقر فوق الزر ليختفي. إذا قمت بتعيينه على التحوم ، يتم عرض الزر الذي تنقله. قم بإزالة وتختفي-> <!-يتم تحديد هذا المربع المنبثق ، والمحتوى هو المحتوى-> <button type = "button" trigger = "foucus" data-placement = "bottom" data-toggle = "popover" data-content = "content"> pop-up box </button>
ثم تهيئته مع JS
// تهيئة popover
$ (". JS-popover"). popover () ؛
6. زر
تتحدث المادتان الأوليان عن النمط الأساسي للأزرار. هذه المرة هو متقدم ، مما يسمح للأزرار بعرض نص مختلف عند التحميل.
<!-يمكنك تعيين نص الزر عند التحميل-> <button type = "button" تحميل البيانات = "LODING for 3S"> حالة التحميل </button>
ثم استخدم JS لربط حدث النقر
// حدث النقر فوق زر الربط $ (".7. تكديس
يمكن أن يؤدي تأثير التراص إلى توفير الكثير من عناصر التحكم في الشاشة ، وهو أمر عملي للغاية
هذا للنقر على الزر لفتح المكدس
<!-HREF هو معرف المحتوى-> <a data-toggle = "collapse" href = "#collapsexample"> انقر لعرض </a> <div id = "collapsexample"> <viv> hello </viv> </viv>
هذا هو كومة مجموعات الألواح
<div id = "orcordion" rol = "tablist"> <viv> <div rom = "tab" id = "headingone"> <!-العنوان المعروض-> <h4> <!-مواليد البيانات إذا كان معرف مجموعة اللوحة-> <a data-toggle = "cllapse" data ". افتح ، بدون إخفاء-> <div id = "collapseone" rom = "tabpanel"> <viv> hello <br> hello <br> hello <br> <br> </div> </viv> </viv> <div> <div " </h4> </viv> <div id = "collapsetwo" rob = "tabpanel"> <viv> hello <br> hello <br> hello <br> <br> </viv> </viv> </viv> <div> <div rom = "tab" id = "headingthree"> <h4> <a data-toggle = "collapse" parent = "#cordion" href = "#collapsethree"> item1 </a> </h4> </viv> <div id = "collapsethree" rob = "tabpanel"> <biv> hello <br> hello <br> hello <br> </viv> </viv> </viv>
8. الصفحة الدوارة
يمكننا في كثير من الأحيان رؤيته على الصفحة الرئيسية للموقع
<div id = "carousel-example-generic"> <!-هذه هي الدوائر البيضاء الثلاثة أدناه-> <ol> <li-target = "#carousel-example-generic" data-slide-to- "0"> </li> <li data-target = "#carousel-example-generic" data-target = "#carousel-example-generic" data-slide-to = "2"> </li> </ol> <!-محتوى صفحة الدوران-> <div> <img src = "picture/4.jpg"> <!-إضافة نص-> <div> src = "Images/2.jpg"> <viv> <h3> u3d </h3> <p> إطلاق منتج جديد </p> </viv> </viv> <viv> <img src = "الصور/3.jpg"> <div> <h3> Apple </h3> <p> Apple </p> </div> </div>- href = "#carousel-example-generic" data-slide = "prew"> <span> </span> </a> <a href = "#carousel-example-generic" data-slide = "next"> </span>
يمكنك ضبط الفواصل الزمنية والبدء تلقائيًا باستخدام JS
// قم بتعيين الفاصل الزمني على 2s و carousel $ تلقائيًا (". carousel"). carousel ({الفاصل: 2000})9. الشريط الجانبي
المحتوى الرئيسي للشريط الجانبي هو قائمة
<!-لتعيين العرض ، إخفاءه على شاشة الهاتف-> <viv> <ul> <a href = "#"> hello </a> <a href = "#" href = "#"> hello </a> <a href = "#"> hello </a> <a href = "#"
اكتب النمط مرة أخرى
<style> .Affixed-element-top.affix { /*إذا كنت تريد أن تكون في الأسفل ، يمكنك تغييره إلى الأسفل: 10px ؛* / top: 10px ؛ . } </style>إضافة بعض JS
$ (".هذا هو الاستخدام الأساسي لـ Boostrap. بعد إتقانه ، يمكنك إنشاء صفحة ويب جيدة.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.