Bootstrap là gì?
Twitter Bootstrap được tạo ra bởi hai người ở Twitter, những người muốn tăng tốc độ và khối lượng công việc bootstrap và mã. Framework bootstrap được sử dụng để phát triển các ứng dụng web và trang web. Khi tôi làm dự án có rất nhiều điều được yêu cầu ở hầu hết các dự án. Ví dụ như Grid, Table, Forms, button. Đây là những yêu cầu chung của dự án. Với những bạn có thể làm cho dự án web và chạy một cách nhanh chóng và dễ dàng. Framework Bootstrap cung cấp cho bạn tất cả những thành phần. Toàn bộ framework dựa vào module, bạn có thể tùy chỉnh nó với CSS. Nó cũng cung cấp bổ sung JavaScript cho những thứ như chú giải công cụ, popovers, modals và nhiều hơn nữa.
Tải về Bootstrap
Để ứng dụng của bạn chạy nhanh với Twitter Bootstrap, ta hãy bắt đầu bằng cách tải và cài đặt Bootstrap. Bạn có thể
tải về mà từ đây.
Bootstrap Cấu trúc tập tin
Sau khi tải về Bootstrap từ liên kết trước đó. Bạn sẽ thấy thư mục zip. Sau khi giải nén, bạn sẽ thấy rằng có một số tập tin và thư mục có sẵn trong thư mục gốc bootstrap.
Bootstrap Download File
Bây giờ thêm thư mục đến cấu trúc thư mục Visual Studio và mở rộng mỗi thư mục, đó sẽ xem xét như sau:
Cấu trúc tập tin bootstrap
Nó chứa bộ các tập tin, cụ thể là css, js và phông chữ. Các thư mục css có phong cách thiết kế của Twitter Bootstrap. Các thư mục js có tập tin JavaScript với các plugin JavaScript khác nhau trong các tập tin riêng biệt mà chúng ta sẽ sử dụng trong thiết kế trang web của chúng ta. Thư mục cuối cùng Font chứa hai bộ hình ảnh, cả hai đều giống hệt nhau ngoại trừ màu nền trước của họ. Bao gồm HTML Tiếp theo đó là thời gian để đưa vào dự án. Vì vậy, hãy tưởng tượng chúng ta có một tập tin HTML trống mà đi một cái gì đó như thế này: tập tin HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Bây giờ chúng ta cần phải thêm tham chiếu đến file CSS bootstrap và tập tin JS với các tập tin html.
<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.0 Transitional / / EN">
< html >
< đầu >
< tên > </ title >
< script src="Scripts/jquery-1.4.1.min.js" loại = "text / javascript"> </ script >
< liên kết href = "Bootstrap / css / bootstrap.css" rel = "stylesheet" loại = "text / css" />
< script src = "Bootstrap / js / bootstrap.min.js" loại = "text / javascript"> </ script >
</ đầu >
< cơ thể >
</ cơ thể >
</ html >
Lưu ý :. Cũng đừng quên để bao gồm jQuery nếu bạn sẽ sử dụng bootstraps JS plugin Sử dụng bootstrap lớp CSS = "nav nav-list" Bây giờ, bạn cần phải thêm lớp nav-danh sách, thêm vào các lớp nav đó sẽ làm cho nó trông giống như một danh sách. Và thêm lớp nav-header "cho bất kỳ phần tử li của lớp nav sẽ làm cho nó trông giống như một nhóm để phần các liên kết. Các tập tin HTML có vẻ như trong những điều sau đây:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<ul class="nav nav-list">
<li class="nav-header">Category</li>
<li><a href="#">.NET</a></li>
<li><a href="#">ASP.NET</a></li>
<li><a href="#">Silverlight</a></li>
<li><a href="#">WCF</a></li>
<li class="nav-header">Database</li>
<li><a href="#">SQL Server</a></li>
<li><a href="#">Oracle</a></li>
<li><a href="#">MySQL</a></li>
</ul>
</body>
</html>
Bây giờ nhìn thấy danh sách được vẽ như thế nào.