OBin's Blog: học bootstrap

New

Bootstrap Framework chắc hẳn đã quen thuộc với nhiều người làm web, silder cũng là phần không thể thiếu trong một website. Bootstrap hỗ trợ slider mặc định sử dụng hiệu ứng trượt ngang, nhưng để đổi hiệu ứng này sang Fade in - Fade out thì phải làm như thế nào? Sau đây mời các bạn tham khảo biết viết dưới để xử lý vấn đề này nhé!

Hướng dẫn làm slider Bootstrap với hiệu ứng Fade in - Fade out

1 Tạo slider đặt tại vị trí bạn muốn trên website, code slider của Bootstrap như sau:

<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel" data-slide-to="0" class="active"></li>
        <li data-target="#carousel" data-slide-to="1"></li>
        <li data-target="#carousel" data-slide-to="2"></li>
    </ol>
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#carousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#carousel" data-slide="next">&rsaquo;</a>
</div>

2 Tại cuối file css của website bạn thêm đoạn css cho hiệu ứng fade như sau:

.carousel-fade .carousel-inner .item {
  -webkit-transition-property: opacity;
  transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
  z-index: 2;
}

Lưu ý: Mặc định code html slider Bootstrap tại thẻ <div id="carousel" không có class "carousel-fade" , ta thêm class này để slider nhận hiệu ứng từ css bạn đã thêm ở bước sau.

Các bạn có thể download file demo ở đây

Chúc các bạn thành công!

Xem thêm:
- Hướng dẫn sử dụng Grid System trong Bootstrap để phân chia cột ( Column)
- Tạo menu dropdowns nhanh trong Bootstrap
- Top 5 Frontend Frameworks sử dụng phổ biến nhất hiện nay
- Các ví dụ về cách dùng Bootstrap Pagination
- Tạo popup dễ dàng trong Bootstap với Bootstrap Modal Plugin
- Các kiểu styles button trong Bootstrap
- Tạo một slider trong Bootstrap bằng Bootstrap Carousel Plugin

Bootstrap Pagination là một thành phần có sẵn trong Bootstrap dùng để tạo phần đếm trang (Pager) dễ dàng cho website.

Sau đây là các ví dụ đơn giản về cách dùng Bootstrap Pagination:

1 - Kiểu cơ bản: Chỉ đơn giản bạn sử dụng class pagination với cấu trúc như sau

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

Demo:

2 - Kiểu Active: Dùng với class active để định vị trang đang truy cập

 <ul class="pagination">
  <li><a href="#">1</a></li>
  <li class="active"><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

Demo:

3 - Kiểu Disabled: Dùng để đặt một trang bất kì ở trạng thái bị khóa, dùng với class disabled

 <ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li class="disabled"><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

Demo:

4 - Điều chỉnh kích thước: pagination-lg là kích thước lớn, pagination-sm là kích thước nhỏ

 <ul class="pagination pagination-lg">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

<ul class="pagination pagination-sm">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

Demo:

Chúc các bạn thành công!

Xem thêm:
- Hướng dẫn sử dụng Grid System trong Bootstrap để phân chia cột ( Column)
- Hướng dẫn làm slider Bootstrap với hiệu ứng Fade in - Fade out
- Tạo menu dropdowns nhanh trong Bootstrap
- Top 5 Frontend Frameworks sử dụng phổ biến nhất hiện nay
- Tạo popup dễ dàng trong Bootstap với Bootstrap Modal Plugin
- Các kiểu styles button trong Bootstrap
- Tạo một slider trong Bootstrap bằng Bootstrap Carousel Plugin

Bootstrap Modal Plugin là thành phần sẵn có trong Bootstrap, ta chỉ cần gọi nó ra và sử dụng.

Cách gọi như sau: Đặt đoạn code sau vào trong thẻ <body>

<!-- Button dùng để gọi popup -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Click để mở popup</button>

<!-- popup -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Popup Header</h4>
      </div>
      <div class="modal-body">
        <p>Nội dung popup.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

Giải thích:

Nút gọi popup:
- data-target="#myModal" là dùng để xác định popup nào được gọi (nếu có nhiều popup trên cùng trang), trong ví dụ trên là popup có id là #myModal
- data-toggle="modal" là lệnh mở một Modal Popup trong Bootstrap

- Bạn có thể sử dụng button hoặc thẻ <a> để gọi popup nhưng phải luôn có 2 thuộc tính ở trên.

Popup:
- Thẻ <div> cha chứa id="myModal" dùng để xác định popup nào được gọi khi click button, class .modal xác định nội dung nào là của popup
- Class fade là hiệu ứng transition với fade in và fade out.
- Thuộc tính role="dialog" hiển thị popup dạng dialog
- Class modal-dialog dùng để set width và margin cho popup, bạn có thể thêm class modal-sm hoặc
modal-lg để set độ lớn nhỏ của pupup

