Làm cách nào để triển khai chủ đề từ bootswatch hoặc wrapbootstrap trong dự án MVC 5?

79

Tôi sắp tạo một ứng dụng web ASP.Net MVC5 mới. Tôi muốn sử dụng một chủ đề từ bootswatch hoặc wrapbootstrap trong ứng dụng, nhưng không thể tìm thấy bộ hướng dẫn về cách thực hiện việc này.

asp.net-mvc  twitter-bootstrap  asp.net-mvc-5  bootswatch 
— Peter Loudon
nguồn
2
Đây có thể không phải là thứ bạn đang tìm kiếm, nhưng nó khá đơn giản. Trong thư mục nội dung của bạn, bao gồm các .csschủ đề và trong App_Start BundleConfig.cs của bạn, thay thế ~/Content/bootstrap.cssvới~/Content/yourtheme.bootstrap.css
— Carrie Kendall
Cảm ơn Carrie. Đó là một câu trả lời thanh lịch. Bạn làm gì về trang bố cục thực tế? Chỉ cần thay thế phần thân bằng html từ mẫu? Tôi muốn chắc chắn rằng không có GitHub hoặc quy trình tự động nào khác cho việc này. Tôi sẽ đánh dấu điều này là đã trả lời nếu không nhận được thêm ý kiến ​​nào trong ngày hôm sau.
— Peter Loudon
Đối với trang bố cục, tôi nghĩ nó là mẫu mặc định . Nó sẽ hoạt động tốt với các chủ đề khác. Nói một cách đơn giản, một chủ đề chỉ là các phiên bản có màu / kiểu khác nhau của bootstrap. Vì vậy, các nút có thể có màu sắc khác nhau và một số thành phần có thể có bán kính đường viền khác nhau nhưng kiểu dáng tổng thể thực tế sẽ ít nhiều giống nhau. Bạn có thể áp dụng các bố cục khác nhau , chỉ cần thay thế phần bao gồm bằng các gói.
— Carrie Kendall
1
Tôi sẽ cung cấp câu trả lời bằng văn bản sau với nhiều chi tiết hơn:]
— Carrie Kendall
Cảm ơn @Carrie. Bạn có kinh nghiệm sử dụng các chủ đề cao cấp từ wrapbootstrap không và nguyên tắc có giống nhau không?
— Peter Loudon

Câu trả lời:

185

Các bước để áp dụng một chủ đề khá đơn giản. Để thực sự hiểu cách mọi thứ hoạt động cùng nhau, bạn sẽ cần hiểu mẫu ASP.NET MVC 5 đang cung cấp những gì và cách bạn có thể tùy chỉnh nó theo nhu cầu của mình.

Lưu ý: Nếu bạn có hiểu biết cơ bản về cách thức hoạt động của mẫu MVC 5, hãy cuộn xuống phần chủ đề.

Mẫu ASP.NET MVC 5: Cách thức hoạt động

Phần hướng dẫn này trình bày về cách tạo dự án MVC 5 và những gì đang diễn ra . Xem tất cả các tính năng của Mẫu MVC 5 trong blog này .

  1. Tạo một dự án mới. Trong Mẫu Chọn Web > Ứng dụng Web ASP.NET . Nhập tên cho dự án của bạn và nhấp vào OK.

  2. Trên trình hướng dẫn tiếp theo, chọn MVC và nhấp vào OK. Điều này sẽ áp dụng mẫu MVC 5.

    Ví dụ về việc chọn Mẫu MVC

  3. Mẫu MVC 5 tạo một ứng dụng MVC sử dụng Bootstrap để cung cấp thiết kế đáp ứng và các tính năng chủ đề. Dưới mui xe, các mẫu bao gồm một bootstrap 3. * gói NuGet rằng cài đặt 4 file: bootstrap.css, bootstrap.min.css, bootstrap.js, và bootstrap.min.js.

    Ví dụ về css và js đã cài đặt

  4. Bootstrap được đóng gói trong ứng dụng của bạn bằng cách sử dụng tính năng Tối ưu hóa Web. Kiểm tra Views/Shared/_Layout.cshtmlvà tìm kiếm

    @Styles.Render("~/Content/css")

    và

    @Scripts.Render("~/bundles/bootstrap")

    Hai đường dẫn này đề cập đến các gói được thiết lập trong App_Start/BundleConfig.cs:

    bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
    "~/Scripts/bootstrap.js",
    "~/Scripts/respond.js"));

