转自 http://www.mytecbits.com/microsoft/dot-net/bootstrap-with-asp-net-mvc-4-step-by-step

单位最近做了一个Bootstrap的培训,所以自己查了一些资料,使用ASP.NET MVC4来使用Bootstrap

准备

Visual Studio 2012

Dot Net Framework 4.5

MVC 4

jQuery 1.8.2

Bootstrap http://www.bootcss.com/

查看Bootstrap

下载bootstrap-3.3.5.zip,解压缩后得到三个文件夹,分别是css, fonts与js

开始使用Bootstrap

1. 打开 Visual Studio

2. 创建新的 ASP.NET MVC 4 Web Application 项目

3. 选择Basic Template 并且勾选上 Razor,点击OK

4. 在Solution Explorer中找到Scripts文件夹,找到两个jquery-ui文件,并且将这两个文件删除

5. 在Content文件夹中删除themes文件夹

6. 右键点击Scripts文件夹,选择添加已经存在的项目,找到bootstrap文件夹下的bootstrap.js和bootstrap.min.js

7. 右键点击Content 文件夹,选择添加已存在的项目,找到bootstrap文件夹下的css文件夹,添加所有css文件

8. 找到App_Start文件夹,打开BundleConfig.cs,将文件改成

using System.Web.Optimization;

namespace BootstrapDemo
{
public class BundleConfig
{
// For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
public static void RegisterBundles(BundleCollection bundles)
{
bundles.IgnoreList.Clear(); bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/bootstrapjs").Include("~/Scripts/bootstrap.min.js")); bundles.Add(new ScriptBundle("~/Content/bootstrapcss").Include("~/Content/bootstrap.min.css",
"~/Content/bootstrap.min.css"));
}
}
}

9. 在Views文件夹下的Shared文件夹找到_Layout.cshtml文件,将代码改为

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/bootstrapcss")
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li class="nav-header">1st Navigation Header</li>
<li>@Html.ActionLink("Link 1","../")</li>
<li>@Html.ActionLink("Link 2","../")</li>
<li>@Html.ActionLink("Link 3","../")</li>
<li>@Html.ActionLink("Link 4","../")</li>
<li class="nav-header">2nd Navigation Header</li>
<li>@Html.ActionLink("Link AA","../")</li>
<li>@Html.ActionLink("Link BB","../")</li>
<li>@Html.ActionLink("Link CC","../")</li>
</ul>
</div>
</div> <div class="span9">
@RenderSection("featured",required:false)
<div class="row-fluid">
@RenderBody()
</div>
</div>
</div>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrapjs")
</body>
</html>

10. 找到Views下的Home文件夹中的Index.cshtml,添加代码

@{
ViewBag.Title = "Home Page";
}
@section featured {
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>@ViewBag.Title.</h1>
<h2>@ViewBag.Message</h2>
</hgroup>
<p>
To learn more about ASP.NET MVC visit
<a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
The page features <mark>videos, tutorials, and samples</mark> to help you get the most from ASP.NET MVC.
If you have any questions about ASP.NET MVC visit
<a href="http://forums.asp.net/1146.aspx/1?MVC" title="ASP.NET MVC Forum">our forums</a>.
</p>
</div>
</section>
}
<h3>We suggest the following:</h3>
<ol class="round">
<li class="one">
<h5>Getting Started</h5>
ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
enables a clean separation of concerns and that gives you full control over markup
for enjoyable, agile development. ASP.NET MVC includes many features that enable
fast, TDD-friendly development for creating sophisticated applications that use
the latest web standards.
<a href="http://go.microsoft.com/fwlink/?LinkId=245151">Learn more…</a>
</li> <li class="two">
<h5>Add NuGet packages and jump-start your coding</h5>
NuGet makes it easy to install and update free libraries and tools.
<a href="http://go.microsoft.com/fwlink/?LinkId=245153">Learn more…</a>
</li> <li class="three">
<h5>Find Web Hosting</h5>
You can easily find a web hosting company that offers the right mix of features
and price for your applications.
<a href="http://go.microsoft.com/fwlink/?LinkId=245157">Learn more…</a>
</li>
</ol>

11. 在Controllers文件夹下找到HomeController.cs文件,更改代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc; namespace BootstrapDemo.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application."; return View();
} public ActionResult About()
{
ViewBag.Message = "Your app description page."; return View();
} public ActionResult Contact()
{
ViewBag.Message = "Your contact page."; return View();
}
}
}

12. 按下F5或者点击生成按钮,就能看到最终效果

