Как применить шаблон Bootstrap к проекту MVC - PullRequest
Новая
       6

Как применить шаблон Bootstrap к проекту MVC

0 голосов
/ 14 мая 2018

Я меняю стиль моего проекта MVC, для этого я прибег к Bootswach и его различным шаблонам, проблема в том, что визуальные изменения в представлениях не эффективны, например ...

Вертикально имеет очень обширную форму, как показано ниже

Form

и вы хотите выровнять объекты вправо и влево следующим образом

Form expected

, чтобы сделать это изменение, используйте тег <div class = "col-md-6"> но я не получаю ожидаемого результата, почему это происходит?

сейчас я расскажу, как реализовать этот шаблон ....

1.- скачайте файл bootstrap watch bootstrap.css и добавьте его в мой проект

Bootstrapwatch

2.- в моем BundleConfig.cs измените загруженный вами файл boostrap.css

BundleConfig

3.- И, наконец, изменить мой взгляд

My View: 

<h2>Crear Producto</h2>


@using (Html.BeginForm("Create", "Productoes", FormMethod.Post, new { enctype = "multipart/form-data" })) 
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

        <div class="col-md-6">

            <div class="form-group">
                @Html.LabelFor(model => model.v_Nombre, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.v_Nombre, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.v_Nombre, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.FotoFile, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    <div class="file-input-new">
                        <div class="input-group" style="width:280px">
                            <div tabindex="500" class="form-control file-caption">
                                <div class="file-caption-name" id="NombreArchivo">
                                </div>
                            </div>
                            <div class="input-group-btn" style="height:auto">
                                <div tabindex="500" class="btn btn-primary btn-file">
                                    <i class="glyphicon glyphicon-folder-open"></i>
                                    Buscar Foto...
                                    @Html.TextBoxFor(modelo => modelo.FotoFile, new { type = "file", id = "files" })
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="form-group">
                @Html.LabelFor(model => model.Precio_Minimo, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Precio_Minimo, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Precio_Minimo, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Precio_Maximo, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Precio_Maximo, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Precio_Maximo, "", new { @class = "text-danger" })
                </div>
            </div>

        </div>

        <div class="col-md-6">

            <div class="form-group">
                @Html.LabelFor(model => model.Activo, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    <div class="checkbox">
                        @Html.EditorFor(model => model.Activo)
                        @Html.ValidationMessageFor(model => model.Activo, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Stock, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Stock, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Stock, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.f_Compra, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.f_Compra, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.f_Compra, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Comentarios, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Comentarios, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Comentarios, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Kn_CodigoCategoria, "Categoria", htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownList("Kn_CodigoCategoria", null, htmlAttributes: new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.Kn_CodigoCategoria, "", new { @class = "text-danger" })
                </div>
            </div>


            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Crear" class="btn btn-outline-success" />
                </div>
            </div>



        </div>

    </div>

}

с помощью этих двух шагов я уже могу визуализировать изменения шаблона, но я уже говорил, что не могу двигать свои объекты так далеко, как я хочу, Что я делаю неправильно? Нужно ли добавлять другие ссылки на мой BundleConfig? нужно ли что-то устанавливать в проекте?

любая помощь для меня?

1 Ответ

0 голосов
/ 14 мая 2018

Вам нужно поместить col-x-y div внутри div с классом .row и внутри контейнера, иначе он не будет работать. Аналогично этому (вам не нужен класс col, но я просто поместил его здесь, чтобы легче было видеть столбцы в скрипке): 

<div class="container">
  <!--This will not work -->
  <div class="col col-sm-3">.col-sm-3</div>
  <div class="col col-sm-6">.col-sm-6</div>
  <div class="col col-sm-3">.col-sm-3</div>
  <!-- This will work -->
  <div class="row">
    <div class="col col-sm-3">.col-sm-3</div>
    <div class="col col-sm-6">.col-sm-6</div>
    <div class="col col-sm-3">.col-sm-3</div>
  </div>
</div>

Вот Скрипка , так что вы можете увидеть это сами.

...