技術標籤：bootstrapcsshtmlc#

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>