[blog]
Tiếp tục là bài 2 hướng dẫn chèn thư viện và xây dựng bố cục cho trang blog như Bài một đã đưa ra. Chúng ta chèn thư viện Boostrap, jQuery, Font
Các bạn chèn 3 thư viện sau dưới thẻ <head>
Thêm HTML trong body như sau
Đoạn HTML được mình chuẩn bị sẵn theo bố cục như Bài 1 đưa ra
Tiếp theo thêm 1 chút CSS trong <b:skin>
[/blog]
Tiếp tục là bài 2 hướng dẫn chèn thư viện và xây dựng bố cục cho trang blog như Bài một đã đưa ra. Chúng ta chèn thư viện Boostrap, jQuery, Font
Các bạn chèn 3 thư viện sau dưới thẻ <head>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css' rel='stylesheet'/>
<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>
Thêm HTML trong body như sau
Đoạn HTML được mình chuẩn bị sẵn theo bố cục như Bài 1 đưa ra
<header class='header'>
<div class='container'>
<nav class='navbar navbar-default'>
<div class='container-fluid'>
<div class='navbar-header'>
<button aria-controls='navbar' aria-expanded='false' class='navbar-toggle collapsed' data-target='#navbar' data-toggle='collapse' type='button'>
<span class='sr-only'>
Toggle navigation
</span>
<span class='icon-bar'>
</span>
<span class='icon-bar'>
</span>
<span class='icon-bar'>
</span>
</button>
<a class='navbar-brand' href='/'>
<data:blog.title />
</a>
</div>
<div class='navbar-collapse collapse' id='navbar'>
<ul class='nav navbar-nav'>
<li>
<a href='#'>
Home
</a>
</li>
<li>
<a href='#'>
About
</a>
</li>
<li>
<a href='#'>
Contact
</a>
</li>
<li class='dropdown'>
<a aria-expanded='false' aria-haspopup='true' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>
Dropdown
<span class='caret'>
</span>
</a>
<ul class='dropdown-menu'>
<li>
<a href='#'>
Item 1
</a>
</li>
<li>
<a href='#'>
Item 2
</a>
</li>
<li>
<a href='#'>
Item 3
</a>
</li>
</ul>
</li>
</ul>
<ul class='nav navbar-nav navbar-right'>
<li>
<a href='/'>
Item 1
</a>
</li>
<li>
<a href='/navbar-static-top/'>
Item 2
</a>
</li>
<li>
<a href='/navbar-fixed-top/'>
Item 3
</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
</header>
<main class='container'>
<div class='row'>
<div class='col-lg-8'>
<div class='jumbotron'>
<h1>
Hello World!
</h1>
</div>
</div>
<div class='col-lg-4'>
<div class='jumbotron'>
Siderbar
</div>
</div>
</div>
</main>
<footer class='footer'>
<div class='container'>
<div class='row'>
<div class='col-sm-4'>
<div class='jumbotron'>
Footer 1
</div>
</div>
<div class='col-sm-4'>
<div class='jumbotron'>
Footer 2
</div>
</div>
<div class='col-sm-4'>
<div class='jumbotron'>
Footer 3
</div>
</div>
</div>
</div>
<div class='container'>
<div class='row'>
<div class='col-sm-12'>
<div class='jumbotron'>
<div class="footer-copyright text-center py-3">
© 2020 Copyright:
<a href="/">
Bootstrap.com
</a>
</div>
</div>
</div>
</div>
</div>
</footer>
Tiếp theo thêm 1 chút CSS trong <b:skin>
.header{position:relative;z-index:1000;float:left;width:100%}
main,footer{clear:both}
Sau đó các bạn nhấn định dạng cho nó sắp xếp gọn và lưu lại là xong.[/blog]