Обновление с Bootstrap 3.3.7 до 4.xx нарушает макет - PullRequest
Новая
       24

Обновление с Bootstrap 3.3.7 до 4.xx нарушает макет

0 голосов
/ 06 февраля 2020

Только что попытался обновить jquery и повысить версию моего ASP. net Core 2.2 приложения до самых последних версий. Хотя у меня не было проблем с jquery (от 2.x до 3.4.1), это не считается для Bootstrap. Я мог бы обновить bootstrap. js с 3.3.7 до 4.3.1 без проблем, но как только я преодолею барьер 3.3.7 -> 4.0.0 с шаблоном. css bootstrap, дизайн моей страницы не работает. Тем более что навигационная панель больше не работает. Единственное, что я сделал, это сменил глификон на FontsAwesome. Есть ли какие-либо другие критические изменения, которые я должен отслеживать?

Вот фрагмент моего _Layout.cs html: 

    <body>
        <nav class="navbar navbar-inverse navbar-header navbar-fixed-top">
            <!--div class="container" DB: Responsible for not sticking to the left border-->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>            
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    @{Html.RenderPartial("Menu/TopMenu"); }

                </ul>

                <p class="pull-right navbar-text"><span class="far fa-address-card"></span> @User.Identity.Name?.Split("\\")[1]</p>

                <ul>
                    <!--li><a href="?culture=de">Deutsch</a><li>
                    <li><a href="?culture=it">Italiano</a></li-->
                </ul>
            </div>
            <!--/div-->
        </nav>
        <div class="body-content">
            @RenderSection("Heading", required: false) @{ if (Model != null && !string.IsNullOrEmpty(Model.ErrorMessage)) {
            <h1 class="text-danger text-center">@Model.ErrorMessage</h1> } else if (Model != null && !string.IsNullOrEmpty(Model.SuccessMessage)) {
            <h1 class="text-success text-center">@Model.SuccessMessage</h1> } } @RenderBody()

            <footer style="position: relative; clear:both;">
                <hr />
                <p>&copy; @Model.CurrentYear - Companyname S.A. / @Html.ActionLink("Changelog", "VersionHistory")</p>
            </footer>
        </div>
</body>
</html>

И TopMenu.cs html: 

<li>
    <a href="#" id="AllgemeinMenuDropdown" data-toggle="dropdown">@Localizer["General"]</a>@*Allgemein*@
    <ul class="dropdown-menu" aria-labelledby="AllgemeinMenuDropdown">
        <li><a asp-area="" asp-controller="Parameter" asp-action="ListDealer">@SharedLocalizer["VehicleOverview"]</a></li>
        @*Fahrzeug Übersicht*@ @*Preisschildgenerator*@
    </ul>
</li>

<li>
    <a href="#" id="VerkaufMenuDropdown" data-toggle="dropdown">@SharedLocalizer["Sales"]</a>@*Verkauf*@
    <ul class="dropdown-menu" aria-labelledby="VerkaufMenuDropdown">
        <li><a asp-area="" asp-controller="Checklist" asp-action="Index">@SharedLocalizer["Checklist"]</a></li>
        @*Checkliste*@
        <li><a asp-area="" asp-controller="StockExplorer" asp-action="Index">@SharedLocalizer["StockExplorer"]</a></li>
        @*Stock Exploer*@ @*@if (User.IsInRole(AdGroups.ALL_PC_PRICE_TAG_GENERATOR)) {
        <li><a asp-area="" asp-controller="PriceTag" asp-action="Index">@SharedLocalizer["PriceTagGenerator"]</a></li>
        }*@
        <li><a asp-area="" asp-controller="PriceTag" asp-action="Index">@SharedLocalizer["PriceTagGenerator"]</a></li>
    </ul>
</li>
<li><a asp-area="" asp-controller="Sales" asp-action="VisionOrderNumber">@Localizer["VisionOrderNumber"]</a></li>@*VisionOrderNumber*@
<li>
    <a href="#" id="DispoMenuDropdown" data-toggle="dropdown">@SharedLocalizer["Disposition"]</a>@*Disposition*@
    <ul class="dropdown-menu" aria-labelledby="DispoMenuDropdown">
        <li><a asp-area="" asp-controller="GoodWill" asp-action="GoodWillIndex">@SharedLocalizer["GoodWill"]</a></li>
        <li><a asp-area="" asp-controller="Parameter" asp-action="ListDealer">@SharedLocalizer["OrderConfirmation"]</a></li>@*Auftragsbestätigung*@
        <li><a asp-area="" asp-controller="PickUpAndDelivery" asp-action="Index">@SharedLocalizer["OrderCancellation"]</a></li>@*Fahrzeug Stornierung*@
    </ul>
</li>

<li>
    <a href="#" id="SalesAdminMenuDropdown" data-toggle="dropdown">@SharedLocalizer["SalesAdmin"]</a>@*Sales Admin*@
    <ul class="dropdown-menu" aria-labelledby="SalesAdminMenuDropdown">
        <li><a asp-area="" asp-controller="Checklist" asp-action="Index">@SharedLocalizer["FileProcessing"]</a></li>
        @*Aktenbearbeitung*@
        <li><a asp-area="" asp-controller="StockExplorer" asp-action="Index">@SharedLocalizer["Kennzeichenverwaltung"]</a></li>
        @*Kennzeichenverwaltung*@
        <li><a asp-area="" asp-controller="Preisschild" asp-action="Index">@SharedLocalizer["PaymentToCustomer"]</a></li>
        @*Zahlung an Kunde*@
    </ul>
