------
Phần 43.
Làm một giao diện sử dụng Bootstrap
Đây là clip số 32: giới thiệu về giao diện sẽ làm
Đây là clip số 33: tạo Navbar
Phím tắt để tạo Navbar trong Sublime Text: bs3-navbar:responsive
Trang web giúp tạo box-shadow mẫu: http://www.cssmatic.com/box-shadow
[index.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta
charset="utf-8">
<meta
http-equiv="X-UA-Compatible" content="IE=edge">
<meta
name="viewport" content="width=device-width,
initial-scale=1">
<title>Company</title>
<link
href="css/bootstrap.min.css" rel="stylesheet">
<link
rel="stylesheet" href="style.css">
</head>
<body>
<div
id="header">
<nav
class="navbar navbar-default navbar-fixed-top">
<div
class="container">
<div
class="navbar-header">
<div
class="navbar-brand"><a
href="#">Congty.com</a></div>
<button
type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#main-menu">
<span
class="sr-only">Toggle Navigation</span>
<span
class="icon-bar"></span>
<span
class="icon-bar"></span>
<span
class="icon-bar"></span>
</button>
</div>
<div class="collapse
navbar-collapse" id="main-menu">
<ul
class="nav navbar-nav navbar-right">
<li><a
href="#">Giới thiệu</a></li>
<a
href="#" class="btn btn-success navbar-btn
navbar-right">Đăng ký</a>
</ul>
</div>
</div>
</nav>
</div> <!--
#header -->
<div
id="content">
</div> <!--
#content -->
<div
id="footer">
</div> <!--
#footer -->
<script
src="js/jquery.js"></script>
<script
src="js/bootstrap.min.js"></script>
</body>
</html>
[style.css]
/*Navbar*/
#header nav {
text-transform:
uppercase;
background: #FFFFFF;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
box-shadow: 0px 2px 5px
0px rgba(0,0,0,0.2);
}
Đây là clip số 34: Call to Action, jumbotron
Sử dụng thư viện ảnh miễn phí cho phần jumbotron: https://unsplash.com/
Để hình nền tự co dãn theo kích thước của màn hình, dùng
thuộc tính background-size: cover; của CSS.
[HTML]
<div id="content">
<div
id="call-to-action">
<div
class="jumbotron">
<h1>Khóa học
Bootstrap3</h1>
<p>Hướng dẫn
thiết kế website sử dụng Bootstrap3 framework</p>
<a
href="#" class="btn btn-success btn-lg">Đăng
ký</a>
<a
href="#" class="btn btn-feature btn-lg">Giới
thiệu</a>
</div>
</div>
</div> <!--
#content -->
[CSS]
#call-to-action .jumbotron {
padding: 150px 0;
text-align: center;
background: #63AFC7
url(bg.jpg) center no-repeat;
background-size: cover;
}
#call-to-action .jumbotron h1,
#call-to-action .jumbotron p {
color: white;
text-shadow: 0px 2px 2px
rgba(0,0,0,0.2);
}
#call-to-action .jumbotron .btn-feature {
border: 1px solid
#FFFFFF;
color: #FFFFFF;
box-sizing: border-box;
}
#call-to-action .jumbotron .btn-feature:hover {
color: #F1F1F1;
}
Đây là clip số 35
Đây là clip số 36
Đây là clip số 37
Đây là clip số 38
Để cho một nút có chiều rộng đúng bằng các cột chứa nó, sử
dụng class=“btn-block”.
Để cho nhiều phần tử của form cùng nằm trên một hàng, sử
dụng class=“form-inline”.
Để cho một input có chiều rộng đúng bằng các cột chứa nó, sử
dụng style="width: 100%".
Đây là clip số 39
Để cho nhiều phần tử của danh sách (ul, ol) cùng nằm trên
một hàng, sử dụng class=“list-inline”.
Muốn cho chữ có màu đen nhạt (mờ đi), sử dụng
class=“text-muted”
Đây là clip 40: fonticon - fontawesome – tạo biểu tượng có
thể thay đổi kích thước
Mở trang web của fontawesome: http://fontawesome.io/, vào mục cheatsheet http://fontawesome.io/cheatsheet/
để lấy các biểu tượng.
Đây là clip 41: clip cuối của khóa học - Di chuyển giữa các
vùng trong một trang.
Sử dụng JavaScript để điều khiển việc di chuyển giữa các
vùng trong một trang.
Đọc thêm về .not() trong jQuery: https://api.jquery.com/not/
Đọc thêm về :not() trong jQuery: https://api.jquery.com/not-selector/
Ví dụ: var $result =
$('a[href*="#"]:not([href="#"])').not('#myCarousel a,
.modal-trigger a, .panel a').click(function(){ });
Đọc thêm về biểu thức chính quy (regular expression):
Để xóa kí tự “/” đầu tiên của chuỗi, sử dụng biểu thức chính
quy sau: this.pathname.replace(/^\//, '')
Lưu lại đoạn mã để coi lại sau:
$('a[href*="#"]:not([href="#"])').not('#myCarousel
a, .modal-trigger a, .panel a').click(function(){
if(location.pathname.replace(/^\//,
'') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname)
{
var
target = $(this.hash);
target
= target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if(target.length)
{
if($(".navbar").css("position")
== "fixed") {
$('html,body').animate({
scrollTop:
target.offset().top-72
},
700, 'swing');
}else
{
$('html,body').animate({
scrollTop:
target.offset().top
},
700, 'swing');
}
return
false;
}
}
});
Đây là toàn bộ đoạn mã và hình ảnh của trang giao diện.
Cám ơn Chickenrain.com đã chia sẻ các clip.
-----------
Cập nhật [18/10/2017][23/10/2016]
-----------