Trước khi bắt đầu đọc bài viết này thì các bạn hãy đảm bảo rằng bộ công cụ đã chuẩn bị sẵn mà tôi đề cập ở bài tổng quan bootstrap 3 nhé. Cũng như yêu cầu tối thiểu tối thiểu cần có là kiến ​​thức về html & css căn bản. Ok, bây giờ chúng ta sẽ tiến hành dowload Bootstrap cũng như tìm hiểu cấu trúc bên trong của nó

Bài viết này đã được đăng tại freetuts. net , không được sao chép dưới mọi hình thức.

1. Tải xuống Bootstrap 3

Đầu tiên các bạn cần phải vào để lựa chọn phiên bản cần tải xuống, có ba phiên bản để tải về như sau.

Phiên bản bootstrap 3

Có tổng cộng 3 phiên bản, vậy từng phiên bản có cấu trúc ra sao và đặc tính như thế nào?

Bootstrap được biên dịch sẵn. Đây là phiên bản, được biên dịch sẵn, chúng ta chỉ việc tải xuống về giải nén và sử dụng thôi. Mời các bạn xem file cấu trúc

bootstrap/
├── css/
│   ├── bootstrap. css
│   ├── bootstrap. tối thiểu. css
│   ├── bootstrap-theme. css
│   └── bootstrap-theme. tối thiểu. css
├── was/
│   ├── bootstrap. js
│   └── bootstrap. tối thiểu. js
└── phông chữ/
    ├── glyphicons-halflings-regular. eot
    ├── glyphicons-halflings-regular. svg
    ├── glyphicons-halflings-regular. ttf
    └── glyphicons-halflings-regular. woff
 

Các bạn có thể dễ dàng nhận ra rằng với phiên bản được biên dịch sẵn  thì Bootstrap đã cung cấp cho chúng ta bộ định kiểu cũng như tệp CSS & JS tối ưu, cấu trúc rất rõ ràng nhé. Ngoài ra còn có 4 tệp phông chữ, những tệp này chứa bao gồm 200 biểu tượng biểu tượng (Không rõ) được sử dụng để trang trí trang web thật là bắt mắt và trang web tiết kiệm năng lượng thay vì cách css thông thường muốn sử dụng các biểu tượng thì chúng tôi . Glyphicon Halflings đã giúp chúng ta dễ dàng hơn trong trang web việc làm bằng các biểu tượng.

Bài viết này đã được đăng tại [free tuts. bọc lưới]

Mã nguồn khởi động. Đây là bộ mã nguồn của Bootstrap, nó bao gồm các biên dịch Css & javascript có sẵn, nó có kèm theo tài liệu hướng dẫn tự xây dựng một thư viện css riêng. Lời khuyến nghị là không nên tải xuống bộ mã nguồn này nhé, chúng ta chỉ sử dụng phiên bản được biên dịch và đóng gói sẵn thôi. This is structure of it

bootstrap/
├── less/
├── js/
├── phông chữ/<
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

Phiên bản còn lại là SASS tôi sẽ không cập nhật trong bài viết này vì nó phụ thuộc vào phần nâng cao. Nhưng tôi sẽ nói sơ qua (Sass - Syntactally awesome stylesheets) là một siêu ngôn ngữ và kịch bản xử lý CSS. Hiểu biết về các nguyên tắc của Sass chính là chìa khóa giúp phát triển CSS nhanh hơn và hiệu quả hơn. Sass cung cấp cú pháp CSS đơn giản, gọn nhẹ và mạnh mẽ để tạo ra các biểu định kiểu có thể quản lý được. Ở các bài nâng cao về sau tôi sẽ đề cập đến nó. Tiếp theo sẽ là phần nhúng Bootstrap vào trang web

2. Nhúng thư viện Bootstrap vào trang web

Cũng giống như nhúng tệp css vào trang web theo cách thông thường thì Bootstrap còn cung cấp cho chúng ta một bộ liên kết , mà chỉ cần nhúng vào trang web thì ngay lập tức có thể gọi đến các thuộc tính css & js để sử dụng ngay, rất . Nhưng bên cạnh đó nếu như một ngày nào đó mà cáp quang việt nam không may bị quái thú bắt mắt thì các bạn nhất định phải kêu trời vì load không nổi bộ liên kết này. Giải pháp tối ưu nhất là dowload về giải nén ra và nhúng trực tiếp vào trang web của mình

Tiếp theo chúng ta sẽ tạo ra một mẫu file bootstrap cơ bản để có thể sử dụng nó như sau

    
Learning Bootstrap 3

                                		

Chắc chắn các bạn sẽ thắc mắc là cái gì đúng không nào? . Nó thiết lập màn hình theo Tỷ lệ 1×1, điều này sẽ loại bỏ các chức năng mặc định khỏi trình duyệt điện thoại thông minh, chỉ hiển thị vừa màn hình để xem và có thể phóng to bằng thao tác tay, thêm vào trong thẻ

Việc cần làm tiếp theo là nhúng tệp Bootstrap vào tệp HTML này

    
Learning Bootstrap
    
    

                                		

Phần định nghĩa CSS mà chúng ta sẽ đặt trong cặp thẻ , còn phần định nghĩa JS chúng ta sẽ thêm vào sau cặp thẻ . làm xong công việc này thì ngay từ bây giờ chúng ta có thể gọi ngay các thuộc tính css trong Bootstrap , tiến hành xây dựng giao diện trang web một cách nhanh chóng

Nếu các bạn save file on back và process running thì chắc chắn sẽ thất vọng vì kết quả không khác gì file html thông thường, xin đừng thất vọng vì bài viết này chỉ dừng lại ở hướng dẫn các bạn lựa chọn phiên bản . Ở bài biết tiếp theo sẽ bắt đầu xoáy sâu vào vấn đề sử dụng các thuộc tính css của bootstrap để xây dựng giao diện trang web

3. Lời kết

Bài tiếp theo chúng ta sẽ cùng nhau tìm hiểu về Grid System (Hệ thống lưới). Dự đoán sẽ hơi khó nên tôi mong các bạn hãy thật sự kiên nhẫn đọc hết bài và nhập lại mã cho nó thấm nhuần. Riêng tôi cũng sẽ cố gắng trình bày nội dung một cách dễ hiểu nhất