</li>

<li>
    <a href="#" id="PDILogistikMenuDropdown" data-toggle="dropdown">@SharedLocalizer["PdiLogistics"]</a>@*PDI / Logistik*@
    <ul class="dropdown-menu" aria-labelledby="PDILogistikMenuDropdown">
        <li><a asp-area="" asp-controller="Checklist" asp-action="Index">@SharedLocalizer["PdiPlanning"]</a></li>
        @*PDI-Planung*@
        <li><a asp-area="" asp-controller="StockExplorer" asp-action="Index">@SharedLocalizer["DeliveryPlanning"]</a></li>
        @*Auslieferplanung*@
        <li><a asp-area="" asp-controller="Preisschild" asp-action="Index">@SharedLocalizer["VehicleWorkPlanning"]</a></li>
        @*Planung Arbeiten am Fahrzeug*@
        <li><a asp-area="" asp-controller="Preisschild" asp-action="Index">@SharedLocalizer["ArrivalPlanning"]</a></li>
        @*Ankunftsplanung*@
        <li><a asp-area="" asp-controller="Preisschild" asp-action="Index">@SharedLocalizer["WorkshopVehicleOverview"]</a></li>
        @*Übersicht Werkstattfahrzeuge*@
        <li><a asp-area="" asp-controller="Preisschild" asp-action="Index">@SharedLocalizer["PreparationPlanning"]</a></li>
        @*Aufbereitungsplanung*@
    </ul>
</li>

<li>
    <a href="#" id="AuslieferungMenuDropdown" data-toggle="dropdown">@SharedLocalizer["Delivery"]</a>@*Auslieferung*@
    <ul class="dropdown-menu" aria-labelledby="AuslieferungMenuDropdown">
        <li><a asp-area="" asp-controller="Checklist" asp-action="Index">@SharedLocalizer["DeliveryChecklist"]</a></li>
        @*Auslieferung Checkliste*@
        <li><a asp-area="" asp-controller="Checklist" asp-action="Index">@SharedLocalizer["DeliveryCalendar"]</a></li>
        @*Auslieferung Kalender*@ @*TODO => ?!*@
    </ul>
</li>

@*TODO: Sollte auf Report Server ausgelagert werden.*@
<li>
    <a href="#" id="ReportsMenuDropdown" data-toggle="dropdown">@SharedLocalizer["Reports"]</a>@*Reports*@
    <ul class="dropdown-menu" aria-labelledby="ReportsMenuDropdown">
        <li><a asp-area="" asp-controller="Checklist" asp-action="Index">@SharedLocalizer["ReportA"]</a></li>
        @*Report A*@
    </ul>
</li>

<li>
    <a href="#" id="DatenManagementMenuDropdown" data-toggle="dropdown">@SharedLocalizer["DataManagement"]</a>@*Datenverwaltung*@
    <ul class="dropdown-menu" aria-labelledby="DatenManagementMenuDropdown">
        <li><a asp-area="" asp-controller="InternalServices" asp-action="Index">@SharedLocalizer["VehicleWork"]</a></li>
        @*Arbeiten am Fahrzeug*@
        <li><a asp-area="" asp-controller="Branch" asp-action="Index">@SharedLocalizer["Branches"]</a></li>
        @*???*@
        <li><a asp-area="" asp-controller="FinanceTypes" asp-action="Index">@SharedLocalizer["FinanceTypes"]</a></li>
        @*Finanzierungsarten*@
        <li><a asp-area="" asp-controller="WarrantyTypes" asp-action="Index">@SharedLocalizer["WarrantyTypes"]</a></li>
        @*Garantieen*@
        <li><a asp-area="" asp-controller="PickUpAndDelivery" asp-action="Index">@SharedLocalizer["PickUpAndDeliveryCompanies"]</a></li>
        @*Hol & Bring Firmen*@
    </ul>
</li>

<li>
    <a href="#" id="SucheMenuDropdown" data-toggle="dropdown">@SharedLocalizer["Suche"]</a>@*Suche*@
    <ul class="dropdown-menu" aria-labelledby="SucheMenuDropdown">
        <li><a asp-area="" asp-controller="Parameter" asp-action="ListDealer">@SharedLocalizer["AllgemeineSuche"]</a></li>
        @*Allgemeine Suche*@

    </ul>
</li>

<li>
    <environment names="Development, Demo">
        <div style="color: red; text-align: center; font-size:32px; font-weight: bold; border-style: solid;">DEVELOPMENT ENVIRONMENT</div>
    </environment>
</li>

Вот как выглядел дизайн

до: https://abload.de/image.php?img=beforeaqku4.png

после : https://abload.de/image.php?img=aftera2jdh.png

Ответы [ 2 ]

2 голосов
/ 06 февраля 2020

Bootstrap 4 был огромный переписан. Вам нужно будет прочитать документацию Миграция на v4 .

Здесь слишком много изменений, чтобы покрыть их.

0 голосов
/ 06 февраля 2020

Я неправильно понял раздел, в котором говорилось, что переход с бета-версии 3 на финальную версию 4 не будет нарушать условия сделки. Я думал, что они имели в виду обновление с v3 до v4, но они имеют бета-версию 3 версии 4. Но я буду go использовать последнюю версию v3, так как есть некоторые важные изменения, как указал Роуэн Фриман.

Стабильные изменения

Переходя от бета-версии 3 к нашей стабильной версии v4.0, нет серьезных изменений, но есть некоторые заметные изменения.

...