Giới thiệu và hướng dẫn cách sử dụng Bootstrap

Có bao giờ bạn phải viết HTML/CSS rùi ngồi suy nghỉ “Tại sao mình phải viết đi viết lại nhưng class giống nhau như thế này ?” hay “Mình sẽ làm 1 css framework để về sau sử dụng lại .Rồi chợt nhận ra là mọi chuyện không đơn giản như vậy class bạn viết ra ở web này rồi lại hì hục sửa ở web khác  nhiều lúc ngồi sửa còn lâu hơn là viết mới.

Hôm nay mình sẽ giới thiệu cho các bạn cách để giải quyết vấn đề trên.Đó là sử dụng Twitter Bootstrap.

GIỚI THIỆU VỀ TWITTER BOOTSTRAP

Twitter Bootstrap bao gồm các mã CSS + HTML cơ bản cho typography, forms, buttons, tables, grids, navigation, và nhiều thành phần khác của website.
Twitter Bootstrap cung cấp lưới cố định (fixed) rộng 940px và 12 cột. Tất nhiên là cũng có giải pháp cho việc dùng layout dạng động (fluid).
Style của các phần tử HTML trong Twitter Bootstrap khá đơn giản và thanh lịch. Ví dụ như phần đổ bóng trong input, highlight của bảng biểu, các mã CSS hiển thị cảnh báo, tabs, phân trang…
 

TẠI SAO LẠI SỬ DỤNG TWITTER BOOTSTRAP

Như mình đã giới thiệu ở trên , Twitter Bootstrap giúp chúng ta giảm thiểu thời gian thiết kết html và css.Twitter Bootstrap định nghĩa sẳn  các class css công việc của chúng ta chỉ là sử dụng các class đó vào mục đích của mình.Twitter Bootstrap còn hổ trợ Responsive design một cách làm giao diện đa thiết bị rất được ưu chuộng trong thời gian gần đây
 

CÁCH SỬ DỤNG TWITTER BOOTSTRAP

Đây là 1 cấu trúc mẩu để Twitter Bootstrap hoạt động.
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Để enable Responsive design thì chúng ta thêm đoạn này vào file html

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

Twitter Bootstrap đã viết sẳn rất nhiều components để chúng ta có thể sử dụng.ví dụ như nava,dropdown,Breadcrumbs….Chúng ta chỉ việc copy đoạn HTML đó và chèn vào vị trí mong muốn và chỉnh sửa lại là xong.Còn nhiều component nữa ở đây http://twitter.github.io/bootstrap/components.html bạn có thể vào để tham khảo

<div class="navbar-inner">
    <div class="container">
 
      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
 
      <!-- Be sure to leave the brand out there if you want it shown -->
      <a class="brand" href="#">Project name</a>
 
      <!-- Everything you want hidden at 940px or less, place within here -->
      <div class="nav-collapse collapse">
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>
Chèn đoạn code trên vào là bạn đã có 1 top menu hổ trợ responsive rồi.
 
Ngoài ra nó còn hổ trợ 1 số hiệu ứng jQuery như dropdown menu , tab,modal,…Bạn có thể tìm hiểu thêm ở đây

 

Related Post


CSS Border : Những điều không nên bỏ qua
Friday, September 13, 2013
Chúng ta đã quá quen thuộc với thuộc tính border có trong CSS, tuy nhiên còn có những điều thú vị khác về nó sẽ khiến bạn thật sự ngạc nhiên. Nào chúng ta cùng tìm hiểu nhé
Tạo file reset css cho website
Friday, August 16, 2013
Bạn cần biết rằng, mỗi trình duyệt đều có một kiểu style mặc định sẵn, và không phải tất cả là giống nhau. Sẽ có lúc bạn thiết kế được 1 mẫu giao diện rất đẹp trên trình duyệt này, nhưng khi chạy ở trình duyệt khác nó sẽ bị vỡ và hiện thị không theo như thiết kết. Và việc chúng ta nên làm trước tiên để giải quyết vấn đề này là thiết lập lại thuộc tính css ban đầu của các thẻ, để tránh được sự khách biệt ở các trình duyệt khác nhau càng nhiều càng tốt.
Search

Đăng ký nhận bài mới


Category

Blog Archive