文章來自：原始碼線上https://www.shengli.me/css/65.html；

Bootstrap是一個Web前端開發框架，使用它提供的css、js檔案可以簡單、方便地美化HTML控制元件。Bootstrap框架為各種控制元件定義好了很多的類（class），在引入相關檔案後，為控制元件新增相應的類，就可以看到想要的樣子了，它使開發更快捷，更簡單了......

bootstrap官網地址，下載地址：http://www.bootcss.com,http://www.runoob.com/bootstrap4/bootstrap4-install.html.

例項：

html程式碼：

html檔案中新增button.

 執行結果為：

再給它新增class類

執行結果： 

再給它加個class

執行結果：

除了這個這種類還有很多哦，比如btn-secondary,btn-success,btn-info,btn-warning,btn-danger,btn-dark,btn-light,btn-link。

如圖：

 以上是簡單的關於button的小例子，下面咱們來實現登入註冊介面吧。

開啟Web.config檔案，編寫資料庫連線字串。

有關建立asp.net空專案、新建App_Data資料夾（資料夾的名字不能更改，否則無法建立資料庫的連線）、複製資料庫、更改Web.config檔案的更多資訊，請檢視：兩種方法實現asp.net方案的前後端資料互動（aspx檔案、html+ashx+ajax）。

二、編寫HTML頁面

　　右鍵專案，新建login.html，register.html，login.ashx，register.ashx。有關ashx檔案（Generic Handler一般處理程式）和ajax的有關內容、資料庫訪問的具體語句，請檢視：

　　開啟HTML頁面login.html，進行登入表單的編寫。

在最外側寫上<form>標籤，輸入框、標籤、按鈕就寫在<form>裡面。一個標籤對應一個輸入框，把它們放在一個div裡併為div新增類form-group。在這個div內部，為input起個ID名字，label中新增屬性for，值就是它對應的input輸入框的ID。這樣設定結構更清晰，也使用了Bootstrap提供的行距、間距等等。如果不這樣寫，也可以，但可能會遇到一些問題。label和input的display方式都是inline，行內顯示。autocomplete=off清除輸入框的歷史輸入記錄。在form表單最後，新增兩個button。

點選註冊按鈕將跳轉到register.html進行註冊，點選登入按鈕，如果使用者名稱和密碼正確，則跳轉到主介面index.html。

　　為兩個button新增事件。window.open("跳轉的網址或頁面","開啟方式")，這是window.open()的一種寫法，開啟方式有4種：_self,_parent,_top,_blank，_blank是開啟一個新的視窗，_self是在當前頁面開啟目標頁面，但這裡不知道什麼原因，_self引數用不了（沒有解決）。這裡關於asp.net有個小的提示，當編輯好程式碼並儲存後，點選除錯或者右鍵解決方案管理器中的檔案-用瀏覽器開啟，有時候程式碼並沒有更新，需要在瀏覽器中開啟原始碼進行確認。可以交換使用不同的瀏覽器進行除錯。

在login.html頁面中，點選註冊按鈕將跳轉到register.html頁面進行註冊。下面我們對register.html頁面進行編輯。

　　編寫register.html頁面，和剛才的登入介面大體相同，只是去掉了登入按鈕。在ajax的編寫裡，要特別注意的是非同步async要設定成false,讀者可以試一下true和false的區別。

註冊功能對應的register.ashx檔案：

註冊效果圖：

註冊功能編寫完成，進行登入功能的編寫，在function login(){ $.ajax() }中，與註冊介面相同，同樣要注意非同步async要設定成false。

 相應login.ashx程式碼：

登入介面執行結果：