Home » Lập trình » Kiến thức căn bản » Giới thiệu và hướng dẫn cách sử dụng Bootstrap

Giới thiệu và hướng dẫn cách sử dụng Bootstrap1907 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.

ozScyzS

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?

Góc tâm hồn

Chuyên mục

Trắc nghiệm mới nhất

Phần mềm tải nhiều

Danh mục Trắc nghiệm

Tài liệu tải nhiều

Danh mục tài liệu

Truyện cổ tích

Danh mục phần mềm

Copyright © ttsvn.net – chia sẻ tài liệu, công cụ và phần mềm tin học 2013 – 2024