bundles.Add(new StyleBundle("~/Content/css").Include(
    "~/Content/bootstrap.css",
    "~/Content/site.css"));

  5. Đây là điều giúp bạn có thể chạy ứng dụng của mình mà không cần cấu hình trước. Hãy thử chạy dự án của bạn ngay bây giờ.

    Ứng dụng mặc định đang chạy

Áp dụng chủ đề Bootstrap trong ASP.NET MVC 5

Hướng dẫn này trình bày cách áp dụng các chủ đề bootstrap trong một dự án MVC 5

  1. Trước tiên, hãy tải xuống csschủ đề mà bạn muốn áp dụng. Đối với ví dụ này, tôi sẽ sử dụng Bootswatch's Flatly . Bao gồm phần đã tải xuống flatly.bootstrap.cssvà flatly.bootstrap.min.csstrong Contentthư mục (hãy đảm bảo Bao gồm cả trong Dự án).

  2. Mở App_Start/BundleConfig.csvà thay đổi phần sau:

    bundles.Add(new StyleBundle("~/Content/css").Include(
    "~/Content/bootstrap.css",
    "~/Content/site.css"));

    để bao gồm chủ đề mới của bạn:

    bundles.Add(new StyleBundle("~/Content/css").Include(
    "~/Content/flatly.bootstrap.css",
    "~/Content/site.css"));

  3. Nếu bạn đang sử dụng mặc định được _Layout.cshtmlbao gồm trong mẫu MVC 5, bạn có thể bỏ qua bước 4. Nếu không, tối thiểu là bao gồm hai dòng này trong bố cục của bạn cùng với mẫu HTML Bootstrap của bạn :

    Trong của bạn <head>:

    @Styles.Render("~/Content/css")

    Dòng cuối cùng trước khi đóng </body>:

    @Scripts.Render("~/bundles/bootstrap")

  4. Hãy thử chạy dự án của bạn ngay bây giờ. Bạn sẽ thấy ứng dụng mới tạo của mình hiện đang sử dụng chủ đề của bạn.

    Mẫu mặc định sử dụng chủ đề phẳng

Tài nguyên

Hãy xem hướng dẫn 30 ngày tuyệt vời này của James Chambers để biết thêm thông tin, hướng dẫn, mẹo và thủ thuật về cách sử dụng Twitter Bootstrap với ASP.NET MVC 5.

— Carrie Kendall
nguồn
3
Tôi sẽ không đề nghị sử dụng một CDN chủ yếu là bởi vì bạn mất rất nhiều tối ưu hóa mà được xây dựng vào bundling (như việc rút gọn ). Với con người mà nói, bạn muốn chỉ cần thay đổi các liên kết trong giao diện ở bước # 4 để phản ánh rằng các CDN tức@Styles.Render("//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/cerulean/bootstrap.min.css")
— Carrie Kendall
1
Tôi đã làm điều này (nhưng với chủ đề cyborg) và bây giờ tôi nhận được "Một ngoại lệ của loại 'System.IndexOutOfRangeException' đã xảy ra trong WebGrease.dll" khi tôi cố gắng chạy. Lỗi xảy ra trên Styles.Render ("~ / Content / css")
— HitLikeAHammer
2
Tôi sẽ không bao giờ sử dụng CDN công khai chỉ vì một lý do duy nhất là tôi không có quyền kiểm soát hộp hoặc các phương pháp bảo mật tại chỗ . Trong mọi trường hợp, cuộc trò chuyện này không phải là thực sự về chủ đề cho bài viết này, vì vậy nếu bạn muốn tiếp tục cuộc trò chuyện xem xét việc tham gia với tôi trong trò chuyện :)
— Carrie Kendall
1
@SixOThree Tôi sẽ không đặt nhiều giá trị vào ảnh chụp màn hình, tôi lấy chúng từ một trong các bài báo được liên kết chỉ để làm ví dụ trực quan. Hy vọng sự giúp đỡ :)
— Carrie Kendall
1
Tôi vừa tìm thấy giải pháp: Tôi đang sử dụng các chủ đề bootstrap v4 trong khi phiên bản bootstrap của tôi là 3.x. Khi tôi đã sử dụng một chủ đề cho phiên bản phù hợp, mọi thứ đều hoạt động mà không có vấn đề gì. @ CarrieKendall, tôi nghĩ rằng nó có thể rất hữu ích cho những người đọc sắp tới nếu bạn thêm điểm này vào câu trả lời của mình.
— 41686d6564
17

