Lab00-1

Sử dụng thư viện Bootstrap 3, tạo trang với giao diện trang chủ SachOnline như sau:
1. Tạo trang mới và khai báo thẻ meta:
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
2. Chèn các file thư viện bootstrap vào (bootstrap.css, bootstrap.js và jquery-
1.11.3.min.js) Có thể sử dụng link từ CDN:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
3. Tạo thẻ nav để chứa các nội dung ở phần navbar:
<nav class="navbar navbar-inverse"> <!--navbar-fixed-top-->
<div class="container">
(1)
</div>
<!-- /.container-->
</nav>
Tại mục (1):
- Tạo phần để khi hiển thị trên thiết bị di động (màn hình nhỏ) thì menu sẽ thu nhỏ
vào biểu tượng Sandwich (khi click chuột vào biểu tượng này sẽ hiển thị menu):
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-
target="#navbar1" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">SachOnline</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling
(Chứa nội dung của navbar) -->
<div class="collapse navbar-collapse" id="navbar1">
(2)
</div>
<!-- /.navbar-collapse -->
Tại mục (2):
- Tạo menu cho các liên kết TRANG CHỦ, GIỚI THIỆU, LIÊN HỆ:
<ul class="nav navbar-nav">
<li class="active"><a href="#">TRANG CHỦ</a> </li>
…
</ul>

- Tạo menu cho phần Người dùng và Giỏ hàng:

<ul class="nav navbar-nav navbar-right">
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-expanded="false" aria-haspopup="true">Người dùng<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Đăng ký</a> </li>
<li role="separator" class="divider"></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Đăng nhập</a></li>
</ul>
</li>
<li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span> Giỏ hàng (0)</a>
</li>
</ul>

- Tạo phần tìm kiếm:

<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Tìm kiếm">
</div>
<button type="submit" class="btn btn-default">Tìm</button>
</form>
4. Tạo slider:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

<div id="carousel1" class="carousel slide">

<ol class="carousel-indicators">
<li data-target="#carousel1" data-slide-to="0" class="active"> </li>
<li data-target="#carousel1" data-slide-to="1" class=""> </li>
…..Tạo thêm 4 li
</ol>
<div class="carousel-inner">
<div class="item active"> img class="img-responsive" src="Images/Slider/01.jpg" alt="thumb">
<div class="carousel-caption"> Quảng cáo 1 </div>
</div>
<div class="item"> <img class="img-responsive" src="Images/Slider/02.jpg" alt="thumb">
<div class="carousel-caption"> Quảng cáo 2 </div>
</div>
…. Thêm 4 hình
</div>
<a class="left carousel-control" href="#carousel1" data-slide="prev"><span class="icon-
prev"></span></a> <a class="right carousel-control" href="#carousel1" data-slide="next"><span
class="icon-next"></span></a></div>
</div>
</div>
5. Tạo phần thân trang (Sách mới):
- Cấu trúc để chia trang thành 2 phần (phần hiển thị danh mục Chủ Đề, Nhà Xuất Bản và
phần hiển thị SÁCH MỚI, Phân Trang)
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<!--CHỦ ĐỀ và NHÀ XUẤT BẢN-->

(3)
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
(4)
(5)
</div>
</div>
<hr>
</div>
<!-- /.container-->
- Tạo phần danh mục CHỦ ĐỀ và NHÀ XUẤT BẢN (tại (3)):
<ul class="list-group">
<li class="list-group-item active" style="font-weight:bold; text-align:center">SÁCH THEO CHỦ ĐỀ</li>
<a href="#" class="list-group-item">Ngoại ngữ</a>
…
</ul>
<br>
…Tương tự cho phần SÁCH THEO NHÀ XUẤT BẢN

- Tạo phần SÁCH MỚI (tại (4)):

<h2 class="text-center">SÁCH MỚI</h2>
<hr>
<div class="row text-center">
<div class="col-sm-4 col-md-4 col-lg-4 col-xs-6">
<div class="thumbnail"> <img src="Images/130499.jpg" alt="Thumbnail Image 1" class="img-
responsive img-rounded imgbook ">
<div class="caption">
<h3>Sản phẩm 1</h3>
<p>Mô tả tóm tắt sản phẩm 1</p>
<p><a href="#" class="btn btn-primary" role="button"><span class="glyphicon glyphicon-
shopping-cart" aria-hidden="true"></span> Add to Cart</a></p>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-4 col-xs-6">
... <!-- Sản phẩm 2-->
 </div>
<div class="col-sm-4 col-md-4 col-lg-4 col-xs-6 hidden-xs">
… <!-- Sản phẩm 3-->
</div>

... <!-- Sản phẩm 4,5,6-->

- Tạo phần Phân trang (tại (5)):

<nav class="text-center">
<ul class="pagination">
<li> <a href="#" aria-label="Previous"> <span aria-hidden="true">&laquo;</span> </a> </li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li class="disabled"><a href="#">5</a></li>
<li> <a href="#" aria-label="Next"> <span aria-hidden="true">&raquo;</span> </a> </li>
</ul>
</nav>

6. Tạo phần sản phẩm bán nhiều:

<div class="container">

<h2 class="text-center">SÁCH BÁN NHIỀU</h2>

<div class="row">
<div class="col-lg-6 col-md-6">
<div class="media-object-default">
<div class="media">
<div class="media-left"> <a href="#"> <img class="media-object imgsachbannhieu"
src="Images/TH004.jpg" alt="placeholder image"> </a> </div>
<div class="media-body">
<h4 class="media-heading">Tên sản phẩm 1</h4>
Mô tả chi tiết sản phẩm. Mô tả chi tiết sản phẩm. Mô tả chi tiết sản phẩm. Mô tả chi tiết sản
phẩm. Mô tả chi tiết sản phẩm. Mô tả chi tiết sản phẩm. Mô tả chi tiết sản phẩm. Mô tả chi tiết sản
phẩm. Mô tả chi tiết sản phẩm. Mô tả chi tiết sản phẩm.</div>
</div>
<div class="media">
... <!-- Sản phẩm 2-->
</div>
<div class="media">
... <!-- Sản phẩm 3-->
</div>
</div>
</div>

<div class="col-lg-6 col-md-6">

<div class="media-object-default">
... <!-- Sản phẩm 4,5,6-->
</div>
</div>

</div>
<!-- row-->
<hr>
</div>
<!-- /.container-->

7. Tạo phần chân trang:

<footer class="container well">

</footer>