How much do you know about Bootstrap framework
Bootstrap is a front-end technical framework that can be adopted by many platforms. JAVA/PHP/.NET can be used as a front-end interface. Integrating JQuery can achieve very rich interface effects. Currently, there are many Bootstrap plug-ins that can be provided for everyone to use. However, many domestic Bootstrap-based introductions still focus on teaching, introducing various basic knowledge and simple use of Bootstrap; this article hopes to provide a comprehensive case introduction to the Bootstrap development framework based on the actual MVC project based on C#, and explain it with screenshots of the actual project code and effect, striving to introduce the experience and experience in this area in detail and intuitively.
1. Overview of Bootstrap Development Framework Based on Metronic
Metronic is a foreign Bootstrap development framework based on HTML, JS and other technologies, integrating many Bootstrap front-end technologies and plug-ins. It is a very good technical framework. Based on this article, combined with my research on MVC's web framework, this article integrates the Bootstrap development framework based on MVC to enable it to meet the structural needs of actual projects.
The following is the overall renderings of my overall project.
The content of the menu area is dynamically obtained from the database, and some information is placed on the top column of the system, and it provides users with rapid processing of personal data, such as viewing personal information, logging out, locking the screen, etc. The content area is mainly visually displayed data, which can be displayed through tree list controls and table controls. Generally, the data also needs to be added, deleted, modified, and paging, so various functions need to be integrated. In addition to query and displaying the user's data, it also requires import and export related operations, which are routine data processing functions. After determining these rules and interface effects, we can generate them through code generation tools to quickly generate the interface effects of these web projects.
2. Bootstrap development framework menu display
The entire framework involves a lot of content, including the use of various CSS features of regular Bootstrap, as well as menu bar, Bootstrap icon management, system top bar, tree control JSTree, Portlet container, Modal dialog box, Tab control, drop-down list Select2, checkbox iCheck, multi-text editing control summernote, file and picture upload display fileinput, prompt control bootstrap-toast and sweetalert, numerical adjustment control touchspin, video play display control video-player, etc. These features are designed in the holistic solution. Collecting these excellent plug-ins can provide our framework with more powerful functions and rich interface experience.
This section continues to return to the beginning of the framework, the processing and presentation of the menu. Generally, for the convenience of management, menus are divided into three levels. The selected menus are different from other menu styles. The menus can be folded and minimized. The effect is as follows.
In Bootstrap, building menus is a relatively easy task. It mainly uses UL and LI. Through style processing, the menu layout can be set. The code is as follows.
<ul data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200"> <li id="1"> <a href="/Home/index"> <i></i> <span>Home</span> <span></span> <span></span> </a> </li> <li id="2"> <a href="javascript:;"> <i></i> <span>Industry Trends</span> <span></span> <span></span> </a> <ul> <li style="font-size:14px;color:yellow"> <i></i> Industry Trends</li> <li> <a href="#"> <i></i> <span>4</span> Policies and Regulations</a> </li> <li> <a href="#"> <i></i> <span>4</span> Notices</a> </li> <li> <a href="#"> <i></i> <span>4</span> Dynamic Information</a> </li> </li> </li> </li> </ul> </li> </ul> </ul> </ul> </ul> </ul>
However, our general menus are dynamically changed, that is, we need to obtain them from the database and set them to the front-end display. In this way, we need to output the menu content in the MVC controller and then bind them to the front-end interface to realize the dynamics of menu data. At the same time, this is also the basic processing of permission control.
In the base class, we can get the menu data and put it into the ViewBag object after the user logs in.
The specific code is as follows. First, determine whether the user is logged in. If logged in, obtain the user's menu data and it is available in ViewBag for use.
/// <summary> /// Rewrite the processing of the base class before the action is executed/// </summary> /// <param name="filterContext">Rewrite the parameters of the method</param> protected override void OnActionExecuting(ActionExecutingContext filterContext) { base.OnActionExecuting(filterContext); // Get the information about the user login CurrentUser = Session["UserInfo"] as UserInfo; if (CurrentUser == null) { Response.Redirect("/Login/Index");//If the user is empty, jump to the login interface} else { //Set the authorization attribute, and then assign the value to ViewBag to save ConvertAuthorizedInfo(); ViewBag.AuthorizeKey = AuthorizeKey; //Login information set ViewBag.FullName = CurrentUser.FullName; ViewBag.Name = CurrentUser.Name; ViewBag.MenuString = GetMenuString(); //ViewBag.MenuString = GetMenuStringCache(); //Use cache and update it every once in a while} }Among them, the GetMenuString function is the assembly and processing of menus. The information of the menu in the database is a tree structure as shown below.
We can build some HTML code used in the interface based on the database menu information.
#region defined format template // javascript:; // {0}?tid={1} var firstTemplate = @" <li id='{3}'> <a href='{0}'> <i class='{1}'></i> <span class='title'>{2}</span> <span class='selected'></span> <span class='arrow open'></span> </a>"; 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>"; #endregionFor example, the third-level menu can be generated through code.
//Level 3 icon = subNodeInfo.WebIcon; //tid is the top-level classification id, sid is the third-level menu id tmpUrl = string.Format("{0}{1}tid={2}&sid={3}", subNodeInfo.Url, GetUrlJoiner(subNodeInfo.Url), info.ID, subNodeInfo.ID); url = (!string.IsNullOrEmpty(subNodeInfo.Url) && subNodeInfo.Url.Trim() != "#") ? tmpUrl : "javascript:;"; sb = sb.AppendFormat(thirdTemplate, url, icon, subNodeInfo.Name, subNodeInfo.ID);Of course, if you want to increase the concurrency, you can reduce the frequent retrieval of the menu and put this part of the data into MemeryCache, as follows.
public string GetMenuStringCache() { string itemValue = MemoryCacheHelper.GetCacheItem<string>("GetMenuStringCache", delegate() { return GetMenuString(); }, null, DateTime.Now.AddMinutes(5) //Expiration in 5 minutes, re-get); return itemValue; }3. Use of layout pages
At the same time, in order to improve the reuse of the page, we generally extract the content of the same part of each page and place it on the overall layout page. In this way, the other parts are all inherited from the layout view page. Our dynamic menu part is also part of the content in the layout view.
The _Layout.cshtml in the figure above is the MVC overall layout view page based on C#. In this way, we set the menu display content in this page, as well as the part of the main page content and part of the script display, and it is enough.
The display code of the menu is as follows:
The page display section left on the layout page is as follows.
Since Bootstrap generally puts JS files at the end, in addition to retaining some of the necessary Jquery and other scripts on the layout page, we also need to put some of the script content at the bottom of the page for loading, and our script loading can be compressed and integrated using MVC's Bundles technology. For this technology, please refer to my previous article to introduce "Summary of Experience of Web Development Framework Based on MVC4+ EasyUI (11) - Using Bundles to Process Simplified Page Code".
In this way, after we introduce the layout view page in the views of each subpage, we only need to write the part of the personalized display content, the specific code is as follows.
Then at the bottom of the page, just include the script code for the required part. After the page is generated, it will be displayed reasonably according to the order blocks set by the layout page, and all parts of the content will be integrated.
4. Use of the page editing tool Sublime Text
Many of the screenshots in the previous one are from the VS environment, but generally when we edit the view page, we use Sublime Text, a powerful editing tool, rich plug-ins, intelligent syntax prompts, etc., which will make you love it after using it. It is a very fast tool for editing view pages and is highly recommended.
VS is generally used to do file management, compilation and other processing.
The above content is the summary of experience of the development framework based on BootStrap Metronic introduced to you [I] Framework overview and menu module processing. I hope it will be helpful to everyone. If you want to know more information, please pay attention to the Wulin.com website!