Chủ đề Bootstrap "Ban nhạc"
Tạo chủ đề: "Ban nhạc"
Trang này sẽ chỉ cho bạn cách xây dựng chủ đề Bootstrap từ đầu.
Chúng tôi sẽ bắt đầu với một trang HTML đơn giản, sau đó thêm ngày càng nhiều thành phần cho đến khi chúng tôi có một trang web đầy đủ chức năng, cá nhân và phản hồi.
Kết quả sẽ như thế này và bạn có thể tự do sửa đổi, lưu, chia sẻ, sử dụng hoặc làm bất cứ điều gì bạn muốn với nó:
Trang bắt đầu HTML
Chúng ta sẽ bắt đầu với trang HTML sau:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Theme The Band</title>
<meta charset="utf-8">
</head>
<body>
<div>
<h3>THE BAND</h3>
<p>We love music!</p>
<p>We have created a fictional band website. Lorem ipsum..</p>
</div>
</body>
</html>Thêm Bootstrap CDN và thêm vùng chứa
Thêm Bootstrap CDN và một liên kết tới jQuery rồi đặt các phần tử HTML vào trong một thùng chứa ( .container ):
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Theme The Band</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>THE BAND</h3>
<p>We love music!</p>
<p>We have created a fictional band website. Lorem ipsum..</p>
</div>
</body>
</html>Kết quả:
BAN NHẠC
Chúng tôi yêu âm nhạc!
Chúng tôi đã tạo ra một trang web ban nhạc hư cấu. Lorem ipsum..
Văn bản ở giữa
Thêm lớp .text-center để căn giữa văn bản bên trong vùng chứa và sử dụng phần tử <em> để làm nghiêng văn bản "We love music":
Ví dụ
<div class="container text-center">
<h3>THE BAND</h3>
<p><em>We love music!</em></p>
<p>We have created a fictional band website. Lorem ipsum..</p>
</div>Kết quả:
BAN NHẠC
Chúng tôi yêu âm nhạc!
Chúng tôi đã tạo ra một trang web ban nhạc hư cấu. Lorem ipsum..
Thêm phần đệm
Sử dụng CSS để làm cho vùng chứa trông đẹp hơn với phần đệm:
Ví dụ
.container {
padding: 80px 120px;
}Kết quả:
BAN NHẠC
Chúng tôi yêu âm nhạc!
Chúng tôi đã tạo ra một trang web ban nhạc hư cấu. Lorem ipsum..
Thêm lưới
Tạo ba cột có chiều rộng bằng nhau ( .col-sm-4 ), thêm văn bản và hình ảnh rồi đặt chúng vào trong vùng chứa:
Ví dụ
<div class="container text-center">
<h3>THE BAND</h3>
<p><em>We love music!</em></p>
<p>We have created a fictional band website. Lorem ipsum..</p>
<br>
<div class="row">
<div class="col-sm-4">
<p><strong>Name</strong></p><br>
<img src="bandmember.jpg" alt="Random Name">
</div>
<div class="col-sm-4">
<p><strong>Name</strong></p><br>
<img src="bandmember.jpg" alt="Random Name">
</div>
<div class="col-sm-4">
<p><strong>Name</strong></p><br>
<img src="bandmember.jpg" alt="Random Name">
</div>
</div>
</div>Kết quả:
BAN NHẠC
Chúng tôi yêu âm nhạc!
Chúng tôi đã tạo ra một trang web ban nhạc hư cấu. Lorem ipsum..
Tên
Tên
Tên
Hình ảnh vòng tròn
Định hình hình ảnh thành một hình tròn với lớp .img-circle .
Chúng tôi cũng đã thêm một số CSS để làm cho hình ảnh trông đẹp hơn:
Ví dụ
.person {
border: 10px solid transparent;
margin-bottom: 25px;
width: 80%;
height: 80%;
opacity: 0.7;
}
.person:hover {
border-color: #f1f1f1;
}
<img src="bandmember.jpg" class="img-circle person" alt="Random Name">
<img src="bandmember.jpg" class="img-circle person" alt="Random Name">
<img src="bandmember.jpg" class="img-circle person" alt="Random Name">
Kết quả:
Tên
Tên
Tên
Có thể thu gọn
Làm cho hình ảnh có thể thu gọn được; hiển thị thêm nội dung khi bạn click vào từng hình ảnh:
Ví dụ
<div class="row">
<div class="col-sm-4">
<p class="text-center"><strong>Name</strong></p><br>
<a href="#demo" data-toggle="collapse">
<img src="bandmember.jpg" class="img-circle person" alt="Random Name">
</a>
<div id="demo" class="collapse">
<p>Guitarist and Lead Vocalist</p>
<p>Loves long walks on the beach</p>
<p>Member since 1988</p>
</div>
</div>
<div class="col-sm-4">
<p class="text-center"><strong>Name</strong></p><br>
<a href="#demo2" data-toggle="collapse">
<img src="bandmember.jpg" class="img-circle person" alt="Random Name">
</a>
<div id="demo2" class="collapse">
<p>Drummer</p>
<p>Loves drummin'</p>
<p>Member since 1988</p>
</div>
</div>
<div class="col-sm-4">
<p class="text-center"><strong>Name</strong></p><br>
<a href="#demo3" data-toggle="collapse">
<img src="bandmember.jpg" class="img-circle person" alt="Random Name">
</a>
<div id="demo3" class="collapse">
<p>Bass player</p>
<p>Loves math</p>
<p>Member since 2005</p>
</div>
</div>
</div>Kết quả (click vào hình để xem hiệu ứng):
Tên
Nghệ sĩ guitar và ca sĩ chính
Thích đi dạo dài trên bãi biển
Thành viên từ năm 1988
Tên
tay trống
Yêu tiếng trống
Thành viên từ năm 1988
Tên
Người chơi bass
Yêu toán
Thành viên từ năm 2005
Thêm băng chuyền
Tạo một băng chuyền và thêm nó trước vùng chứa:
Ví dụ
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="ny.jpg" alt="New York">
<div class="carousel-caption">
<h3>New York</h3>
<p>The atmosphere in New York is lorem ipsum.</p>
</div>
</div>
<div class="item">
<img src="chicago.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago - A night we won't forget.</p>
</div>
</div>
<div class="item">
<img src="la.jpg" alt="Los Angeles">
<div class="carousel-caption">
<h3>LA</h3>
<p>Even though the traffic was a mess, we had the best time.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>Kết quả:
Newyork
Bầu không khí ở New York thật là lorem ipsum.
Chicago
Cảm ơn Chicago - Một đêm chúng tôi sẽ không quên.
LA
Mặc dù giao thông hỗn loạn nhưng chúng tôi đã có khoảng thời gian vui chơi tuyệt vời nhất ở Bãi biển Venice!
Phong cách băng chuyền
Sử dụng CSS để tạo kiểu cho băng chuyền:
Ví dụ
.carousel-inner img {
-webkit-filter: grayscale(90%);
filter: grayscale(90%); /* make all photos black and white */
width: 100%; /* Set width to 100% */
margin: auto;
}
.carousel-caption h3 {
color: #fff !important;
}
@media (max-width: 600px) {
.carousel-caption {
display: none; /* Hide the carousel text when the screen is less than 600 pixels wide */
}
}Kết quả:
Newyork
Bầu không khí ở New York thật là lorem ipsum.
Chicago
Cảm ơn Chicago - Một đêm chúng tôi sẽ không quên.
LA
Mặc dù giao thông hỗn loạn nhưng chúng tôi đã có khoảng thời gian vui chơi tuyệt vời nhất ở Bãi biển Venice!
Thêm vùng chứa chuyến tham quan
Thêm vùng chứa mới và thêm danh sách ( .list-group và .list-group-item ) bên trong vùng chứa đó.
Thêm một lớp tùy chỉnh ( .bg-1 ) vào vùng chứa (màu nền đen) và một số kiểu cho các lớp con của nó:
Ví dụ
<style>
.bg-1 {
background: #2d2d30;
color: #bdbdbd;
}
.bg-1 h3 {color: #fff;}
.bg-1 p {font-style: italic;}
</style>
<div class="bg-1">
<div class="container">
<h3 class="text-center">TOUR DATES</h3>
<p class="text-center">Lorem ipsum we'll play you some music.<br> Remember to book your tickets!</p>
<ul class="list-group">
<li class="list-group-item">September Sold Out!</li>
<li class="list-group-item">October Sold Out!</li>
<li class="list-group-item">November 3</li>
</ul>
</div>
</div>
Kết quả:
NGÀY DU LỊCH
Lorem ipsum chúng tôi sẽ mở nhạc cho bạn nghe.
Hãy nhớ đặt vé nhé!
- Tháng 9 đã bán hết!
- Tháng 10 đã bán hết!
- ngày 3 tháng 11
Thêm Nhãn & Huy hiệu
Thêm nhãn ( .label ) và huy hiệu ( .badge ) để đánh dấu số vé hiện có/đã bán hết:
Ví dụ
<ul class="list-group">
<li class="list-group-item">September <span class="label label-danger">Sold Out!</span></li>
<li class="list-group-item">October <span class="label label-danger">Sold Out!</span></li>
<li class="list-group-item">November <span class="badge">3</span></li>
</ul>Kết quả:
NGÀY DU LỊCH
Lorem ipsum chúng tôi sẽ mở nhạc cho bạn nghe.
Hãy nhớ đặt vé nhé!
- Đã bán hết tháng 9!
- Tháng 10 đã bán hết!
- ngày 3 tháng 11
Thêm hình ảnh thu nhỏ
Bên trong vùng chứa Tour, thêm ba cột có chiều rộng bằng nhau ( .col-sm-4 ):
Bên trong mỗi cột, thêm một hình ảnh.
Sau đó, sử dụng lớp .img-thumbnail để định hình hình ảnh thành hình thu nhỏ.
Thông thường, bạn sẽ thêm trực tiếp lớp .img-thumbnail vào phần tử <img> . Trong ví dụ này, chúng tôi đã đặt một vùng chứa hình thu nhỏ xung quanh hình ảnh để có thể chỉ định văn bản hình ảnh.
Ví dụ
<div class="row text-center">
<div class="col-sm-4">
<div class="thumbnail">
<img src="paris.jpg" alt="Paris">
<p><strong>Paris</strong></p>
<p>Fri. 27 November 2015</p>
<button class="btn">Buy Tickets</button>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="newyork.jpg" alt="New York">
<p><strong>New York</strong></p>
<p>Sat. 28 November 2015</p>
<button class="btn">Buy Tickets</button>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="sanfran.jpg" alt="San Francisco">
<p><strong>San Francisco</strong></p>
<p>Sun. 29 November 2015</p>
<button class="btn">Buy Tickets</button>
</div>
</div>
</div>Kết quả:
Paris
Thứ Sáu. 27 tháng 11 năm 2015
Newyork
Đã ngồi. 28 tháng 11 năm 2015
San Francisco
Mặt trời. 29 tháng 11 năm 2015
Danh sách Kiểu, Hình thu nhỏ & Nút
Sử dụng CSS để tạo kiểu cho danh sách và hình ảnh thu nhỏ. Trong ví dụ của chúng tôi, chúng tôi đã xóa đường viền tròn khỏi danh sách và chúng tôi đã cố gắng tạo hình ảnh thu nhỏ giống như thẻ, bằng cách xóa đường viền của chúng và đặt chiều rộng 100% cho mỗi hình ảnh.
Chúng tôi cũng đã sửa đổi kiểu mặc định của lớp .btn của Bootstrap thành nút màu đen:
Ví dụ
/* Remove rounded borders from list */
.list-group-item:first-child {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.list-group-item:last-child {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
/* Remove border and add padding to thumbnails */
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail p {
margin-top: 15px;
color: #555;
}
/* Black buttons with extra padding and without rounded borders */
.btn {
padding: 10px 20px;
background-color: #333;
color: #f1f1f1;
border-radius: 0;
transition: .2s;
}
/* On hover, the color of .btn will transition to white with black text */
.btn:hover, .btn:focus {
border: 1px solid #333;
background-color: #fff;
color: #000;
}Kết quả:
- Tháng 9 đã bán hết!
- Tháng 10 đã bán hết!
- ngày 3 tháng 11
Paris
Thứ Sáu. 27 tháng 11 năm 2015
Newyork
Đã ngồi. 28 tháng 11 năm 2015
San Francisco
Mặt trời. 29 tháng 11 năm 2015
Thêm một phương thức
Đầu tiên, thay đổi tất cả các nút bên trong hình thu nhỏ từ <button class="btn">Buy Tickets</button> thành <button class="btn" data-toggle="modal" data-target="#myModal" >Buy Tickets</button> . Các nút này được sử dụng để mở phương thức thực tế.
Để tạo phương thức, hãy xem đoạn mã sau:
Ví dụ
<style>
/* Add a dark gray background color to the modal header and center text */
.modal-header, h4, .close {
background-color: #333;
color: #fff !important;
text-align: center;
font-size: 30px;
}
.modal-header, .modal-body {
padding: 40px 50px;
}
</style>
<!-- Used to open the Modal -->
<button class="btn" data-toggle="modal" data-target="#myModal">Buy Tickets</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4><span class="glyphicon glyphicon-lock"></span> Tickets</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-shopping-cart"></span> Tickets, $23 per person</label>
<input type="number" class="form-control" id="psw" placeholder="How many?">
</div>
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Send To</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-block">Pay
<span class="glyphicon glyphicon-ok"></span>
</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span> Cancel
</button>
<p>Need <a href="#">help?</a></p>
</div>
</div>
</div>
</div>Kết quả (click vào nút "Mua Vé" để xem hiệu quả):
Thêm vùng chứa liên hệ
Tạo vùng chứa mới, với hai cột có chiều rộng không bằng nhau ( .col-md-4 và .col-md-8 ).
Thêm các biểu tượng thông tin có văn bản bên trong cột đầu tiên và các điều khiển biểu mẫu trong cột thứ hai:
Ví dụ
<div class="container">
<h3 class="text-center">Contact</h3>
<p class="text-center"><em>We love our fans!</em></p>
<div class="row test">
<div class="col-md-4">
<p>Fan? Drop a note.</p>
<p><span class="glyphicon glyphicon-map-marker"></span>Chicago, US</p>
<p><span class="glyphicon glyphicon-phone"></span>Phone: +00 1515151515</p>
<p><span class="glyphicon glyphicon-envelope"></span>Email: [email protected] </p>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-sm-6 form-group">
<input class="form-control" id="name" name="name" placeholder="Name" type="text" required>
</div>
<div class="col-sm-6 form-group">
<input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
</div>
</div>
<textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea>
<div class="row">
<div class="col-md-12 form-group">
<button class="btn pull-right" type="submit">Send</button>
</div>
</div>
</div>
</div>
</div>Kết quả:
Liên hệ
Chúng tôi yêu người hâm mộ của chúng tôi!
Thêm các tab có thể chuyển đổi
Thêm các tab ( .nav nav-tabs ) bên trong vùng chứa liên hệ, với "dấu ngoặc kép" từ các thành viên ban nhạc:
Ví dụ
<style>
.nav-tabs li a {
color: #777;
}
</style>
<h3 class="text-center">From The Blog</h3>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Mike</a></li>
<li><a data-toggle="tab" href="#menu1">Chandler</a></li>
<li><a data-toggle="tab" href="#menu2">Peter</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h2>Mike Ross, Manager</h2>
<p>Man, we've been on the road for some time now. Looking forward to lorem ipsum.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h2>Chandler Bing, Guitarist</h2>
<p>Always a pleasure people! Hope you enjoyed it as much as I did. Could I BE.. any more pleased?</p>
</div>
<div id="menu2" class="tab-pane fade">
<h2>Peter Griffin, Bass player</h2>
<p>I mean, sometimes I enjoy the show, but other times I enjoy other things.</p>
</div>
</div>Kết quả:
Từ Blog
Mike Ross, Giám đốc
Anh bạn, chúng ta đã đi trên đường được một thời gian rồi. Mong chờ lorem ipsum.
Thêm bản đồ/hình ảnh vị trí
Thêm hình ảnh vị trí hoặc bản đồ (đọc Hướng dẫn về Google Maps của chúng tôi dành cho google maps):
Ví dụ
<!-- Image of location/map -->
<img src="map.jpg" style="width:100%">Kết quả:
Thêm thanh điều hướng
Thêm thanh điều hướng ở đầu trang thu gọn trên màn hình nhỏ hơn:
Ví dụ
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#home">HOME</a></li>
<li><a href="#band">BAND</a></li>
<li><a href="#tour">TOUR</a></li>
<li><a href="#contact">CONTACT</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">MORE
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Merchandise</a></li>
<li><a href="#">Extras</a></li>
<li><a href="#">Media</a></li>
</ul>
</li>
<li><a href="#"><span class="glyphicon glyphicon-search"></span></a></li>
</ul>
</div>
</div>
</nav>
Kết quả:
Hãy tự mình thử » Mẹo: Căn phải các liên kết điều hướng với lớp navbar-right .
Nếu bạn muốn một trong các liên kết trong thanh điều hướng hoạt động giống như một menu thả xuống, hãy sử dụng lớp .dropdown
Kiểu thanh điều hướng
Sử dụng CSS để tùy chỉnh thanh điều hướng:
Ví dụ
/* Add a dark background color with a little bit see-through */
.navbar {
margin-bottom: 0;
background-color: #2d2d30;
border: 0;
font-size: 11px !important;
letter-spacing: 4px;
opacity: 0.9;
}
/* Add a gray color to all navbar links */
.navbar li a, .navbar .navbar-brand {
color: #d5d5d5 !important;
}
/* On hover, the links will turn white */
.navbar-nav li a:hover {
color: #fff !important;
}
/* The active link */
.navbar-nav li.active a {
color: #fff !important;
background-color:#29292c !important;
}
/* Remove border color from the collapsible button */
.navbar-default .navbar-toggle {
border-color: transparent;
}
/* Dropdown */
.open .dropdown-toggle {
color: #fff ;
background-color: #555 !important;
}
/* Dropdown links */
.dropdown-menu li a {
color: #000 !important;
}
/* On hover, the dropdown links will turn red */
.dropdown-menu li a:hover {
background-color: red !important;
}Kết quả:
Hãy tự mình thử »Thêm cuộn giấy
Thêm Scrollspy để tự động cập nhật liên kết thanh điều hướng khi cuộn:
Ví dụ
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50">
<div id="band" class="container">
<div id="tour" class="container">
<div id="contact" class="container"> Hãy tự mình thử »Thêm chân trang
1. Tạo phần tử <footer> và thêm một số văn bản.
2. Sử dụng CSS để tạo kiểu cho chân trang.
3. Thêm biểu tượng "Mũi tên lên", biểu tượng này sẽ đưa người dùng lên đầu trang khi nhấp vào.
4. Sử dụng jQuery để khởi tạo plugin chú giải công cụ:
Ví dụ
<style>
/* Add a dark background color to the footer */
footer {
background-color: #2d2d30;
color: #f5f5f5;
padding: 32px;
}
footer a {
color: #f5f5f5;
}
footer a:hover {
color: #777;
text-decoration: none;
}
</style>
<footer class="text-center">
<a class="up-arrow" href="#myPage" data-toggle="tooltip" title="TO TOP">
<span class="glyphicon glyphicon-chevron-up"></span>
</a><br><br>
<p>Bootstrap Theme Made By <a href="https://www.example.com.vn" data-toggle="tooltip" title="Visit w3schools">www.example.com.vn</a></p>
</footer>
<script>
$(document).ready(function(){
// Initialize Tooltip
$('[data-toggle="tooltip"]').tooltip();
})
</script>Kết quả:
Hãy tự mình thử »Thêm tính năng cuộn mượt mà
Sử dụng jQuery để thêm tính năng cuộn mượt mà (khi nhấp vào liên kết trên thanh điều hướng):
Ví dụ
<script>
$(document).ready(function(){
// Add smooth scrolling to all links in navbar + footer link
$(".navbar a, footer a[href='#myPage']").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
})
</script> Hãy tự mình thử »Liên lạc cuối cùng
Cá nhân hóa Chủ đề của bạn bằng cách thêm phông chữ bạn thích. Chúng tôi đã sử dụng "Montserrat" và "Lato" từ Thư viện Phông chữ của Google.
Link tới font chữ ở phần <head> :
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
Sau đó, bạn có thể sử dụng chúng trong trang:
Ví dụ
body {
font: 400 15px/1.8 Lato, sans-serif;
color: #777;
}
.navbar {
font-family: Montserrat, sans-serif;
}Chúng tôi cũng đã thêm một số phong cách bổ sung cho một số thành phần:
Ví dụ
/* Overwrite default styles of h3 and h4 */
h3, h4 {
margin: 10px 0 30px 0;
letter-spacing: 10px;
font-size: 20px;
color: #111;
}
/* Remove rounded borders on input fields */
.form-control {
border-radius: 0;
}
/* Disable the ability to resize textareas */
textarea {
resize: none;
} Hãy tự mình thử »