[ASP.NET MVC] 使用Bootstrap套件

前言

在开发Web项目的时候,除了一些天赋异禀的开发人员之外,大多数的开发人员应该都跟我一样,对于如何建构出「美观」的用户接口而感到困扰。这时除了,加入美术人员这个选项之外,开发人员也可以自立自强,为Web项目内加入Bootstrap套件。透过使用Bootstrap套件中各种设计精美的样式、组件,来让Web项目的用户接口更加的美观大气,增加客户对于项目产出的好感度。本篇文章介绍如何在Web项目里使用Bootstrap套件,为自己留个纪录也希望能帮助到有需要的开发人员。

安装Bootstrap套件

在Web项目内使用Bootstrap套件,有一些前置作业要先完成。接下来的范例,从一个空的ASP.NET MVC项目开始建立,说明如何在这个项目内,完成使用Bootstrap套件的前置作业。

  1. 建立空白MVC项目。

  2. 使用NuGet安装Bootstrap套件。

  3. 加入Home控制器以及其对应的Index检视。

  4. Index检视中加入Bootstrap套件的CSS参考、JavaScript参考,并且在html标签加入「lang="en"」属性。

    <html lang="en">
    <head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title> <!-- Styles -->
    <link href="/Content/bootstrap.css" rel="stylesheet">
    </head>
    <body>
    <!-- Contents --> <!-- Scripts -->
    <script src="/Scripts/jquery-1.9.0.js"></script>
    <script src="/Scripts/bootstrap.js"></script>
    </body>
    </html>
  5. 完成上述步骤也就完成使用Bootstrap套件的前置作业,后续就可以在body标签的「Contents」批注之后,加入各种页面内容。

套用Bootstrap样式

在网站页面上HTML卷标默认的显示样式,已经不能满足使用者的审美眼光。将页面上的HTML卷标套用Bootstrap样式来呈现,能提供更美观的用户接口。

  1. 在Bootstrap官网上,找寻Bootstrap样式的使用说明。

  2. 在Bootstrap样式的使用说明中,找寻合适使用的样式及说明。

  3. 依照样式的说明,在body标签的「Contents」批注之后加入对应的页面内容。

    <!-- 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>
  4. 接着执行Web项目,就可以在浏览器上看到套用Bootstrap样式的显示结果。

  5. 此时对比HTML卷标默认的显示样式,两者只差异了「class="table table-striped"」属性,但呈现效果却有非常大的差异。

    <!-- 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>

套用Bootstrap组件

在Bootstrap套件中还加入了许多Bootstrap组件,这些组件组合既有的HTML卷标,提供各种更符合使用者输入输出习惯的画面呈现。

  1. 在Bootstrap官网上,找寻Bootstrap组件的使用说明。

  2. 在Bootstrap组件的使用说明中,找寻合适使用的组件及说明。

  3. 依照组件的说明,在body标签的「Contents」批注之后加入对应的页面内容。

    <!-- Contents -->
    <div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
    </div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
    </div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 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="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
    </div>
    </div>
  4. 接着执行Web项目,就可以在浏览器上看到Bootstrap组件的显示结果。

参考数据

