pg电子官方软件在哪下载

書名： Bootstrap for ASP.NET MVC（Second Edition）
作者名： Pieter van der Westhuizen
本章字數(shù)： 363字
更新時間： 2021-07-08 11:26:05

Creating a MVC Layout page

The final step for using Bootstrap 4 in your ASP.NET MVC project is to create a Layout page that will contain all the necessary CSS and JavaScript files in order to include Bootstrap components in your pages. To create a Layout page, follow these steps:

Add a new sub folder called Shared to the Views folder.
Add a new MVC View Layout Page to the Shared folder. The item can be found in the .NET Core | Server-side category of the Add New Item dialog.
Name the file _Layout.cshtml and click on the Add button:

With the current project layout, add the following HTML to the _Layout.cshtml file:

<!DOCTYPE html> 
        <html lang="en"> 
          <head> 
            <meta charset="utf-8"> 
            <meta name="viewport" content="width=device-width,
             initial-scale=1, shrink-to-fit=no"> 
            <meta http-equiv="x-ua-compatible" content="ie=edge"> 
            <title>@ViewBag.Title</title> 
            <link rel="stylesheet" href="~/css/bootstrap.css" /> 
          </head> 
         <body> 
           @RenderBody() 
 
            <script src="~/lib/jquery/dist/jquery.js"></script> 
            <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script> 
         </body> 
        </html>

Finally, add a new MVC View Start Page to the Views folder called _ViewStart.cshtml. The _ViewStart.cshtml file is used to specify common code shared by all views.

Add the following Razor markup to the _ViewStart.cshtml file:

        @{ 
            Layout = "_Layout"; 
        }

In the preceding mark-up, a reference to the Bootstrap CSS file that was generated using the Sass source files and Gulp is added to the <head> element of the file. In the <body> tag, the @RenderBody method is invoked using Razor syntax.
Finally, at the bottom of the file, just before the closing </body> tag, a reference to the jQuery library and the Bootstrap JavaScript file is added. Note that jQuery must always be referenced before the Bootstrap JavaScript file.

Content Delivery Networks

You could also reference the jQuery and Bootstrap library from a Content Delivery Network (CDN). This is a good approach to use when adding references to the most widely used JavaScript libraries. This should allow your site to load faster if the user has already visited a site that uses the same library from the same CDN, because the library will be cached in their browser.

In order to reference the Bootstrap and jQuery libraries from a CDN, change the <script> tags to the following:

<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>

Note

You can download the example code files for this book from https://github.com/Pietervdw/bootstrap-for-aspnetmvc.

There are a number of CDNs available on the Internet; listed here are some of the more popular options:

MaxCDN: https://www.maxcdn.com/
Google Hosted Libraries: https://developers.google.com/speed/libraries/
CloudFlare: https://www.cloudflare.com/
Amazon CloudFront: https://aws.amazon.com/cloudfront/

官术网_书友最值得收藏!

Bootstrap for ASP.NET MVC（Second Edition）

Creating a MVC Layout page

Content Delivery Networks

Note