c# - 使用 Bootstrap 从 HTML 转换为 .NET MVC-6ren

c# - 使用 Bootstrap 从 HTML 转换为 .NET MVC

转载作者：行者123 更新时间：2023-11-28 06:39:31

我正在将 Web 应用程序从带有 Bootstrap 的 HTML 转换为带有 Bootstrap 的 ASP.Net (C#) MVC。我已将索引文件移到 View 中，已将主题 (dashboard.css) 添加到内容目录，已将图像添加到图像目录，并更新了捆绑配置文件。

当我在 Firefox 中运行 HTML 页面时，我获得了包含 12 个连续元素的正确布局。当我用 ASP.Net MVC 运行它时，我只得到一行中的 4 个元素。与纯 HTML 相比，一切都非常大。我正在尝试像 HTML 一样获取行中的 12 个元素。这是我的第一个 ASP.Net MVC 应用程序。关于我接下来应该看哪里的任何建议？这是我的 View 文件:

<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 与 Bootstrap 和 MVC 与 Bootstrap 没有区别。我已经将许多商业 HTML Bootstrap 主题转换为 MVC Bootstrap 主题，而且非常简单。

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

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

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

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

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

关于c# - 使用 Bootstrap 从 HTML 转换为 .NET MVC，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34388287/

文章推荐： javascript - 按tab键时java脚本表单验证

文章推荐： ios - 如何在 UIPresentationController 中更改 View 的边界？

文章推荐： html - 将下拉子菜单

元素对齐到页面右侧，同时保持

元素的正确顺序

c++ - 将迭代器存储到字符串中(转换、转换、追加？)
我正在尝试将一个字符串逐个字符地复制到另一个字符串中。目的不是复制整个字符串，而是复制其中的一部分(我稍后会为此做一些条件......) 但我不知道如何使用迭代器。你能帮帮我吗？ std::stri
C++:转换/转换 void 指针到结构引用
我想将 void 指针转换为结构引用。结构的最小示例: #include "Interface.h" class Foo { public: Foo() : mAddress((uint
javascript - 为什么一个元素从窗口的左上角开始它的 css3 转换/转换？
这有点烦人:我有一个 div，它从窗口的左上角开始过渡，即使它位于文档的其他任何位置。我试过 usign -webkit-transform-origin 但没有成功，也许我用错了。有人可以帮助我吗？
html - 有什么方法可以检测 CSS3 转换/转换/动画的过程状态？
假设，如果将 CSS3 转换/转换/动画分配给 DOM 元素，我是否可以检测到该过程的状态？我想这样做的原因是因为我正在寻找类似过渡链的东西，例如，在前一个过渡之后运行一个过渡。最佳答案我在 h
CSS 转换/转换 - 谷歌浏览器中的 "shaky"图像
最近我遇到了“不稳定”屏幕，这很可能是由 CSS 转换引起的。事实上，它只发生在 Chrome 浏览器上(可能还有 Safari，因为一些人也报告了它)。知道如何让它看起来光滑吗？此外，您可能会注意
jquery - CSS3 转换(转换)在 Firefox 中不起作用，但在 Chrome 和 Safari 中起作用
我正在开发一个简单的 slider ，它使用 CSS 过渡来为幻灯片设置动画。我用一些基本样式和一些 javascript 创建了一支笔 here .注意:由于 Codepen 使用 Prefixfr
Linq 转换
我正在使用以下代码返回 IList: public IList FindCodesByCountry(string country) { var query =
转换、计算的RESTful设计
如何设计像这样的操作: 计算转化翻译例如:从“EUR”转换为“CNY”金额“100”。这是 /convert?from=EUR&to=CNY&amount=100 RESTful 吗？最佳答
Jquery 转换
我使用 jquery 组合了一个图像滚动器，如下所示 function rotateImages(whichHolder, start) { var images = $('#' +which
CSS 转换
如何使用 CSS (-moz-transform) 更改一个如下所示的 div: 最佳答案你可以看看Mozilla Developer Center .甚至还有例子。但是，在我看来，您的具体示例不
CSS 转换
我需要帮助我正在尝试在选中和未选中的汉堡菜单上实现动画。我能够为菜单设置动画，但我不知道如何在转换为 0 时为左菜单动画设置动画 &__menu { transform: translateX(
swift :转换
我正在为字典格式之间的转换而苦苦挣扎:我正在尝试将下面的项目数组转换为下面的结果数组。本质上是通过在项目第一个元素中查找重复项，然后仅在第一个参数不同时才将文件添加到结果集中。 var items:[
具有相同布局的不同类型之间的C++转换
如果我有两个定义相同的结构，那么在它们之间进行转换的最佳方式是什么？ struct A { int i; float f; }; struct B { int i; float f; }; void
Javascript 转换
我编写了一个 javascript 代码，可以将视口(viewport)从一个链接滑动到另一个链接。基本上一切正常，你怎么能在那里看到http://jsfiddle.net/DruwJ/8/ 我现在的
meteorjs 图像上传/转换
我需要将文件上传到 meteor ，对其进行一些图像处理(必要时进行图像转换，从图像生成缩略图)，然后将其存储在外部图像存储服务器(s3)中。这应该尽可能快。您对 nodejs 图像处理库有什么建议
KDB+，转换，左操作数
刚开始接触KDB+，有一些问题很难从Q for Mortals中得到。说，这里 http://code.kx.com/wiki/JB:QforMortals2/casting_and_enumera
JSF float 转换
我在这里的一个项目中使用 JSF 1.2 和 IceFaces 1.8。我有一个页面，它基本上是一大堆浮点数字段的大编辑网格。这是通过 inputText 实现的页面上的字段指向具有原始值的值对象
SceneKit 转换 ScnMatrix4
ScnMatrix4 是一个 4x4 矩阵。我的问题是什么矩阵行对应于位置(ScnVector3)，旋转(ScnVector4)，比例(ScnVector3)。第 4 行是空的吗？编辑: 我玩弄了
Scala map 转换
恐怕我是 Scala 新手: 我正在尝试根据一些简单的逻辑将 Map 转换为新 Map: val postVals = Map("test" -> "testing1", "test2" -> "te
基于配置文件的 XSLT 转换
输入: This is sample 1 This is sample 2 输出: ~COLOR~[Green]This is sample 1~COLOR~[Red]This is sam

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

c# - 使用 Bootstrap 从 HTML 转换为 .NET MVC