Bootstrap Là Gì? Tìm Hiểu Và Hướng Dẫn Sử Dụng Bootstrap 3

Bootstrap là gì?

Theo trang web chính thức, Bootstrap là bộ công cụ HTML, CSS và JS phổ biến nhất để phát triển các dự án thiết kế web di động đáp ứng các dự án đầu tiên trên web.

Bootstrap có thể được chia đến ba tập tin chính:

Ngoài ra, Bootstrap yêu cầu jQuery hoạt động. JQuery là một thư viện JavaScript cực kỳ phổ biến và được sử dụng rộng rãi, vừa đơn giản hóa và bổ sung tính tương thích của trình duyệt chéo với JavaScript.

Mọi thứ bạn có thể xảy ra khi nghiên cứu tài liệu Bootstrap - Grunt, Gulp, Sass, LESS, Bower, npm, v.v. - không bắt buộc phải bắt đầu với Bootstrap. Đây là các tác vụ chạy, các tiền xử lý, trợ giúp cài đặt và quản lý gói, vì vậy đừng nản chí nếu bạn không biết cách sử dụng bất kỳ tệp nào.

Tại sao frameworks lại quan trọng? Có nhất định phải sử dụng nó không?

Bạn hoàn toàn không phải sử dụng một framework. Tuy nhiên, các bootstrap rất phổ biến và có nhiều lợi ích, vì vậy điều quan trọng là phải học cách làm việc với chúng.

Một số cách mà các framework có thể giúp bạn:

• Ngăn ngừa sự lặp lại giữa các dự án
• Sử dụng thiết kế web đáp ứng để cho phép trang web của bạn thích ứng với các kích cỡ màn hình khác nhau - di động, máy tính để bàn và mọi thứ.
• Thêm tính nhất quán để thiết kế và mã, giữa các dự án và giữa các nhà phát triển
• Thiết kế mẫu nhanh chóng và dễ dàng
• Đảm bảo tính tương thích chéo trình duyệt

Nói chung, mọi dự án thiết kế web bạn làm việc sẽ cần phải đáp ứng và hoạt động tốt trên tất cả các trình duyệt chính và có thể có một số sự sụt giảm đối với các trình duyệt cũ. Bootstrap có một cộng đồng mã nguồn mở khổng lồ , hoạt động trên đó để bạn không phải làm vậy. Ngoài ra, khi nhiều nhà phát triển đều biết cùng một hệ thống, họ có thể làm việc hài hòa hơn - và nó cũng làm cho người mới tham gia vào dự án trở nên nhanh hơn.

Lưới điện có lẽ là một trong những khía cạnh thiết yếu nhất của khuôn khổ. Đây là cơ sở mà trên đó bố cục toàn bộ được tạo ra. Ngoài ra, CSS cốt lõi của Bootstrap cũng sẽ bổ sung thêm kiểu dáng hữu ích cho các biểu mẫu, bảng biểu, các nút, danh sách, và hình ảnh, cũng như các thanh điều hướng đầy đủ chức năng, trong khi mã JavaScript cơ bản sẽ thêm mã hữu ích để tạo ra các phương thức, carousels, warning, popup, dropdowns , và accordions.

Bootstrap đi kèm với một vài ví dụ rất đơn giản để bắt đầu, nhưng nó cũng dễ dàng để bắt đầu từ "đầu", do đó, đó là những gì chúng tôi sẽ làm. Trước tiên, tôi sẽ chỉ sử dụng Bootstrap để đặt nền móng, sau đó chúng tôi sẽ thêm phong cách riêng của chúng tôi ở trên đầu để làm cho một cái gì đó vui vẻ và hợp thời trang.

Bước đầu tiên là tải Bootstrap . Tệp zip sẽ đi kèm với , và thư mục . Giải nén và lưu các tập tin trong một số thư mục. Bootstrap không đi kèm với bất kỳ HTML nào, nhưng chúng có trang "Hello, World!" Để bắt đầu trên tài liệu, vì vậy chúng ta sẽ sử dụng nó như .

Chào thế giới!

Dễ dàng để bắt đầu. Chúng tôi có cơ bản của chúng tôi doctype, html, head và body thẻ. Các meta name="viewport" thẻ này đặc biệt quan trọng đối với responsive design - nó đảm bảo rằng trang web của bạn có một tỉ lệ 1: 1 với khung nhìn (kích thước màn hình).

Và JavaScript cơ sở Bootstrap.

Vâng, đó là tất cả những gì bạn cần để bắt đầu với Bootstrap!

