首页 > 软件开发 > ASP >

vs2013 ASP.NET Web Form + Bootstrap 套件

来源:互联网 2023-03-16 19:06:53 572

要弄啥网页的,然后要用到bootstrap这样东西,一开始以为bootstrap就当软件用的,然后被告知是工具集。然后我看来就是属于文档类。最后在高手的文章中提到的是套件。5xT办公区 - 实用经验教程分享!

2015-09-11我个人的理解,就是一些被赋予颜色,字体等属性集合的class或id,我们如果用那些,可以减少自己颜色调整字体调整框架调整。但是首先还要了解他里面是怎么命名的。感觉如果是熟悉的人,自己写的灵活性会比较大。可以把自己写的style,javascript等等像他一样打包起来。html的页面就不会显得冗长等特点PS:相对路径绝对路径http://www.cnblogs.com/heyonggang/archive/2013/03/01/2938984.html5xT办公区 - 实用经验教程分享!

工具/原料

  • Visual Studio Community 2013 英语版

方法/步骤

  • 1

    File->5xT办公区 - 实用经验教程分享!

    New->5xT办公区 - 实用经验教程分享!

    Project…5xT办公区 - 实用经验教程分享!

    vs2013 ASP.NET Web Form   Bootstrap 套件5xT办公区 - 实用经验教程分享!

  • 2

    ▲web5xT办公区 - 实用经验教程分享!

    Visual Studio 2012->5xT办公区 - 实用经验教程分享!

    ASP.NET Empty Web Application->5xT办公区 - 实用经验教程分享!

    ok5xT办公区 - 实用经验教程分享!

    (PS:可以自己改名字,也可以browse自己改放在其他地方)5xT办公区 - 实用经验教程分享!

    vs2013 ASP.NET Web Form   Bootstrap 套件5xT办公区 - 实用经验教程分享!

  • 3

    TOOLS->5xT办公区 - 实用经验教程分享!

    NuGet Package Manager ->5xT办公区 - 实用经验教程分享!

    Manage NuGet Packages for Solution…5xT办公区 - 实用经验教程分享!

    vs2013 ASP.NET Web Form   Bootstrap 套件5xT办公区 - 实用经验教程分享!

  • 4

    右上角 键盘输入bootstrap->5xT办公区 - 实用经验教程分享!

    按那个搜索5xT办公区 - 实用经验教程分享!

    获得 Bootstrap CSS ,点击Install5xT办公区 - 实用经验教程分享!

    载入完毕会有对话框5xT办公区 - 实用经验教程分享!

    然后确定要载到刚刚那个创建好的的web名下的即可5xT办公区 - 实用经验教程分享!

    vs2013 ASP.NET Web Form   Bootstrap 套件5xT办公区 - 实用经验教程分享!

  • 4该信息未经授权抓取自百度经验
  • 5

    成果(如果没有这个Solution Explorer,那么点击VIEW->Solution Explorer 就会出现了,话说我这里的成果和参考资料的文件分层有些许不同,但重点一样啦)5xT办公区 - 实用经验教程分享!

    vs2013 ASP.NET Web Form   Bootstrap 套件5xT办公区 - 实用经验教程分享!

  • 方法/步骤2

  • 1

    后面两者引号里面的就是用的bootstrap里面的css定义的颜色、字体等的值名class=“”name=“”5xT办公区 - 实用经验教程分享!

    5xT办公区 - 实用经验教程分享!

    代码5xT办公区 - 实用经验教程分享!

    %@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>5xT办公区 - 实用经验教程分享!

    5xT办公区 - 实用经验教程分享!

    !DOCTYPE html>5xT办公区 - 实用经验教程分享!

    html xmlns="http://www.w3.org/1999/xhtml">5xT办公区 - 实用经验教程分享!

    head runat="server">5xT办公区 - 实用经验教程分享!

    meta http-equiv="content-type" content="text/html;charset=utf-8"/>5xT办公区 - 实用经验教程分享!

    meta name="viewport" content="width=device-width, initial-scale=1.0"/>5xT办公区 - 实用经验教程分享!

    meta name="keywords" content=""/>5xT办公区 - 实用经验教程分享!

    link rel="stylesheet" href="/Content/bootstrap-theme.css"/>5xT办公区 - 实用经验教程分享!

    link rel="stylesheet" href="/Content/bootstrap.css"/>5xT办公区 - 实用经验教程分享!

    title>招聘/title>5xT办公区 - 实用经验教程分享!

    /head>5xT办公区 - 实用经验教程分享!

    body>5xT办公区 - 实用经验教程分享!

    form id="form1" runat="server">5xT办公区 - 实用经验教程分享!

    div class="navbar-inverse">5xT办公区 - 实用经验教程分享!

    div class="well-lg">5xT办公区 - 实用经验教程分享!

    h3 >泉州/h3>5xT办公区 - 实用经验教程分享!

    /div>5xT办公区 - 实用经验教程分享!

    ul class="navbar-nav">5xT办公区 - 实用经验教程分享!

    /ul>5xT办公区 - 实用经验教程分享!

    span>/span>5xT办公区 - 实用经验教程分享!

    /div> !-- jQuery (necessary for Bootstrap's JavaScript plugins) -->5xT办公区 - 实用经验教程分享!

    script src="/Scripts/jquery-1.9.1.js">/script>5xT办公区 - 实用经验教程分享!

    !-- Include all compiled plugins (below), or include individual files as needed -->5xT办公区 - 实用经验教程分享!

    script src="/Scripts/bootstrap.js">/script>5xT办公区 - 实用经验教程分享!

    /form>5xT办公区 - 实用经验教程分享!

    /body>5xT办公区 - 实用经验教程分享!

    /html>5xT办公区 - 实用经验教程分享!

    vs2013 ASP.NET Web Form   Bootstrap 套件5xT办公区 - 实用经验教程分享!

  • 2

    附带举例另一种路径5xT办公区 - 实用经验教程分享!

    link rel="stylesheet" type="text/css"5xT办公区 - 实用经验教程分享!

    href="bootstrap-3.3.5-dist/css/bootstrap-theme.css"/>5xT办公区 - 实用经验教程分享!

    link rel="stylesheet" type="text/css"5xT办公区 - 实用经验教程分享!

    href="bootstrap-3.3.5-dist/css/bootstrap.css"/>5xT办公区 - 实用经验教程分享!

    vs2013 ASP.NET Web Form   Bootstrap 套件5xT办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!5xT办公区 - 实用经验教程分享!


    标签: asp

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码