كم تعرف عن إطار bootstrap
Bootstrap هو إطار فني في الواجهة الأمامية يمكن اعتماده من قبل العديد من المنصات. يمكن استخدام Java/PHP/.NET كواجهة أمامية. يمكن أن يحقق دمج jQuery تأثيرات واجهة غنية للغاية. حاليًا ، هناك العديد من المكونات الإضافية التي يمكن توفيرها للجميع لاستخدامها. ومع ذلك ، لا تزال العديد من المقدمات المستندة إلى Bootstrap المحلية تركز على التدريس ، وتقديم المعرفة الأساسية المختلفة والاستخدام البسيط لل bootstrap ؛ وتأمل هذه المقالة في توفير مقدمة شاملة لإطار تطوير Bootstrap استنادًا إلى مشروع MVC الفعلي استنادًا إلى C#، وشرحه مع لقطات من رمز المشروع الفعلي وتأثيره ، وسعود إلى تقديم الخبرة والخبرة في هذا المجال بالتفصيل والتفصيل.
1. نظرة عامة على إطار تطوير Bootstrap على أساس Metronic
Metronic هو إطار لتطوير Bootstrap الأجنبي يعتمد على HTML و JS وغيرها من التقنيات ، ودمج العديد من تقنيات الواجهة الأمامية Bootstrap والمكونات الإضافية. إنه إطار فني جيد جدًا. استنادًا إلى هذه المقالة ، إلى جانب بحثي حول إطار الويب الخاص بـ MVC ، تدمج هذه المقالة إطار تطوير Bootstrap استنادًا إلى MVC لتمكينها من تلبية الاحتياجات الهيكلية للمشاريع الفعلية.
فيما يلي العروض الشاملة لمشروعي العام.
يتم الحصول على محتوى منطقة القائمة ديناميكيًا من قاعدة البيانات ، ويتم وضع بعض المعلومات في العمود العلوي من النظام ، ويوفر للمستخدمين معالجة سريعة للبيانات الشخصية ، مثل عرض المعلومات الشخصية ، وتسجيل الخروج ، وقفل الشاشة ، إلخ. بشكل عام ، يجب أيضًا إضافة البيانات وحذفها وتعديلها وترحيلها ، لذلك يجب دمج الوظائف المختلفة. بالإضافة إلى الاستعلام وعرض بيانات المستخدم ، فإنه يتطلب أيضًا عمليات الاستيراد والتصدير المتعلقة بالتصدير ، والتي هي وظائف معالجة البيانات الروتينية. بعد تحديد هذه القواعد وتأثيرات الواجهة ، يمكننا إنشاءها من خلال أدوات توليد التعليمات البرمجية لإنشاء تأثيرات واجهة مشاريع الويب هذه بسرعة.
2. عرض قائمة إطار تطوير Bootstrap
يتضمن الإطار بأكمله الكثير من المحتوى ، بما في ذلك استخدام ميزات CSS المختلفة لل bootstrap العادية ، بالإضافة إلى شريط القائمة ، وإدارة أيقونة bootstrap ، وشريط النظام العلوي ، والتحكم في الأشجار ، وحاوية المدخل ، ومربع مربع الحوار الوسيط ، ومربع محمّل ، وعلامة مراقبة ، ومربع تحكم ، ومربع ، ومتعدد ، ومرجع ، ومرجع ، ومرجع ، ومرجع ، ومتعدد ، التحكم في اللمس ، تشغيل فيديو لمشاهدة الفيديو ، لاعب فيديو ، وما إلى ذلك. تم تصميم هذه الميزات في الحل الشمولي. يمكن أن يوفر جمع هذه المكونات الممتازة إطار عملنا مع وظائف أكثر قوة وتجربة واجهة غنية.
يستمر هذا القسم في العودة إلى بداية الإطار ، ومعالجة القائمة وعرضها. بشكل عام ، لراحة الإدارة ، تنقسم القوائم إلى ثلاثة مستويات. القوائم المحددة تختلف عن أنماط القائمة الأخرى. يمكن طي القوائم وتقليلها. التأثير كما يلي.
في bootstrap ، بناء قوائم هو مهمة سهلة نسبيا. إنه يستخدم بشكل أساسي UL و LI. من خلال معالجة النمط ، يمكن تعيين تخطيط القائمة. الرمز كما يلي.
<ul data-keep-expanded = "false" data-auto-scroll = "true" data-speed speed = "200"> <li id = "1" <i> </i> <span> اتجاهات الصناعة </span> <span> </span> <span> </span> </a> <ul> <li style = "font-size: 14px ؛ اللون: أصفر"> <i> </i> توجهات الصناعة </li> <li> <li> <li> <li> Href = "#"> <i> </i> <span> 4 </span> إشعارات </a> </li> <li> <a href = "#"> <i> </i> <span> 4 </span> معلومات ديناميكية </a> </li> </li> </li> </ul> </li> </ul> </ul> </ul> </ul>
ومع ذلك ، يتم تغيير قوائمنا العامة ديناميكية ، أي أننا بحاجة إلى الحصول عليها من قاعدة البيانات وتعيينها على الشاشة الأمامية. وبهذه الطريقة ، نحتاج إلى إخراج محتوى القائمة في وحدة تحكم MVC ثم ربطها بالواجهة الأمامية لتحقيق ديناميات بيانات القائمة. في الوقت نفسه ، هذا هو أيضا المعالجة الأساسية للتحكم في الإذن.
في الفئة الأساسية ، يمكننا الحصول على بيانات القائمة ووضعها في كائن ViewBag بعد تسجيل الدخول.
الرمز المحدد كما يلي. أولاً ، حدد ما إذا كان المستخدم قد تم تسجيل الدخول. في حالة تسجيل الدخول ، احصل على بيانات قائمة المستخدم ويتوفر في ViewBag للاستخدام.
///] // احصل على معلومات حول تسجيل الدخول إلى المستخدم الحالي = الجلسة ["userInfo"] كـ userInfo ؛ if (currentUser == null) {response.redirect ("/login/index") ؛ // إذا كان المستخدم فارغًا ، فقم إلى واجهة تسجيل الدخول} {// قم بتعيين سمة التفويض ، ثم قم بتعيين القيمة لعرضها لحفظ senderAuthorizedInfo () ؛ ViewBag.AuthorizeKey = AuthorizeKey ؛ // معلومات تسجيل الدخول set viewbag.fullname = currentUser.fullName ؛ viewBag.name = currentUser.name ؛ ViewBag.menustring = getMenustring () ؛ //viewbag.menustring = getMenustringCache () ؛ // استخدم ذاكرة التخزين المؤقت وقم بتحديثها مرة واحدة كل فترة}}من بينها ، وظيفة getMenustring هي تجميع ومعالجة القوائم. معلومات القائمة في قاعدة البيانات هي بنية شجرة كما هو موضح أدناه.
يمكننا إنشاء بعض رمز HTML المستخدمة في الواجهة بناءً على معلومات قائمة قاعدة البيانات.
#Region tempat template // JavaScript: ؛ // {0}؟ tid = {1} var firsttemplate = @"<li id = '{3}'> <a href = '{0}'> <i class = '{1}'> </i> <span class = 'title'> {2} </span class = 'selected> </span> </span> var secondTemplate = @"<li class = 'heading' style = 'font-size: 14px ؛ color: yellow'> <i class = '{0}'> </i> {1} </li>" ؛ var thirdtemplate = @"<li id = '{3}'> <a href = '{0}'> <i class = '{1}'> </i> {2} </a> </li>" ؛ var firsttemplateend = "</li>" ؛ var secondtemplatestart = "<ul class = 'sub-menu'>" ؛ var secondTemplateend = "</ul>" ؛ #endregionعلى سبيل المثال ، يمكن إنشاء القائمة من المستوى الثالث من خلال الكود.
// Icon 3 icon = subnodeinfo.webicon ؛ // TID هو معرف التصنيف على مستوى أعلى ، SID هو معرف القائمة من المستوى الثالث tmpurl = string.format ("{0} {1} tid = {2} & sid = {3}" ، subnodeinfo.url ، geturljoininer (subnodeinfo.url) ، info.id ، url = (! string.isnullorempty (subnodeinfo.url) && subnodeinfo.url.trim ()! = "#")؟ tmpurl: "JavaScript :؛" ؛ sb = sb.appendformat (thirdtemplate ، url ، icon ، subnodeinfo.name ، subnodeinfo.id) ؛بالطبع ، إذا كنت ترغب في زيادة التزامن ، فيمكنك تقليل الاسترجاع المتكرر للقائمة ووضع هذا الجزء من البيانات في MemeryCache ، على النحو التالي.
السلسلة العامة getMenustringCache () {string itemValue = MemoryCacheHelper.getCacheItem <String> ("getMenustringCache" ، depate () {return getMenustring () ؛} ، null ، dateTime.now.addminutes (5) // expiration في 5 دقائق ، إعادة السحب) ؛ إرجاع itemValue ؛ }3. استخدام صفحات التصميم
في الوقت نفسه ، من أجل تحسين إعادة استخدام الصفحة ، نستخرج عمومًا محتوى الجزء نفسه من كل صفحة ونضعه على صفحة التخطيط الكلي. وبهذه الطريقة ، يتم توريث جميع الأجزاء الأخرى من صفحة عرض التصميم. جزء القائمة الديناميكية لدينا هو أيضًا جزء من المحتوى في عرض التخطيط.
_layout.cshtml في الشكل أعلاه هي صفحة عرض التخطيط العام MVC استنادًا إلى C#. وبهذه الطريقة ، قمنا بتعيين محتوى عرض القائمة في هذه الصفحة ، وكذلك جزء محتوى الصفحة الرئيسي وجزء من عرض البرنامج النصي ، وهو يكفي.
رمز عرض القائمة كما يلي:
قسم عرض الصفحة المتبقي على صفحة التخطيط هو كما يلي.
نظرًا لأن Bootstrap يضع ملفات JS عمومًا في النهاية ، بالإضافة إلى الاحتفاظ ببعض من jQuery الضرورية والبرامج النصية الأخرى في صفحة التخطيط ، نحتاج أيضًا إلى وضع بعض محتوى البرنامج النصي في أسفل الصفحة للتحميل ، ويمكن ضغط التحميل السينمائي الخاص بنا ودمجها باستخدام تقنية حزم MVC. بالنسبة لهذه التكنولوجيا ، يرجى الرجوع إلى مقالتي السابقة لتقديم "ملخص تجربة إطار تطوير الويب على أساس MVC4+ Easyui (11) - باستخدام حزم لمعالجة رمز الصفحة المبسط".
وبهذه الطريقة ، بعد أن نقدم صفحة عرض التصميم في طرق عرض كل صفحة فرعية ، نحتاج فقط إلى كتابة جزء محتوى العرض المخصص ، فإن الكود المحدد هو كما يلي.
ثم في أسفل الصفحة ، فقط قم بتضمين رمز البرنامج النصي للجزء المطلوب. بعد إنشاء الصفحة ، سيتم عرضها بشكل معقول وفقًا لكتل الطلبات المحددة بواسطة صفحة التخطيط ، وسيتم دمج جميع أجزاء المحتوى.
4. استخدام أداة تحرير الصفحة سامية
العديد من لقطات الشاشة في البيئة السابقة هي من بيئة VS ، ولكن بشكل عام عندما نقوم بتحرير صفحة العرض ، نستخدم نصًا رائعًا ، وأداة تحرير قوية ، أو مكونات مكونات غنية ، ومطالبات بناء الجملة الذكية ، وما إلى ذلك ، والتي ستجعلك تحبها بعد استخدامها. إنها أداة سريعة للغاية لتحرير صفحات العرض وينصح بشدة.
يستخدم VS بشكل عام لإدارة الملفات والتجميع والمعالجة الأخرى.
المحتوى أعلاه هو ملخص لتجربة إطار التطوير القائم على Bootstrap Metronic المقدمة لك [I] نظرة عامة على معالجة وحدة القائمة. آمل أن يكون ذلك مفيدًا للجميع. إذا كنت تريد معرفة المزيد من المعلومات ، فيرجى الانتباه إلى موقع Wulin.com!