Bootstrap优化页面教程与案例
CSS美化过程，并且截图对比前后效果
@model Student
@using static MockScholManagement.Models.EnumTypes.MajorEnum
@{ ViewBag.Title = "创建学生信息";}
<form asp-controller="home" asp-action="create" method="post">
<div>
<label asp-for="Name"></label>
<input asp-for="Name" />
</div>
<div>
<label asp-for="Email"></label>
<input asp-for="Email" />
</div>
<div>
<label asp-for="Major"></label>
<select asp-for="Major" asp-items="Html.GetEnumSelectList<MajorEnum1>()"></select>
</div>
<button type="submit">创建</button>
</form>
1、无样式基本HTML代码
1、显示的样式
<form asp-controller="home" asp-action="create" method="post" class="mt-3">
form表单整体添加 mt-3
各个div添加
<div class="form-group row">
<label asp-for="Name" class="col-sm-2"></label>
添加：col-sm-2
<label asp-for="Name" class="col-sm-2 col-form-label"></label>
添加：col-form-label
<div class="col-sm-10">
<input asp-for="Name" />
</div>
添加：col-sm-10
<div class="col-sm-10">
<input asp-for="Name" class="form-control" placeholder="Name"/>
</div>
添加：form-control placeholde=“Name”
<div class="form-group row">
<label asp-for="Email" class="col-sm-2 col-form-label"></label>
<div class="col-sm-10">
<input asp-for="Email" class="form-control" placeholder="Email" />
</div>
</div>
<div class="form-group row">
<label asp-for="Major" class="col-sm-2 col-form-label"></label>
<div class="col-sm-10">
<select
asp-for="Major"
class="custom-select"
asp-items="Html.GetEnumSelectList<MajorEnum1>()"></select>
</div>
</div>
添加：custom-select
class="custom-select mr-sm-2"
添加：mr-sm-2
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">创建</button>
</div>
</div>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/107143.html
