用Bootstrap實現GitHub的登錄界面效果
Bootstrap中文鏈接：https://code.z01.com/v4/
Bootstrap英文鏈接：https://getbootstrap.com/
logo來源：阿里巴巴矢量圖標庫：https://www.iconfont.cn/search/index?searchType=icon&q=github
我個人對GitHub的登錄界面是比較喜歡的，簡潔美觀，佈局合理，沒有那麼花裏胡哨，登錄頁面的基本元素也都具備，設計得也很清晰直觀，對整個的操作上來說也是簡潔方便的，下面我們就用Bootstrap來實現一個類似的效果吧！有一些細節上沒有做到完全一樣，這是由於Bootstrap本身有着自己已經重寫過的一些樣式，並且Bootstrap本身提供的樣式、組件以及佈局基本上可以滿足絕大部分的需求，所以在使用Bootstrap寫頁面的時候，我就想盡可能的不再自己去寫樣式和佈局，要做的就是一些微調。下面看一下具體的代碼：
代碼：
<!-- login.html -->
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="login.css">
<title>Github登錄</title>
</head>
<body class="bg-light">
<div class="container-fluid">
<div class="row">
<div class="col text-center py-4 mt-2">
<img class="img-fluid" src="github.png" alt="GitHub">
</div>
</div>
<div class="row">
<div class="col text-center">
<h4 class="text-muted font-weight-light mt-1">Sign in to Github</h4>
</div>
</div>
<div class="row row-custom">
<div class="col">
<div class="bg-white p-4 mt-3 border rounded">
<form>
<div class="form-group">
<label for="usernameInput" class="text-dark">Username or email address</label>
<input type="text" class="form-control form-control-sm" id="usernameInput" placeholder="Enter username or email">
</div>
<div class="form-group">
<label for="userpwdInput" class="text-dark d-block">Password
<a class="text-primary float-right">Forgot password?</a>
</label>
<input type="password" class="form-control form-control-sm" id="userpwdInput" placeholder="Password">
</div>
<button type="submit" class="btn rounded-sm btn-primary-custom btn-block btn-sm text-white mt-4">Sign in</button>
</form>
</div>
</div>
</div>
<div class="row mt-3 row-custom">
<div class="col text-center">
<div class="border py-3 rounded">
<span>New to GitHub?</span>
<a href="#">Create an account.</a>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
/*login.css*/
/*自定義Sign in 按鈕的顏色*/
.btn-primary-custom {
background-color: #28a745;
background-image: linear-gradient(-180deg, #34d058, #28a745 90%);
}
.btn-primary-custom:hover {
background-color: #269f42;
background-image: linear-gradient(180deg, #2fcb53, #269f42 90%);
border-color: rgba(27, 31, 35, .5);
}
a {
cursor: pointer;
}
.row-custom {
width: 340px;
margin: 0 auto;
}
- github.png:
![github]()
效果圖
- 縮小後：
![2]()
![3]()
總體來說，整體的佈局相對還是比較簡單的，但是有一些細節上的東西還是值得說一下的。
- 1、就是
Password和Forgot password?部分，因爲label標籤中的元素默認是左對齊的，這裏是直接把Forgot password?放在a標籤裏然後直接放到label標籤中，然後給a標籤的class設置float-right，使其右對齊。但是這裏會出現一個小問題，就是鼠標移至Forgot password?上時不會出現手型的標識，所以就直接在css文件中設置a { cursor: pointer; }。
![在這裏插入圖片描述]()
<label for="userpwdInput" class="text-dark d-block">Password
<a class="text-primary float-right">Forgot password?</a>
</label>
- 2、就是
Sign in按鈕的背景漸變，這裏我也嘗試過多遍，但始終感覺和官網上的漸變有一些區別。這裏就不再追求完全一樣了，大致上是差不多的。
<button type="submit" class="btn rounded-sm btn-primary-custom btn-block btn-sm text-white mt-4">Sign in</button>
.btn-primary-custom {
background-color: #28a745;
background-image: linear-gradient(-180deg, #34d058, #28a745 90%);
}
.btn-primary-custom:hover {
background-color: #269f42;
background-image: linear-gradient(180deg, #2fcb53, #269f42 90%);
border-color: rgba(27, 31, 35, .5);
}
- 3、頁面的兼容問題。通過放縮瀏覽器可以看到官網的登錄界面的寬度是沒有變化的，而且始終是居中的。關於頁面兼容問題的處理辦法其實是比較多的，Bootstrap本身也提供了針對不同尺寸設備的響應式支持，但是在這裏通過設置斷點來進行響應式的支持好像是比較麻煩的，並且好像是存在一些問題的，因爲這個登錄框這一部分在不同的頁面的佔比是不同的，所以這裏我就從簡處理了，直接把登錄框（包括下方
New to GitHub? Create an account.）這一部分的寬度直接寫死了：width: 340px;，然後設置margin: 0 auto;來使其居中。
<div class="row row-custom"></div>
.row-custom {
width: 340px;
margin: 0 auto;
}
總體來說，這個頁面樣式的設計實現基本上沒有什麼太大的難度，但是在兼容性和一些細節上的處理還是需要找一些比較好的辦法來實現的。同樣的一種效果其實通常會有很多種辦法來實現，那麼我們要做的就是找到一種更簡潔的辦法去實現同樣的效果，尤其是在使用Bootstrap這種提供了完善且強大的佈局和樣式支持，在使用的時候就希望能夠儘可能少的自己去寫樣式和調整佈局。好的，就囉嗦這麼多了
創作不易，喜歡的話加個關注點個贊，蟹蟹蟹蟹♪(･ω･)ﾉ