Điều này có thể hơi muộn; nhưng ai đó sẽ thấy nó hữu ích.

Có một Gói Nuget để tích hợp AdminLTE - một mẫu Bootstrap phổ biến - vào MVC5

Chỉ cần chạy lệnh này trong bảng điều khiển Trình quản lý gói Visual Studio của bạn

Install-Package AdminLteMvc

NB: Có thể mất một lúc để cài đặt vì nó tải xuống tất cả các tệp cần thiết cũng như tạo các dạng xem toàn bộ và một phần mẫu (tệp .cshtml) có thể hướng dẫn bạn khi bạn phát triển. Một tệp bố cục mẫu _AdminLteLayout.cshtmlcũng được cung cấp.

Bạn sẽ tìm thấy các tệp trong ~/Views/Shared/thư mục

— Soma Mbadiwe
nguồn
1
`AdminLteMvc Nuget này khá gọn gàng! Tôi đã kiểm tra ra bản xem trước chỉ tại almsaeedstudio.com/preview Nó có giống như ... tất cả mọi thứ người ta sẽ cần trong một template Quản trị website :)
— Shiva
3

Đầu tiên, nếu bạn có thể xác định

tệp bootstrap.css

và

tệp bootstrap.min.js

trong máy tính của bạn, thì những gì bạn chỉ làm là

Đầu tiên hãy tải xuống chủ đề yêu thích của bạn, tức là từ http://bootswatch.com/

Copy tải bootstrap.css và bootstrap.min.js file

Sau đó, trong máy tính của bạn định vị các tệp hiện có và thay thế chúng bằng các tệp mới tải xuống.

LƯU Ý: đảm bảo các tệp đã tải xuống của bạn được đổi tên thành những gì có trong thư mục của bạn

I E

nhập mô tả hình ảnh ở đây

Sau đó, bạn tốt để đi.

đôi khi kết quả có thể không hiển thị ngay lập tức. bạn có thể cần chạy css trên trình duyệt của mình như một cách làm mới

— Omari Victor Omosa
nguồn
0

Tôi có một bài viết về MSDN - Tạo ASP.NET MVC với chủ đề / bố cục bootstrap tùy chỉnh sử dụng VS 2012, VS 2013 và VS 2015, cũng có một mẫu mã demo đính kèm .. Vui lòng tham khảo liên kết bên dưới. https://code.msdn.microsoft.com/ASPNET-MVC-application-62ffc106

— Hussain Patel
nguồn
Bài viết này đã được chọn là "Bài báo trong ngày" trong cộng đồng asp.net asp.net/community/articles vào ngày 07 tháng 10 năm 2016
— Hussain Patel.
0

Tất cả những gì bạn phải làm là chọn và tải xuống các tệp bootstrap.css và bootstrap.js từ trang web Bootswatch, sau đó thay thế các tệp gốc bằng chúng.

Tất nhiên bạn phải thêm các đường dẫn vào trang bố cục của mình sau đường dẫn jQuery.

— shaddad
nguồn
0

Bootswatch là một giải pháp thay thế tốt, nhưng bạn cũng có thể tìm thấy nhiều loại mẫu miễn phí được tạo cho ASP.NET MVC sử dụng MDBootstrap (một khung công tác front-end được xây dựng trên Bootstrap) tại đây:

ASP.NET MVC MDB Mẫu

— Ignacio
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.