Giới thiệu và hướng dẫn cách sử dụng Bootstrap1880 lượt đọc
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="https://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 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
Có thể bạn quan tâm?
Trắc nghiệm mới nhất
Phần mềm tải nhiều
-
1
Download Wondershare PDFelement - Phần mềm tạo chỉnh sửa file PDF chuyên nghiệp
747 2023 10/06/2022 -
2
Download Activate AIO Tools - Công cụ kích hoạt Windows và Office bản quyền
390 1652 14/12/2021 -
3
Download Game HITMAN 2 - Gold Edition (2018) torrent for PC
291 1541 09/06/2022 -
4
Download Game Total War: THREE KINGDOMS torrent for PC
222 1677 09/06/2022 -
5
Download Net Support School - Phần mềm quản lý phòng tin học lab - Hướng dẫn cài đặt
187 800 14/12/2021 -
6
Download Game Just Cause 4: Complete Edition torrent for PC
182 1294 09/06/2022