我如何...在MVC中管理我的Css [英] How do I...Manage my Css in MVC
本文介绍了我如何...在MVC中管理我的Css的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewBag.Title</title>
@*<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,500,700' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=PT+Sans:700,400' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Pontano+Sans' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600' rel='stylesheet' type='text/css' />
<!-- Styles -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" /><!-- Bootstrap -->
<link rel="stylesheet" href="font-awesome-4.0.3/css/font-awesome.css" type="text/css" /><!-- Font Awesome -->
<link rel="stylesheet" type="text/css" media="all" href="css/daterangepicker-bs3.css" /><!-- Date Range Picker -->
<link rel="stylesheet" href="css/style.css" type="text/css" /><!-- Style -->
<link rel="stylesheet" href="css/responsive.css" type="text/css" /><!-- Responsive -->
<!-- Script -->
<script src="js/jquery-1.10.2.js"></script><!-- Jquery -->
<script type="text/javascript" src="js/bootstrap.min.js"></script><!-- Bootstrap -->
<script type="text/javascript" src="js/script.js"></script><!-- Script -->
<script src="js/enscroll-0.5.2.min.js"></script> <!-- Custom Scroll bar -->
<script src="js/moment.js"></script> <!-- Date Range Picker -->
<script src="js/daterangepicker.js"></script><!-- Date Range Picker -->*@
<!-- Styles -->
@Styles.Render("~/Content/css")
<!-- JS -->
@Styles.Render("~/Content/js")
<!-- Font -->
@Styles.Render("~/Content/font")
</head>
<body>
<div class="responsive-menu">
<div class="responsive-menu-dropdown blue">
<a title="" class="blue">MENU </a>
</div>
<ul>
<li id="intro4"><a href="#" title=""><span>4</span>Discover</a>
<ul>
<li><a href="dashboard.html" title="">Dashboard 1</a></li>
<li><a href="dashboard2.html" title="">Dashboard 2</a></li>
<li><a href="dashboard3.html" title="">Dashboard 3</a></li>
<li><a href="dashboard4.html" title="">Dashboard 4</a></li>
</ul>
</li>
<li id="intro5"><a href="widget.html" title=""><span>20+</span>Widget</a></li>
<li><a href="#" title=""><span>12</span>Ui Kit</a>
<ul>
<li><a href="notifications.html" title="">Notifications</a></li>
<li><a href="grids.html" title="">Grids</a></li>
<li><a href="buttons.html" title="">Buttons</a></li>
<li><a href="calendars.html" title="">Calendars</a></li>
<li><a href="file-manager.html" title="">File Manager</a></li>
<li><a href="gallery.html" title="">Gallery</a></li>
<li><a href="slider.html" title="">Slider</a></li>
<li><a href="page-tour.html" title="">Page Tour</a></li>
<li><a href="collapse.html" title="">Collapse</a></li>
<li><a href="range-slider.html" title="">Range Slider</a></li>
<li><a href="typography.html" title="">Typography</a></li>
<li><a href="tables.html" title="">Tables</a></li>
</ul>
</li>
<li><a href="form.html" title="">Form Stuff</a></li>
<li><a href="charts.html" title=""><span>5+</span>Charts</a></li>
<li><a href="#" title=""><span>8+</span>Pages</a>
<ul>
<li><a href="invoice.html" title="">Invoice</a></li>
<li><a href="order-recieved.html" title="">Order Recieved</a></li>
<li><a href="search-result.html" title="">Search Result</a></li>
<li><a href="price-table.html" title="">Price Table</a></li>
<li><a href="inbox.html" title="">Inbox</a></li>
<li><a href="profile.html" title="">Profile</a></li>
<li><a href="contact.html" title="">Contact Us</a></li>
<li><a href="css-spinners.html" title="">Css Spinners</a></li>
</ul>
</li>
<li><a href="#" title=""><span>6+</span>Bonus</a>
<ul>
<li><a href="faq.html" title="">Faq</a></li>
<li><a href="index.html" title="">Log in</a></li>
<li><a href="blank.html" title="">blank</a></li>
<li><a href="cart.html" title="">Cart</a></li>
<li><a href="billing.html" title="">Billing</a></li>
<li><a href="icons.html" title="">Icons</a></li>
</ul>
</li>
</ul>
</div>
<header>
<div class="logo">
<img src="images/logo.png" alt="" />
</div>
<div class="header-post" id="intro2">
<a href="#add-post-title" data-toggle="modal" title="">POST </a>
<ul>
<li><a href="#" title="" data-tooltip="Refresh" data-placement="bottom"></a></li>
<li><a href="#" title="" data-tooltip="Custom" data-placement="bottom"></a></li>
<li class="upload-files-sec"><a href="#" title="" data-tooltip="Upload Files" data-placement="bottom" class="upload-btn"></a>
<div class="upload-files">
<ul>
<li>
<p>Photoshop 524.psd</p>
<div class="progress small-progress progress-striped active">
<div style="width: 30%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="progress-bar pink">
</div>
</div>
</li>
<li>
<p>Phtoto758.jpg</p>
<div class="progress small-progress progress-striped active">
<div style="width: 58%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="progress-bar yellow">
</div>
</div>
</li>
<li>
<p>Private files.xlxs</p>
<div class="progress small-progress progress-striped active">
<div style="width: 32%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="progress-bar blue">
</div>
</div>
</li>
<li>
<p>index.html</p>
<div class="progress small-progress progress-striped active">
<div style="width: 98%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="progress-bar black">
</div>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div aria-hidden="true" role="dialog" tabindex="-1" class="modal fade" id="add-post-title" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header blue">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
<h4 class="modal-title">Setting Section</h4>
</div>
<div class="modal-body">
<input type="text" placeholder="TITLE" />
<textarea placeholder="DESCRIPTION" rows="5"></textarea>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default black" type="button">Close</button>
<button class="btn btn-primary blue" type="button">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div>
</div>
<div class="header-alert">
<ul>
<li><a href="#" title="">Team Statistics</a></li>
<li><a title="" class="message-btn"><span>3</span></a>
<div class="message">
<span>You have 3 New Messages</span>
<a href="#" title=""><img src="images/notification1.jpg" alt="" />Hey! How are You Diana. I waiting for you.
toe Check. <p>3:45pm</p></a>
<a href="#" title=""><img src="images/notification1.jpg" alt="" />Please Can you Submit A file. I am From Korea
toe Check. <p>1:40am</p></a>
<a href="#" title=""><img src="images/notification1.jpg" alt="" />Hey Today is Party So you Will Have to Come <p>4 Hours ago</p></a>
<a href="inbox.html" class="view-all">VIEW ALL MESSAGE</a>
</div>
</li>
<li><a title="" class="notification-btn"><span>4</span></a>
<div class="notification">
<span>You have 6 New Notification</span>
<a href="#" title=""><img src="images/notification1.jpg" alt="" />Server 3 is Over Loader Pleas
toe Check. <p>3:45pm</p></a>
<a href="#" title=""><img src="images/notification1.jpg" alt="" />Server 10 is Over Loader Pleas
toe Check. <p>1:40am</p></a>
<a href="#" title=""><img src="images/notification1.jpg" alt="" />New User Registered Please Check This <p>4 Hours ago</p></a>
<a href="#" class="view-all">VIEW ALL NOTIFICATIONS</a>
</div>
</li>
</ul>
</div>
<div class="right-bar-sec">
<a href="#" title="" class="right-bar-btn"></a>
<a href="#" title="" class="right-bar-btn-mobile"></a>
<div id="scrollbox4" class="right-bar">
<div class="my-account">
<form >
<input type="text" placeholder="SEARCH ACCOUNT" />
<a href="" title="" data-tooltip="Account" data-placement="left"></a>
</form>
<a id="account" class="toogle-head">ACCOUNT LIST</a>
<div class="account2">
<ul>
<li>
Private Office
<div class="switch-account">
<input type="checkbox" id="check" />
<label for="check" class="switch">
<span class="slide-account"></span>
</label>
</div>
</li>
<li>
Home Account
<div class="switch-account">
<input type="checkbox" id="check2" checked/="" />
<label for="check2" class="switch">
<span class="slide-account"></span>
</label>
</div>
</li>
<li>
Personal Account
<div class="switch-account">
<input type="checkbox" id="check3" checked/="" />
<label for="check3" class="switch">
<span class="slide-account"></span>
</label>
</div>
</li>
</ul>
<a href="#" title="">ADD ACCOUNT</a>
</div>
</div><!-- Add Account -->
<div class="users-online">
<a id="user-online" class="toogle-head">USERS ONLINE<span>26</span></a>
<div class="user-online2">
<ul>
<li><img src="images/user1.jpg" alt="" /><h5><a href="#" title="">Johny Razell</a></h5><span class="offline">OFFLINE</span> </li>
<li><img src="images/user2.jpg" alt="" /><h5><a href="#" title="">John Smith</a></h5><span class="online">ONLINE</span> </li>
<li><img src="images/user3.jpg" alt="" /><h5><a href="#" title="">Doe Haxzer</a></h5><span class="online">ONLINE</span> </li>
<li><img src="images/user4.jpg" alt="" /><h5><a href="#" title="">Karen Kelly</a></h5><span class="unread">4</span>
<p>Hey! I am still waitin</p>
</li>
</ul>
<a href="#" title="">260TOTAL MEMBER</a>
</div>
</div><!-- Users Online -->
<div class="disk-usage-sec">
<a id="disk-usage" class="toogle-head">USAGE</a>
<div class="disk-usage">
<p>1.31 GB of 1.50 GB used 75%</p>
<div class="progress small-progress">
<div style="width: 35%" class="progress-bar black">
<span class="sr-only">35% Complete (success)</span>
</div>
<div style="width: 20%" class="progress-bar blue">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div style="width: 10%" class="progress-bar pink">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
</div>
</div><!-- Disk Usage -->
<div class="pending-task-sec">
<a id="pending-task" class="toogle-head">PENDING TASK</a>
<div class="pending-task">
<ul>
<li><h6>Development</h6><span>75%</span><a href="#" title="" data-tooltip="Refresh" data-placement="left"></a>
<div class="progress small-progress">
<div style="width: 40%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="progress-bar pink">
</div>
</div>
</li>
<li><h6>Bug Fixes</h6><span>60%</span><a href="#" title="" data-tooltip="Refresh" data-placement="top"></a>
<div class="progress small-progress">
<div style="width: 60%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="progress-bar blue">
</div>
</div>
</li>
<li><h6>Javascript</h6><span>90%</span><a href="#" title="" data-tooltip="Refresh" data-placement="bottom"></a>
<div class="progress small-progress">
<div style="width: 90%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="progress-bar black">
</div>
</div>
</li>
</ul>
</div>
</div><!-- Disk Usage -->
</div><!-- Right Bar -->
</div><!-- Right Bar Sec -->
</header><!-- Header -->
<div class="menu">
<div class="menu-profile" id="intro3">
<img src="images/profile-image.jpg" alt="" />
<span></span>
<div class="menu-profile-hover">
<h1>Brian Kelly</h1>
<p>LONDON, UNITED KINGDOM</p>
<a href="index.html" title=""></a>
<div class="menu-profile-btns">
<h3>
<a href="profile.html" title="">PROFILE</a>
</h3>
<h3>
<a href="inbox.html" title="">INBOX</a>
</h3>
</div>
</div>
</div>
<ul>
<li id="intro4"><a href="#" title="">Discover</a>
<ul>
<li><a href="dashboard.html" title="">Dashboard 1</a></li>
<li><a href="dashboard2.html" title="">Dashboard 2</a></li>
<li><a href="dashboard3.html" title="">Dashboard 3</a></li>
<li><a href="dashboard4.html" title="">Dashboard 4</a></li>
</ul>
</li>
<li id="intro5"><a href="widget.html" title=""><span>20+</span>Widget</a></li>
<li><a href="#" title="">Ui Kit</a>
<ul>
<li><a href="notifications.html" title="">Notifications</a></li>
<li><a href="grids.html" title="">Grids</a></li>
<li><a href="buttons.html" title="">Buttons</a></li>
<li><a href="calendars.html" title="">Calendars</a></li>
<li><a href="file-manager.html" title="">File Manager</a></li>
<li><a href="gallery.html" title="">Gallery</a></li>
<li><a href="slider.html" title="">Slider</a></li>
<li><a href="page-tour.html" title="">Page Tour</a></li>
<li><a href="collapse.html" title="">Collapse</a></li>
<li><a href="range-slider.html" title="">Range Slider</a></li>
<li><a href="typography.html" title="">Typography</a></li>
<li><a href="tables.html" title="">Tables</a></li>
</ul>
</li>
<li><a href="form.html" title="">Form Stuff</a></li>
<li><a href="charts.html" title="">Charts</a></li>
<li><a href="#" title="">Pages</a>
<ul>
<li><a href="invoice.html" title="">Invoice</a></li>
<li><a href="order-recieved.html" title="">Order Recieved</a></li>
<li><a href="search-result.html" title="">Search Result</a></li>
<li><a href="price-table.html" title="">Price Table</a></li>
<li><a href="inbox.html" title="">Inbox</a></li>
<li><a href="profile.html" title="">Profile</a></li>
<li><a href="contact.html" title="">Contact Us</a></li>
<li><a href="css-spinners.html" title="">Css Spinners</a></li>
</ul>
</li>
<li><a href="#" title="">Bonus</a>
<ul>
<li><a href="faq.html" title="">Faq</a></li>
<li><a href="index.html" title="">Log in</a></li>
<li><a href="blank.html" title="">blank</a></li>
<li><a href="cart.html" title="">Cart</a></li>
<li><a href="billing.html" title="">Billing</a></li>
<li><a href="icons.html" title="">Icons</a></li>
</ul>
</li>
</ul>
</div><!-- Right Menu -->
<div class="wrapper">
<div class="container">
<div class="col-md-6">
<div class="heading-sec" id="intro6">
<h1>INBOXWelcome to Flat Lab</h1>
</div>
</div>
<div class="col-md-6">
<div id="reportrange" class="pull-right" style="background: #fff; removed: pointer; padding: 5px 10px; border: 1px solid #ccc">
<span></span>
</div>
</div>
<div class="col-md-12 inbox-margin">
<div class="col-md-3">
<div class="inbox-panel black">
<div class="inbox-panel-head">
<img src="images/inbox-1.jpg" alt="" />
<h1>Brian Kelly</h1>
<a href="profile.html" title="">Profile</a>
<a href="profile.html" title="">Setting</a>
</div>
<ul>
<li class="inbox-active"><a href="#" title="">INBOX</a><span>4</span></li>
<li><a href="#" title="">Draft</a></li>
<li><a href="#" title="">Outbox</a><span>6</span></li>
<li><a href="#" title="">Sent</a></li>
<li><a href="#" title="">Trash</a></li>
</ul>
<div class="flaged">
<h3>FLAGGED</h3>
<ul>
<li><a href="#" title="">Family</a></li>
<li><a href="#" title="">Friends</a></li>
<li><a href="#" title="">Private</a></li>
<li><a href="#" title="">Office Staff</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<div class="all-emails">
<form />
<input type="text" placeholder="SEARCH EMAILS" />
<a href="#" title=""></a>
</form>
<ul id="scrollbox8">
<li>
<h5><a href="#" title="">Penacy Conol</a></h5>
<span>2 min ago</span>
<p>Search Results Page Design helps the user to narrow down the search results in a specific category. It not only sells out the products but ...</p>
<div class="email-hover">
<a href="#" title=""></a>
<a href="#" title=""></a>
<a href="#" title=""></a>
</div>
</li>
<li>
<h5><a href="#" title="">Penacy Conol</a></h5>
<span>2 min ago</span>
<p>Search Results Page Design helps the user to narrow down the search results in a specific category. It not only sells out the products but ...</p>
<div class="email-hover">
<a href="#" title=""></a>
<a href="#" title=""></a>
<a href="#" title=""></a>
</div>
</li>
<li>
<h5><a href="#" title="">Penacy Conol</a></h5>
<span>2 min ago</span>
<p>Search Results Page Design helps the user to narrow down the search results in a specific category. It not only sells out the products but ...</p>
<div class="email-hover">
<a href="#" title=""></a>
<a href="#" title=""></a>
<a href="#" title=""></a>
</div>
</li>
<li>
<h5><a href="#" title="">Penacy Conol</a></h5>
<span>2 min ago</span>
<p>Search Results Page Design helps the user to narrow down the search results in a specific category. It not only sells out the products but ...</p>
<div class="email-hover">
<a href="#" title=""></a>
<a href="#" title=""></a>
<a href="#" title=""></a>
</div>
</li>
<li>
<h5><a href="#" title="">Penacy Conol</a></h5>
<span>2 min ago</span>
<p>Search Results Page Design helps the user to narrow down the search results in a specific category. It not only sells out the products but ...</p>
<div class="email-hover">
<a href="#" title=""></a>
<a href="#" title=""></a>
<a href="#" title=""></a>
</div>
</li>
<li>
<h5><a href="#" title="">Penacy Conol</a></h5>
<span>2 min ago</span>
<p>Search Results Page Design helps the user to narrow down the search results in a specific category. It not only sells out the products but ...</p>
<div class="email-hover">
<a href="#" title=""></a>
<a href="#" title=""></a>
<a href="#" title=""></a>
</div>
</li>
<li>
<h5><a href="#" title="">Penacy Conol</a></h5>
<span>2 min ago</span>
<p>Search Results Page Design helps the user to narrow down the search results in a specific category. It not only sells out the products but ...</p>
<div class="email-hover">
<a href="#" title=""></a>
<a href="#" title=""></a>
<a href="#" title=""></a>
</div>
</li>
<li>
<h5><a href="#" title="">Penacy Conol</a></h5>
<span>2 min ago</span>
<p>Search Results Page Design helps the user to narrow down the search results in a specific category. It not only sells out the products but ...</p>
<div class="email-hover">
<a href="#" title=""></a>
<a href="#" title=""></a>
<a href="#" title=""></a>
</div>
</li>
<li>
<h5><a href="#" title="">Penacy Conol</a></h5>
<span>2 min ago</span>
<p>Search Results Page Design helps the user to narrow down the search results in a specific category. It not only sells out the products but ...</p>
<div class="email-hover">
<a href="#" title=""></a>
<a href="#" title=""></a>
<a href="#" title=""></a>
</div>
</li>
</ul>
</div>
</div>
<div class="col-md-5">
<div class="read-message" id="scrollbox9">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here.</p>
<img src="images/read1.jpg" alt="" /> <img src="images/read2.jpg" alt="" />
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here.It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here.It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here. is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here.</p>
</div>
<div class="message-details">
<div class="message-sender">
<a href="#" title=""><img src="images/from.jpg" alt="" class="pull-left" />From : David Meratha</a>
<a href="#" title=""><img src="images/to.jpg" alt="" class="pull-right" />To : Brian Kelly</a>
</div>
<span>2 min ago</span>
<a href="#" title="" class="reply-btn pink">Reply</a>
</div>
</div>
</div>
</div><!-- Container -->
@RenderBody()
</div><!-- Wrapper -->
</body>推荐答案
In mvc, we have bundling feature available to bundle your css/js files for easily categories your files and it also do minification of bundled file.
In mvc, we have bundling feature available to bundle your css/js files for easily categories your files and it also do minification of bundled file.
y a I got it in css just not add bundles add link too
ya I got it in css just not add bundles add link too
<pre lang="CSS">
<!-- Styles -->
<link rel="stylesheet" href="/Content/css/bootstrap.min.css" type="text/css" /><!-- Bootstrap -->
<link rel="stylesheet" href="/Content/font-awesome-4.0.3/css/font-awesome.css" type="text/css" /><!-- Font Awesome -->
<link rel="stylesheet" type="text/css" media="all" href="/Content/css/daterangepicker-bs3.css" /><!-- Date Range Picker -->
<link rel="stylesheet" href="/Content/css/style.css" type="text/css" /><!-- Style -->
<link rel="stylesheet" href="/Content/css/responsive.css" type="text/css" /><!-- Responsive -->
<!-- JS -->
@Styles.Render("~/Content/js")
<!-- Font -->
@Styles.Render("~/Content/font")这篇关于我如何...在MVC中管理我的Css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
