أولاً عليك تقديم bootstrap و jQuery
نوصي بـ CDN: http://cdn.gbtags.com/index.html
ثم ابدأ في كتابة رمز HTML. إذا كنت لا ترغب في تغيير تأثير العرض ، في الواقع ، لا يُسمح لـ CSS بالكتابة 2333.
نظرًا لوجود العديد من رموز HTML ، يتم تقسيم هنا إلى ثلاثة أجزاء ، ثم رمز HTML الإجمالي هو الأخير
بادئ ذي بدء ، كما هو موضح في الشكل أعلاه ، تحتاج إلى فهم المكونات التالية من bootstrap
• شريط التنقل
•زر
•استمارة
• القائمة المنسدلة
في الواقع ، هناك العديد من أنماط المكونات أعلاه. نحتاج فقط إلى معرفة جزء منه. إذا كنت تريد معرفة المزيد ، فيرجى الرجوع إلى http://www.gbtags.com/api/bootstrap3.2/bootstrap-doc/components/index.html لمزيد من المعلومات.
ملاحظة: الفئة {} هنا مجرد تعليقات ، وليس رمز HTML
PS2: يوفر ملفات HTML مع تصحيح الأخطاء على الإنترنت
شريط التنقل وشعار شريط التنقل
<!-إنشاء شريط تنقل bootstarp وتخطيط شعار التنقل-> <v> <viv> // do sth </viv> </v>
أزرار التنقل
<!-إنشاء زر-> <!-الفئة {navbar-toggle: تم نقل هذا الزر إلى JS قابلة للنقر: إذا لم تقم بدمج navbar-collapse ، فهي فئة افتراضية .. إذا لم تضيفه ، فأنت لا تجد أي أخطاء. aria-expanded = "false": وظيفة القراءة المساعدة .. التعيينات للمجموعات الخاصة-> <button type = "button" data-toggle = "collapse" data-arget = "#navbar-gbtag" aria-expanded = "false"> <! حاول}-> <span> انقر فوق لي </span> <span> </span> <span> </span> <span> </span> <span> </span> </mother>استمارة
<div> <!-class {form-control: اضبط العرض على ٪ لكننا قمنا بتعيين شكل navbar في نموذج العنصر الأصل بحيث يتم التحكم في العرض بمقدار معين}-> <inputالقائمة المنسدلة
<li> <!-class {tropown-toggle: أعلن أن هذه قائمة يمكن إسقاطها. في الواقع ، لم أجد الغرض المحدد لهذا الفئة. إلغاء ولم تجد أي bugspan.caret {icon picture نمط للمثلث الصغير}} toggle = "REPDOWN": تقديم سمة ضرورية لدور مكون القائمة المنسدلة = "زر": بمثابة إعلان إضافي. إعلان أن هذا هو زر-> <a href = "#" data-toggle = "tropdown" rob = "button" aria-haspopup = "true" aria-expanded = "false"> detroldown name </span> </a> <ul> <ul> <li> هذا العنصر كقسم-> <li rob = "flearator"> </li> <li> <a href = ""> يرجى اتباع تسمية المهوس </a> </li></ul> <!-القائمة المنسدلة->>التنفيذ العام لـ HTML
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> شريط التنقل المستجيب </title> <link rel = "stylesheet" type = "text/css" href = "../ css/botstrap.min.cs"/> <cript src = " type = "text/javaScript" charset = "utf-8"> </script> <script src = "../ js/bootstrap.min.js" type = "text/javaScript" charset = "utf-8"> </script> </head> <body> <! <viv> <!-إنشاء تخطيط bootstraplogo-> <!-ملاحظة: يجب عليك إنشاء رأس قوارير ، لف الشعار والأزرار المستجيبة في. وإلا JS عبارة عن انهيار قابلة للنقر: إذا لم تجمع بين Navbar-Collapse ، فهي فئة افتراضية. يبدو أنه لا توجد أخطاء دون إضافتها. } data-toggle = "cllapse": تقديم المكونات الإضافية--t-arget = "#navbar-gbtag": عند النقر فوق الزر ، والتي يتم إعادة توجيهها/فتحها aria-expanded = "false": arged argy fore full ". <!-أضف بعض الرموز والتعليمات الموجودة على فئة الزر {sr-only: إخفاء هذه العلامة incons: قم بتغيير نمط الرمز وتغيير نمط الرمز إلى Glyphicon-star try}-> <span> انقر فوق لي </span> </span> <span> </span> يتم توسيعه افتراضيًا. إذا تم إلغاء الانهيار ، يتم توسيع الزر افتراضيًا. NAVBAR-COLLAPSE: الفئة المطلوبة لتخطيط عنصر شريط التنقل} معرف: بما يتوافق مع بيانات البيانات الخاصة بالزر-> <div id = "navbar-gbtag"> <!-إنشاء شريط الملاحة الداخلي {NAV: إنشاء فئة أساسية ضرورية للعناصر الداخلية في شريط التنقل. Navbar-Nav: ليس من السهل شرح هذا. لأنني نظرت من خلال الوثائق الرسمية ولم تقل ذلك بالتفصيل. هنا سأشرح ذلك باختصار: اجعل UL مركزًا أفقيًا وأفقيًا. في الوقت نفسه ، يكون العرض هو عرض المحتوى ولن يضغط على العناصر خلفه ، مثل الشكل ؛ وأخيراً يمكنك حذف هذا الفصل ومحاولة معرفة أنه يتم استخدامه. Navbar-Right: الفئة التي يتم ترتيبها بواسطة شريط التنقل}-> <ul> <!-الفئة {نشطة: انقر الافتراضي ، المنسدلة: الفئة الأساسية المطلوبة لإنشاء قائمة منسدلة}-> <li> <a href = ""> relsoul </a> </li> <li> قائمة يمكن إسقاطها. في الواقع ، لم أجد الغرض المحدد لهذا الفئة. لقد ألغيت ذلك ولم أجد أي أخطاء. span .caret {icon صورة صورة للمثلث الصغير}} data-toggle = "REPDOWN": تقديم سمة ضرورية لدور مكون القائمة المنسدلة = "زر": بمثابة إعلان مساعد. إعلان أن هذا هو زر-> <a href = "#" data-toggle = "tropdown" rob = "button" aria-haspopup = "true" aria-expanded = "false"> detroldown name </span> </a> <ul> <ul> <li> هذا العنصر كقسم-> <li rob = "flearator"> </li> <li> <a href = ""> يرجى الانتباه إلى علامة المهوس </a> </li> </ul> <!-القائمة المنسدلة-> </li> <!-التنقل الفرعي-> </ul> <! http://v3.bootcss.com/components/#navbar-forms navbar-left: تستخدم لتحديد محاذاة العناصر في شريط التنقل http://v3 BTN: يعتمد نمط الأزرار على مرجع BTN الأساسي المحدد http://v3 نموذج العنصر الأصل بحيث سيتم التحكم في العرض بمقدار معين}-> <إدخال type = "text" placeholder = "search"/> </div> <!-form group-> <button type = "submit"> search </utton> </form> <!-form-> <ul> <li> <li> rob = "button" aria-haspopup = "true" aria-expanded = "false"> اسم القائمة المنسدلة </span> </a> <ul> <li> <a href = ""> bootstrap </a> </li> <!-class {dipider: dipider style}}} explator <li> <a href = ""> يرجى اتباع علامة المهوس </a> </li></ul> <!-القائمة المنسدلة-> </li> <!-الملاحة الفرعية 2-> </ul> <!-عنصر التنقل 2-> </div> <!-تخطيط التنقل-> </div> <!المحتوى أعلاه هو رمز المثال لإنشاء أشرطة التنقل المستجيبة من قبل المحرر لك. آمل أن يكون ذلك مفيدًا لك. إذا كنت ترغب في معرفة المزيد من المعلومات ، فيرجى الانتباه إلى موقع Wulin.com. شكرًا لك!