[ASP.NET MVC] 使用Bootstrap套件的更多相关文章

  1. ASP.NET MVC使用Bootstrap系列(3)——使用Bootstrap 组件

    阅读目录 Bootstrap 导航条 列表组 徽章 媒体对象 页头 路径导航 分页 输入框组 按钮式下拉菜单 警告框 进度条 小结 Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉 ...

  2. ASP.NET MVC使用Bootstrap系列(5)——创建ASP.NET MVC Bootstrap Helpers

    阅读目录 序言 内置的HTML Helpers 创建自定义的Helpers 使用静态方法创建Helpers 使用扩展方法创建Helpers 创建Fluent Helpers 创建自动闭合的Helper ...

  3. ASP.NET MVC使用Bootstrap系列(4)——使用JavaScript插件

    阅读目录 序言 Data属性 VS 编程API 下拉菜单(dropdown.js) 模态框(modal.js) 标签页(tab.js) 工具提示(tooltip.js) 弹出框(popover.js) ...

  4. ASP.NET MVC使用Bootstrap系统(2)——使用Bootstrap CSS和HTML元素

    阅读目录 Bootstrap 栅格(Grid)系统 Bootstrap HTML元素 Bootstrap 验证样式 ASP.NET MVC创建包含Bootstrap样式编辑模板 小结 Bootstra ...

  5. ASP.NET MVC使用Bootstrap系列(1)——开始使用Bootstrap

    阅读目录 Bootstrap结构介绍 在ASP.NET MVC 项目中添加Bootstrap文件 为网站创建Layout布局页 使用捆绑打包和压缩来提升网站性能 在Bootstrap项目中使用捆绑打包 ...

  6. Knockout.js, Asp.Net MVC and Bootstrap 前端设计

    原文地址:http://ddmvc4.codeplex.com/ 原文名称:Design and Develop a website using ASP.NET MVC 4, EF, Knockout ...

  7. 基于ASP.NET MVC和Bootstrap搭建响应式个人博客站(一)

    1.0 为什么要做这个博客站? www.zynblog.com   在工作学习中,经常要搜索查找各种各样的资料,每次找到相关资料后都会顺手添加到浏览器书签中,时间一长,书签也就满了.而且下次再点击这个 ...

  8. 开源:ASP.NET MVC+EF6+Bootstrap开发框架

    前言 我在博客园潜水两三年了,在这里看过很多大神的文章,也学到了很多东西.可以说我是汲取着博客园的营养成长的. 想当年,我也是拿10个G的精神粮食从一个博客园大神那里换来一套开发框架,正式走上开发之路 ...

  9. 【开源分享:入门到精通ASP.NET MVC+EF6+Bootstrap】从这里开始,一起搭框架(1)开篇介绍

    框架简介 这几年一直在做ASP.NET开发,几年前做项目都是老老实实一行行的写代码,后来发现那些高手基本都会有自己积累起来的代码库,现在称之为开发框架,基础代码不用再去堆,主要精力可以集中在业务逻辑实 ...

随机推荐

  1. [Tip] 如何在BeyondCompare中忽略不重要的区别.

    在使用BeyondCompare时,有时需要忽略一些不重要的区别,下面的链接教你如何通过定义语法元素来实现这个功能. http://www.scootersoftware.com/support.ph ...

  2. Timeout 时间已到。在操作完成之前超时时间已过或服务器未响应。

    近来遇到这样一个错误:Timeout 时间已到.在操作完成之前超时时间已过或服务器未响应.错误截图如下: 错误原因分析:产生错误时我执行的操作需要的执行时间比较长.我测试了一下,那个操作用到的存储过程 ...

  3. dialog横竖屏切换时消失的解决方法

    声明 本文原创,转载请注明来自xiaoQLu http://www.cnblogs.com/xiaoQLu/p/3324764.html dialog的生命周期依赖创建他的activity,怎么设置横 ...

  4. java nio 网络框架实现

    maven项目 https://github.com/solq360/common 链式编/解码 链路层链式处理 管道管理socket 多协议处理非常方便 仿netty NioEventLoop 单线 ...

  5. Django数据模型及操作

    转自:http://blog.sina.com.cn/s/blog_a73687bc0101cygy.html (一) 初始化测试运行环境 import os; import sys; sys.pat ...

  6. repo: 创建local manifest以及如何添加app到CM/Android build系统中

    The local manifest Creating a local manifest allows you to customize the list of repositories on you ...

  7. `cocos2dx非完整` 开始自己的FW模块

    上一篇的文章中说到了一些个人习惯的东西以及一些简单的项目配置,这一篇文章我们来进一步完善一些东西.首先,打开编译以后的客户端执行,会看到一大堆的fileutils加载luac文件的提示,在终端显示一大 ...

  8. java模仿qq好友面板的布局(BoxLayout问题)

    .............. JLabel ll = new JLabel(dlg.getNameText() + ":" + dlg.getIPText(), ii[index] ...

  9. 【转载】解决 Subversion 的 “svn: Can't convert string from 'UTF-8' to native encoding” 错误

    转载自:http://blog.csdn.net/shaohui/article/details/3996274 在google code 上创建了一个新的项目, 用Windows 下面的tortoi ...

  10. [前端]分享一个Bootstrap可视化布局的网站

    如果你像我一样:是个前端渣,能看懂css和html,略懂Bootstarp,懒! 当你每次都想独立完成一个web页面而不知道从哪里下手的时候,那么下面的这个网站,就是你所以需要的! http://ww ...