Phần Modal content
Nơi chứa nội dung chính mà bạn muốn hiển thị trong popup. Ở phần này có thể tùy chỉnh hoặc giữ nguyên mặc định nếu muốn.

Lưu lại và chạy thử trên trình duyệt, click button "Click để mở popup" để xem kết quả.

Hoặc bạn có thể download file demo dưới đây:

http://www.mediafire.com/download/sab04xcm7skk837/Popup+Bootstrap+Example+-2.htm

Chúc các bạn thành công!

Xem thêm:
- Hướng dẫn sử dụng Grid System trong Bootstrap để phân chia cột ( Column)
- Hướng dẫn làm slider Bootstrap với hiệu ứng Fade in - Fade out
- Tạo menu dropdowns nhanh trong Bootstrap
- Top 5 Frontend Frameworks sử dụng phổ biến nhất hiện nay
- Các ví dụ về cách dùng Bootstrap Pagination
- Các kiểu styles button trong Bootstrap
- Tạo một slider trong Bootstrap bằng Bootstrap Carousel Plugin

Trong Bootstrap hỗ trợ nhiều dạng button khác nhau nhằm làm cho phù hợp hơn cho mỗi trường hợp được dùng. Sau đây là các dạng button chính:

Class	Demo	Ý nghĩa
.btn		Cơ bản
.btn-default		Mặc định
.btn-primary		Nhấn mạnh
.btn-success		Thành công hoặc việc gì đó tích cực
.btn-info		Thông tin
.btn-warning		Cảnh báo
.btn-danger		Nhấn mạnh hoặc cảnh báo
.btn-link		Đường dẫn
.btn-lg		Lớn
.btn-sm		Nhỏ
.btn-xs		Rất nhỏ
.btn-block		Button nằm trong khối, chiều dài bằng với thành phần cha
.active		Đang hoạt động
.disabled		Đã bị vô hiệu hóa

Cách dùng cơ bản:

<button type="button" class="btn btn-default" disabled="disabled">Disabled default button</button>

Lưu ý: Bạn có thể sử dụng những style này với các thành phần khác như <a>,<button>, hoặc <input>

Chúc các bạn thực hiện tốt!

Xem thêm:
- Hướng dẫn sử dụng Grid System trong Bootstrap để phân chia cột ( Column)
- Hướng dẫn làm slider Bootstrap với hiệu ứng Fade in - Fade out
- Tạo menu dropdowns nhanh trong Bootstrap
- Top 5 Frontend Frameworks sử dụng phổ biến nhất hiện nay
- Các ví dụ về cách dùng Bootstrap Pagination
- Tạo popup dễ dàng trong Bootstap với Bootstrap Modal Plugin
- Tạo một slider trong Bootstrap bằng Bootstrap Carousel Plugin

Dropdown menu là thành phần có sẵn trong Bootstrap, rất nhanh chóng và tiện lợi khi tạo một menu dropdown.

Sau đây là cách sử dụng:

Tạo một file html cơ bản như sau:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Dropdowns menu </h2>
  <p>Menu dropdown này có header ngăn cách các cụm menu khác nhau:</p>
  <div class="dropdown">
    <button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li class="dropdown-header">header 1</li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li class="divider"></li>
      <li class="dropdown-header">header 2</li>
      <li><a href="#">About Us</a></li>
    </ul>
  </div>
</div>

</body>
</html>

Trong code html trên, từ thẻ <div class="dropdown"> là ta đã bắt đầu khởi tạo menu dropdown.

- Thẻ <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> dùng để tạo button khi ta click thì menu đổ xuống. Thành phần này bạn có thể dùng một thành phần html khác như div, a, span nhưng phải có class là dropdown-toggle và data-toggle="dropdown"
- Ta sử dụng menu dạng list với thành phần con là <li>, với những <li> có class là dropdown-header thì nó sẻ là phần header ngân cách với các cụm menu khác.

Bây giờ, bạn lưu lại và chạy thử trên trình duyệt để xem kết quả nhé :)

Chúc các bạn thành công!

Xem thêm:
- Hướng dẫn sử dụng Grid System trong Bootstrap để phân chia cột ( Column)
- Hướng dẫn làm slider Bootstrap với hiệu ứng Fade in - Fade out
- Top 5 Frontend Frameworks sử dụng phổ biến nhất hiện nay
- Các ví dụ về cách dùng Bootstrap Pagination
- Tạo popup dễ dàng trong Bootstap với Bootstrap Modal Plugin
- Các kiểu styles button trong Bootstrap
- Tạo một slider trong Bootstrap bằng Bootstrap Carousel Plugin

Có thể bạn quan tâm

Xem nhiều trong tuần

Giải đáp