Thứ Hai, 1 tháng 2, 2016

Bài 12: Sử dụng Bootstrap thiết kế website

2/01/2016 02:05:00 CH    No comments

PHP Nâng cao | Lập Trình PHP | 29/12/2015 | 390 |
12
Bài viết này hướng dẫn các bạn sử dụng Bootstram để thiết kế giao diện cho một website hoàn chỉnh

Giới thiệu Bootstrap:

Bootstrap là một Front-end framework phổ biến nhất cho việc phát triển các ứng dụng responsive, mobile trên nền Web.
Bootstrap bao gồm một bộ sưu tập miễn phí và mã nguồn mở của các công cụ cho việc tạo ra các mẫu trang web và các ứng dụng web. Nó chứa CSS, Icon Font và Javascript để tạo ra các mẫu thiết kế web cho kiểu chữ, hình thức, các nút, menu và các thành phần giao diện khác nhằm tạo nên một mẫu web hoàn chỉnh. Bootstrap chứa những khuôn mẫu đã được thiết kế sẵn, đó là những giao diện cho người sử dụng.
Thiết kế cho tất cả mọi người ở bất cứ nơi đâu. Bootstrap hỗ trợ phát triển các dự án web phía front-end nhanh hơn và dễ dàng hơn. Được tạo ra để làm việc với tất cả các mức độ kỹ năng khác nhau của lập trình viên, tất cả các thiết bị khác nhau, và các mức độ dự án khác nhau.
Bootstrap

Đặc điểm nổi bật:

  • Bộ tiền xử lý: Ngoài vanilla CSS, Bootstrap còn hỗ trợ hai bộ tiền xử lý CSS phổ biến nhất là Less và Sass.
  • Responsive across devices
  • Một framework, mọi thiết bị: Bootstrap dễ dàng tích hợp và hiệu quả với quy mô dự án của bạn, Với một bộ mã nguồn căn bản, từ mobile đến tablet đến desktop.
  • Tài liệu đầy đủ: Với Bootstrap, bạn sẽ có được tài liệu phong phú và trong sáng với hàng trăm ví dụ, code mẫu, và nhiều hơn nữa.

Sau đây là một thiết kế đầu tiên:

Bước 1: Tải bộ Bootstrap .Phiên bản hiện tại là 3.1.1
Có một số cách rất đơn giản để bắt đầu với Bootstrap (phiên bản hiện tại v3.1.1), mỗi cách phù hợp với các trình độ và các nhu cầu khác nhau. Hãy đọc qua và xem cách nào phù hợp với nhu cầu cụ thể của bạn.
Bước 2: Giải nén bộ Bootstrap đã tải về
Khi tải về, hãy giải nén thư mục và bạn sẽ nhìn thấy cấu trúc của Bootstrap (đã biên dịch) tương tự như thế này:
Cấu trúc thư mục bên trong gồm có:
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff
Bước 3: Tạo Template cơ bản
Ví dụ 1: Chương trình "Hello world"
Bạn copy đoạn mã sau và paste vào một trang html.

<html lang="vi">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello world with Bootstrap Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
Ví dụ 2: Thiết kế một giao diện theo cấu trúc sau:
Header
Left Content Right
Footer
Code của giao diện trên như sau (Tuy nhiên đây chỉ khuôn mẫu)

<html lang="vi">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="row">
  <div class="col-md-12">Header</div>
</div>
<div class="row">
  <div class="col-md-4">Left</div>
  <div class="col-md-4">Content</div>
  <div class="col-md-4">Right</div>
</div>
<div class="row">
  <div class="col-md-12">Footer</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Ngoài ra Các ví dụ khác xem tại đây.
Thiết kế website

0 nhận xét:

Đăng nhận xét