A container đặt một max-width nội dung trong thanh điều hướng chiều rộng đầy đủ của bạn.

Các navbar-header lớp chứa các "thương hiệu" thông tin, nơi bạn có thể đặt logo của bạn hoặc tên công ty. Chúng tôi đang thực hiện một trang web cho công ty công nghệ cao của công ty tưởng tượng.

Phần còn lại của mã là một danh sách không có thứ tự canh gác các máy chủ như là cả trình đơn trên máy tính để bàn và thiết bị di động của chúng tôi.

Tiêu đề Jumbotron

Tôi quyết định muốn một trong những tiêu đề lớn, không gian lãng phí, sự chú ý - grabbing, được gọi là một jumbotron trong những điều khoản Bootstrap. Không có nhiều để xem ở đây, chỉ là một jumbotron với một container và một số bản sao.

Có một số không gian thêm mà chúng tôi không muốn, nhưng tôi muốn xem Bootstrap có thể đưa chúng tôi đến mức nào nếu không có phong cách ưu việt. Như bạn thấy, chúng ta đã có một bố cục đẹp, dễ sử dụng mà không cần viết một dòng CSS.

Điều cuối cùng tôi sẽ làm là thêm vào một số nội dung chính, mà sẽ được ở dạng một lưới. Lưới là hàng ...Chứa các cột.

Bootstrap hoạt động trên một hệ thống 12 cột, do đó miễn là bạn thêm lên đến 12, bạn đang vàng. Ví dụ trên sẽ chứa hai cột chiều rộng 50% (6/12), sẽ được xếp chồng lên điện thoại di động và trở thành 100% chiều rộng.

Ở đây bạn có thể thấy tôi có ba bốn của mười hai cột, và như 3 x 4 = 12, mọi thứ hoạt động ra ngoài.

Biểu tượng

Tôi cũng đã thêm vào một vài glyphicons để trang trí. là biểu tượng được xây dựng trong bộ icon đi kèm với Bootstrap. Nếu bạn không tải phông chữ của mình, hoặc nếu bạn di chuyển chúng đến một thư mục khác, các biểu tượng này sẽ không hoạt động.

Sử dụng một glyphicon sẽ luôn có cùng một mã, và chỉ có glyphicon-floppy-disk lớp sẽ thay đổi.

Tôi bây giờ hài lòng với nền tảng của bố cục của tôi.

Tính năng chuyên nghiệp, đáp ứng và trình duyệt thân thiện. Nó chắc chắn không phải là sáng tạo hoặc độc đáo, mặc dù. Sau khi đặt nền móng, bạn sẽ muốn thêm thiết kế cá nhân của riêng bạn.

Nếu bạn biết LESS hoặc Sass, bạn có thể chơi xung quanh trong khu vực tùy biến rộng rãi của Bootstrap và tải về phiên bản Bootstrap của riêng bạn. Chúng tôi sử dụng "vanilla CSS", đó là CSS mà không có tiền xử lý. May mắn thay, bạn chỉ cần thêm một tờ kiểu dáng bên dưới lõi của Bootstrap

Nếu bạn chưa bao giờ sử dụng Google Font trước đây, bạn chỉ cần thêm bảng định kiểu font vào headvà thay đổi font-family phần tử mong muốn của bạn.

Bây giờ chúng tôi cuối cùng đã bắt đầu tạo mẫu. Chỉ trong vài phút, tôi sẽ có thể biến đổi bố trí Bootstrap nhàm chán, chung chung của tôi thành một bố cục phẳng vui nhộn. Trước tiên, tôi sẽ thoát khỏi không gian khó xử đó giữa thanh điều hướng và thanh jumbotron.

Một vài phong cách đơn giản cho các thẻ chính. Tôi đang tải trong phông chữ Montserrat trên toàn bộ trang, tôi đã làm các tiêu đề đậm, và tôi đã làm cho nền tối và ánh sáng văn bản.

Quay lại trong HTML của tôi, tôi sẽ quấn một section thẻ xung quanh lưới của tôi, và gọi nó call-to-action. Tôi cũng sẽ tạo ra một glyphicon-large lớp học và thêm nó vào mỗi biểu tượng span.

Cuối cùng chạm vào mã của tôi là sẽ được trung tâm gọi điện thoại dưới cùng, thêm margin-bottom vào các p thẻ để chúng stack đúng trên điện thoại di động, và làm glyphicons lớn hơn.

THIETKEWEB.CENTER - DỊCH VỤ THIẾT KẾ WEB CHUYÊN NGHIỆP