转自 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. 听说alphago又要挑战sc2了?——我眼中的人工智能

    乱谈: 之前alphago进行的围棋比赛相当火爆. 一时间我的朋友圈都爆了,因为同学以及相关专业的同学都在发这个,毕竟逼格一下就起来了,我也大肆转发.各种角度,不同层次的不同深度的文章也都扫了几眼. ...

  2. 我的第二篇--nginx安装问题之路径问题

    这几天还是一直在搭建nginx,并且要在nginx的基础之上配置naxsi(WAF防火墙)并使它生效,但是随之而来的问题也会有很多,也许因为我是个新手,所以遇到的问题要多,不解的问题也要很多,不知道又 ...

  3. Java虚拟机专题

    为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/ShiJiaqi. http://www.cnblogs.com/shijiaqi1066/p/5160083. ...

  4. 关于Spring中AOP的理解

    AOP简介[理解][重点] 1.AOP(Aspect Oriented Programing)面向切面/方面编程 2.AOP隶属软件工程的范畴,指导开发人员如何制作开发软件,进行结构设计 3.AOP联 ...

  5. Time complexity analysis of algorithms

    时间复杂性的计算一般而言,较小的问题所需要的运行时间通常要比较大的问题所需要的时间少.设一个程序P所占用的时间为T,则 T(P)=编译时间+运行时间. 编译时间与实例特征是无关的,且可假设一个编译过的 ...

  6. Activiti源码浅析:Activity与Task

    最近由于接触到Activiti工作流引擎,因此粗读了一下它的源码. 总结了一些内容如下,这些内容一般的doc上都是没有提及的. 1. model.Activity与model.Task Activit ...

  7. OC2_分数类

    // // Fraction.h // OC2_分数类 // // Created by zhangxueming on 15/6/10. // Copyright (c) 2015年 zhangxu ...

  8. sublime text 使用

    一.在sublime text中创建html.css.js文件 ctrl+shift+p(调出控制台)  然后输入 Set Syntax:html(也可以输入:ssh) Set Syntax:css ...

  9. C++ 二维数组(双重指针作为函数参数)

    本文的学习内容参考:http://blog.csdn.net/yunyun1886358/article/details/5659851 http://blog.csdn.net/xudongdong ...

  10. bzoj 2734 [HNOI2012]集合选数 状压DP+预处理

    这道题很神啊…… 神爆了…… 思路大家应该看别的博客已经知道了,但大部分用的插头DP.我加了预处理,没用插头DP,一行一行来,速度还挺快. #include <cstdio> #inclu ...