Bootstrap 与 ASP.NET MVC 4 不使用 NuGet Package 笔记的更多相关文章

  1. 基于Bootstrap的Asp.net Mvc 分页

    基于Bootstrap的Asp.net Mvc 分页的实现 最近写了一个mvc 的 分页,样式是基于 bootstrap 的 ,提供查询条件,不过可以自己写样式根据个人的喜好,以此分享一下.首先新建一 ...

  2. Bootstrap in ASP.NET MVC 5

    一,新建ASP.NET MVC 5 项目 Bootstrap 文件分布 引入到页面 1.定义.注意:不要包含有.min.的文件名称,会被忽略,因为在发布的时候编译器会加载min版的文件 2.在母版页中 ...

  3. 《ASP.NET MVC 5 高级编程》学习笔记

    前言: 记得当初培训的时候,学习的还是ASP.NET,现在回想一下,图片水印.统计人数.过滤器....HttpHandler是多么的经典! 不过后来接触到了MVC,便立马爱上了它.Model-View ...

  4. 基于Bootstrap的Asp.net Mvc 分页的实现

    最近写了一个mvc 的 分页,样式是基于 bootstrap 的 ,提供查询条件,不过可以自己写样式根据个人的喜好,以此分享一下.首先新建一个Mvc 项目,既然是分页就需要一些数据,我这边是模拟了一些 ...

  5. 基于Bootstrap的Asp.net Mvc 分页的实现(转)

    最近写了一个mvc 的 分页,样式是基于 bootstrap 的 ,提供查询条件,不过可以自己写样式根据个人的喜好,以此分享一下.首先新建一个Mvc 项目,既然是分页就需要一些数据,我这 边是模拟了一 ...

  6. Bootstrap整合ASP.NET MVC验证、jquery.validate.unobtrusive

    没什么好讲的,上代码: (function ($) { var defaultOptions = { validClass: 'has-success', errorClass: 'has-error ...

  7. [转]Bootstrap 3.0.0 with ASP.NET Web Forms – Step by Step – Without NuGet Package

    本文转自:http://www.mytecbits.com/microsoft/dot-net/bootstrap-3-0-0-with-asp-net-web-forms In my earlier ...

  8. Unity + iBatis + Asp.net Mvc 系统搭建

    Unity + iBatis + Asp.net Mvc 系统搭建 之前用EntityFramework Code First做了一些小项目,很是方便:后来在一个 Java 项目中接触了myBatis ...

  9. 02 入门 - ASP.NET MVC 5 概述

    目录索引:<ASP.NET MVC 5 高级编程>学习笔记 本篇内容: 一.One ASP.NET 二.新的Web项目体验 三.ASP.NET Identity 四.Bootstrap 模 ...

随机推荐

  1. Java 8 Date Time API Example Tutorial – LocalDate, Instant, LocalDateTime, Parse and Format

    参考 Java 8 Date and Time API is one of the most sought after change for developers. Java has been mis ...

  2. Create RCU

    BI创建(数据)分析.仪表盘.报表前,都需要对数据进行建模,在oracle biee里称为创建“资料档案库”-该文件后缀为RPD,所以一般也称为创建RPD文件. 步骤: 1.从windows开始菜单里 ...

  3. java.util.regex.PatternSyntaxException: Unexpected internal error near index 1 \ ^

    1 String a = "1991\12\16"; 2 String[] split = a.split("\\"); 3 System.out.printl ...

  4. OVS操作总结

    转载:http://www.aboutyun.com/thread-11777-1-1.html Open vSwitch(下面简称为 OVS)是由 Nicira Networks 主导的,运行在虚拟 ...

  5. kali Linux 文本图形界面切换遇到的怪问题

    前段装了在Virtual Box上装一个Kali Linux玩,然后设为了开机进入文本界面,后来遇到无法上网的问题,网上找到解决方法,说是NAT地址转换和host-only双网卡顺序问题,按照网上的说 ...

  6. synopsys license maker

    参见bingled大牛的文章(http://bbs.eetop.cn/viewthread.php?tid=366602&extra=&page=1) 注意:经坛友提示,部分系统版本2 ...

  7. SpringMVC学习记录

    1E)Spring MVC框架 ①Jar包结构: docs+libs+schema. 版本区别:核心包,源码包. SpringMVC文档学习: 学习三步骤: 1)是什么? 开源框架 2)做什么? IO ...

  8. Meteor错误:TypeError: Meteor.userId is not a function

    问题描述: 浏览器console提示错误TypeError: Meteor.userId is not a function. 原因分析: 通过查看Meteor API文档,可知该函数由包accoun ...

  9. JDBC向oracle插入数据

    public static void main(String[] args) throws SQLException { 2 3 4 String driver="oracle.jdbc.d ...

  10. Java初始化理解与总结 转载

    Java的初始化可以分为两个部分: (a)类的初始化 (b)对象的创建 一.类的初始化 1.1 概念介绍: 一个类(class)要被使用必须经过装载,连接,初始化这样的过程. 在装载阶段,类装载器会把 ...