[ASP. NET MVC] using the bootstrap suite

[ASP. NET MVC] using the bootstrap kit preface

In developing Web projects, most developers, in addition to some of the most talented developers, should be bothered by how to construct "beautiful" user interfaces. In addition to joining the art staff option, developers can become self-reliant and add bootstrap suites to their Web projects. By using a variety of beautifully designed styles and components in the bootstrap suite, the user interface of the Web project is more aesthetically pleasing, increasing the customer's goodwill towards the project's output. This article describes how to use the bootstrap suite in a Web project, keeping a record for yourself and hoping to help developers in need.

Installing the bootstrap Kit

Using the bootstrap suite within a Web project, there are some predecessor jobs to complete first. The next example, starting with an empty ASP. NET MVC project, shows how to complete a predecessor job using the bootstrap suite within this project.

1. Create a blank MVC project.

2. Use NuGet to install the bootstrap suite.

3. Join the home controller and its corresponding index view.

4. The index view adds the bootstrap suite's CSS reference, JavaScript reference, and "lang=" en "attribute to the HTML tag.

5. Completing the above steps will also complete the predecessor job using the bootstrap suite, which can be followed by adding various page content after the body tag's "contents" annotation.

Apply Bootstrap style

The default display style of the HTML label on the site page has not satisfied the user's aesthetic vision. The HTML volume label on the page is rendered as a bootstrap style to provide a more aesthetically pleasing user interface.

2. On the bootstrap website, look for instructions on how to use the bootstrap style.

   • http://getbootstrap.com/

4. In the bootstrap style, use the description to find the appropriate style and description for use.

6. According to the description of the style, add the corresponding page content after the "contents" annotation of the body tag.

   <!-- Contents --><table class="table table-striped">    <thead>        <tr>            <th>AAAAA</th>            <th>BBBBB</th>            <th>CCCCC</th>        </tr>    </thead>    <tbody>        <tr>            <td>A0001</td>            <td>B0001</td>            <td>C0001</td>        </tr>        <tr>            <td>A0002</td>            <td>B0002</td>            <td>C0002</td>        </tr>        <tr>            <td>A0003</td>            <td>B0003</td>            <td>C0003</td>        </tr>    </tbody></table>

8. Then, you can see the results of applying the bootstrap style on the browser by executing the Web project.

10. The default display style for the HTML volume is compared to the "class=" Table table-striped "property, but the rendering effect is very different.

    <!-- Contents --><table>    <thead>        <tr>            <th>AAAAA</th>            <th>BBBBB</th>            <th>CCCCC</th>        </tr>    </thead>    <tbody>        <tr>            <td>A0001</td>            <td>B0001</td>            <td>C0001</td>        </tr>        <tr>            <td>A0002</td>            <td>B0002</td>            <td>C0002</td>        </tr>        <tr>            <td>A0003</td>            <td>B0003</td>            <td>C0003</td>        </tr>    </tbody></table>

Applying Bootstrap components

A number of bootstrap components are also included in the Bootstrap suite, which combine existing HTML volume labels to provide a variety of screen rendering that is more consistent with the user's input and output habits.

2. On the bootstrap website, look for instructions for using bootstrap components.

   • http://getbootstrap.com/

4. In the instructions for use of the bootstrap component, find the appropriate components and instructions for use.

5. According to the description of the component, add the corresponding page content after the "contents" annotation on the body tag.

   <!--Contents--><div class= "Progress" > <div class= "Progress-bar progress-bar-success" role= " ProgressBar "aria-valuenow=" "aria-valuemin=" 0 "aria-valuemax=" style= "width:40%" > <span class= "sr-onl Y ">40% Complete (Success) </span> </div></div><div class=" Progress "> <div class=" Progre Ss-bar progress-bar-info "role=" ProgressBar "aria-valuenow=" "aria-valuemin=" 0 "aria-valuemax=" style= "width: 20% "> <span class=" sr-only ">20% complete</span> </div></div><div class=" Progress "&    Gt <div class= "Progress-bar progress-bar-warning" role= "ProgressBar" aria-valuenow= "aria-valuemin=" 0 " aria-valuemax= "style=" width:60% "> <span class=" sr-only ">60% Complete (warning) </span> </ Div></div><div class= "Progress" > <div class= "Progress-bar progress-bar-danger" role= "ProgressBar" aria-valuenow= "aria-valuemin=" 0 "aria-valuemax=" 1XX "style=" width:80% "> <span class=" sr-only ">80% Complete (danger) </span> &LT;/DIV&GT;&LT;/DIV&G T

7. Then execute the Web project and you will see the results of the bootstrap component displayed on the browser.

Reference data

• Kkbruce-bootstrap Chinese Teaching

• Bootstrap-bootstrap official website

[ASP. NET MVC] using the bootstrap suite