今天我們來講一下bootstrap登錄頁面的html代碼。bootstrap是一個(gè)非常流行的前端開發(fā)框架,它能夠提供大量的預(yù)設(shè)樣式以及簡化頁面開發(fā)的過程。下面是一個(gè)基本的登錄頁面的html代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>Login Page</title> </head> <body> <div class="container"> <form action="" method="post" class="mt-5"> <div class="form-group"> <label for="username">Username:</label> <input type="text" class="form-control" id="username" placeholder="Enter username"> </div> <div class="form-group"> <label for="password">Password:</label> <input type="password" class="form-control" id="password" placeholder="Password"> </div> <button type="submit" class="btn btn-primary">Login</button> </form> </div> </body> </html>第一行是文檔類型聲明,告訴瀏覽器這是一個(gè)html文檔。接下來是文檔頭部,里面包含了一些元數(shù)據(jù)信息,比如頁面的字符編碼、設(shè)備寬度等等。 下面是主體部分。我們使用了bootstrap內(nèi)置的容器類container來容納我們的表單。表單中包含了一個(gè)用戶名輸入框和一個(gè)密碼輸入框。這里我們使用了form-group類來包裝每個(gè)表單元素,并給出了每個(gè)元素的標(biāo)簽。 最后,我們在表單之外放置了一個(gè)登錄按鈕,點(diǎn)擊該按鈕可以提交表單數(shù)據(jù)。注意,我們需要引入bootstrap的css文件,這里我們直接引入了官方cdn的鏈接。