在 Mac OS Visual Studio 中将 bootstrap 添加到 ASP.NET 核心
Add bootstrap to ASP.NET Core in Visual Studio on Mac OS
我想将 bootstrap 4 添加到 Mac OS 设备上的 asp.net 核心 2.2。我已经通过 Nuget 添加了它,但它似乎不起作用。
我也没有 manage client-side library
和 manage Bower packages
选项。 Mac 上的 VS 与 Windows 上的不同,所以我遇到了一些问题。
您可以在没有 Nuget 的情况下手动添加。
只需将 bootstrap 所有 CSS 和 js 文件复制到以下目录中的 .net 核心项目中
wwwroot(在root里面可以找到)
然后把CSS和js链接放在~/view/shared/_Layout.cshtml Like This
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
和
之前的页尾
</body>
tag 你可以这样放 jquery 和 bootstrap js
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
不需要在
中添加CSS和js
Layout.cshtml
您可以在任何页面上添加此 js 和 css,但 Layout.cshtl 是根页面,因此 bootstrap 将全局应用于您的网站
删除文件夹 bootstrap (wwwroot/lib/bootstrap
)。右键单击项目并选择 Add >> Client-Side Library。 Select twitter-bootstrap@4.5.2 目标位置 设置为 wwwroot/lib/bootstrap/dist/
.
编辑 _Layout.cshtml
并更改 /4.3.1 和完整性:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css" asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" crossorigin="anonymous" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"/>
从bootstrapcdn更改为:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css" asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" crossorigin="anonymous" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"/>
和
<script src=https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js" asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal" crossorigin="anonymous" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o"></script>
至:
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js" asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js" asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal" crossorigin="anonymous" integrity="sha384-LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf"></script>
我想将 bootstrap 4 添加到 Mac OS 设备上的 asp.net 核心 2.2。我已经通过 Nuget 添加了它,但它似乎不起作用。
我也没有 manage client-side library
和 manage Bower packages
选项。 Mac 上的 VS 与 Windows 上的不同,所以我遇到了一些问题。
您可以在没有 Nuget 的情况下手动添加。 只需将 bootstrap 所有 CSS 和 js 文件复制到以下目录中的 .net 核心项目中 wwwroot(在root里面可以找到)
然后把CSS和js链接放在~/view/shared/_Layout.cshtml Like This
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
和
之前的页尾
</body>
tag 你可以这样放 jquery 和 bootstrap js
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
不需要在
中添加CSS和jsLayout.cshtml
您可以在任何页面上添加此 js 和 css,但 Layout.cshtl 是根页面,因此 bootstrap 将全局应用于您的网站
删除文件夹 bootstrap (wwwroot/lib/bootstrap
)。右键单击项目并选择 Add >> Client-Side Library。 Select twitter-bootstrap@4.5.2 目标位置 设置为 wwwroot/lib/bootstrap/dist/
.
编辑 _Layout.cshtml
并更改 /4.3.1 和完整性:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css" asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" crossorigin="anonymous" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"/>
从bootstrapcdn更改为:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css" asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" crossorigin="anonymous" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"/>
和
<script src=https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js" asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal" crossorigin="anonymous" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o"></script>
至:
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js" asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js" asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal" crossorigin="anonymous" integrity="sha384-LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf"></script>