使用Bootstrap从HTML转换为.NET MVC

本文关键字：NET MVC 转换 HTML Bootstrap 使用 | 更新日期: 2023-09-27 18:27:36

我正在将一个web应用程序从带引导的HTML转换为带引导的ASP.Net（C#）MVC。我已经将索引文件移动到View中，将主题（dashboard.css）添加到Content目录中，将图像添加到images目录中，并更新了bundle配置文件。

当我在Firefox中运行HTML页面时，我得到了一排12个项目的正确布局。当我用ASP.Net MVC运行它时，我只得到一行中的4项。与纯HTML相比，所有内容都非常大。我正在尝试像HTML一样获取行中的12个项目。这是我的第一个ASP.Net MVC应用程序。关于我下一步该去哪里，有什么建议吗？这是我的视图文件：

<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <ul class="nav nav-justified">
                <li><a class="navbar-brand" href="#"><img src="images/Logo-Smaller.png" alt="Jenkins"></a></li>
            </ul>   
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="jenkins.html">Home</a></li>
                <li><a href="services.html">Services</a></li>
                <li><a href="aboutus.html">About</a></li>
                <li><a href="contactus.html">Contact Us</a></li>
            </ul>
            <form class="navbar-form navbar-right">
                <input type="text" class="form-control" placeholder="Search...">
            </form>
        </div>
    </div>
</nav>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 col-lg-2 sidebar">
            <ul class="nav nav-sidebar">
                <li class="active"><a href="#">Products <span class="sr-only">(current)</span></a></li>
                <li><a href="#JFans">Jenkins Replacement Fans</a></li>
                <li><a href="#MFans">Manufacturer Fans</a></li>
                <li><a href="#Protection">Motor Protection</a></li>
                <li><a href="#MParts">Electric Motor Parts</a></li>
            </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main col-lg-10">
            <span class="anchor" id="JFans"></span>                 
            <h3 class="page-header">Jenkins Replacement Fans</h3>
            <div class="row placeholders">
                <div class="col-xs-6 col-sm-3 col-md-1 col-lrg-1 placeholder">
                    <img src="images/shrouded.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
                        <h4><a href="series1.html">shrouded</a></h4>
                </div>
                <div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
                    <img src="images/shallow_recess.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
                    <h4>Shallow Recess</h4>
                </div>
                <div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
                    <img src="images/paddle_wheel.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
                    <h4>Paddle Wheel</h4>
                </div>
                <div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
                    <img src="images/flat_backed.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
                    <h4>Flat Backed</h4>
                </div>
                <div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
                    <img src="images/flat_backed.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
                    <h4>Flat Backed</h4>
                </div>
                <div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
                    <img src="images/flat_backed.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
                    <h4>Flat Backed</h4>
                </div>
                <div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
                    <img src="images/shrouded.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
                    <h4>shrouded</h4>
                </div>
                <div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
                    <img src="images/shallow_recess.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
                    <h4>Shallow Recess</h4>
                </div>
                <div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
                    <img src="images/paddle_wheel.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
                    <h4>Paddle Wheel</h4>
                </div>
                <div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
                    <img src="images/flat_backed.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
                    <h4>Flat Backed</h4>
                </div>
                <div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
                    <img src="images/flat_backed.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
                    <h4>Flat Backed</h4>
                </div>
                <div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
                    <img src="images/flat_backed.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
                    <h4>Flat Backed</h4>
                </div>
            </div>  
        </

这是我的CSS文件：

/*
 * Base structure
 */
/* Move down content because we have a fixed navbar that is 50px tall */
body {
  padding-top: 65px;
}
.navbar-brand {
    max-height: 100%;
    height: 100%;
    width: auto;
    margin: 0 0 0 0;
}
.navbar-brand >img {
    max-height: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    width: auto;
    padding-top: 0px;
    float: none;
}
.navbar-nav li a {
    line-height: 65px;
    height: 65px;
    padding-top: 0;
}
/*
 * Global add-ons
 */
.sub-header {
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}
/*
 * Top navigation
 * Hide default border to remove 1px line.
 */
.navbar-fixed-top {
  border: 0;
  background-color: #F0F0F0;
}

/*
 * Sidebar
 */
/* Hide for mobile, show later */
.sidebar {
  display: none;
}
@media (min-width: 768px) {
  .sidebar {
    position: fixed;
    top: 55px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
    background-color: #f5f5f5;
    border-right: 1px solid #eee;
  }
}
.table td {
    text-align:left !important;
}
/* Sidebar navigation */
.nav-sidebar {
  margin-right: -21px; /* 20px padding + 1px border */
  margin-bottom: 20px;
  margin-left: -20px;
}
.nav-sidebar > li > a {
  padding-right: 20px;
  padding-left: 20px;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
  color: #fff;
  background-color: #428bca;
}

/*
 * Main content
 */
.main {
  padding: 20px;
}
@media (min-width: 768px) {
  .main {
    padding-right: 40px;
    padding-left: 40px;
  }
}
.main .page-header {
  margin-top: 0;
}

/*
 * Placeholder dashboard ideas
 */
.placeholders {
  margin-bottom: 30px;
  text-align: center;
}
.placeholders h4 {
  margin-bottom: 0;
}
.placeholder {
  margin-bottom: 20px;
}
.placeholder img {
  display: inline-block;
  border-radius: 50%;
}
.anchor{
  display: block;
  height: 85px; /*same height as header*/
  margin-top: -85px; /*same height as header*/
  visibility: hidden;
}

使用Bootstrap从HTML转换为.NET MVC

到目前为止，使用相同版本的bootstrap的HTML和使用bootstrap的MVC没有区别。我已经将许多商业HTML引导主题转换为MVC引导主题，这是非常直接的。

首先，您缺少一个结束正文标记。这可能是个问题。

其次，目前不要使用MVC Bundles。复制视图中所有现有的HTML，并确保所有脚本和CSS都引用到正确的路径。编写一个只返回视图的简单操作方法。一旦获得了所需的输出，就可以使用动态元素修改HTML。

第三，确保在使用以下代码的div中没有填充或边距。

col-sm-9 col-sm-offset-3

最后，使用浏览器中可用的开发工具来找出HTML页面的确切输出。您总是可以在许多现代浏览器中编辑HTML并获得实时结果。

相关文章：