Hướng dẫn do i need to use css if i use bootstrap? - tôi có cần sử dụng css nếu tôi sử dụng bootstrap không?

Nếu bạn đang tạo một trang web cho doanh nghiệp của mình, thì bạn có thể có một danh sách mong muốn dài.

Bạn muốn thiết kế phản ánh giao diện của thương hiệu của bạn. Bạn muốn có chức năng cần thiết để đáp ứng nhu cầu của khách truy cập mà không vượt quá ngân sách. Và bạn muốn tạo bố cục đáp ứng hiển thị các yếu tố như nút và biểu mẫu một cách nhất quán, bất kể khách truy cập đang sử dụng thiết bị hay trình duyệt nào.

Bằng cách xây dựng với Bootstrap, bạn có thể kiểm tra mục cuối cùng đó khỏi danh sách của bạn. Bootstrap là một khung nguồn mở để nhanh chóng xây dựng các trang web đáp ứng và các dự án web đầu tiên trên thiết bị di động. Bởi vì nó cung cấp một bộ sưu tập mã có thể tái sử dụng, bạn đã giành chiến thắng để xây dựng một trang web từ đầu. & NBSP;

Để hiểu lý do tại sao hơn 21 triệu trang web trên internet sử dụng bootstrap, hãy để xem xét kỹ hơn về nó là gì.

Bootstrap CSS là gì?

Bootstrap CSS là khung CSS hàng đầu để phát triển các trang web đáp ứng và đầu tiên trên thiết bị di động. Bộ công cụ miễn phí và nguồn mở này đi kèm với một hệ thống lưới đáp ứng, cài đặt CSS toàn cầu, các thành phần được xây dựng sẵn rộng rãi bao gồm các nút, NAVBAR và các biểu mẫu và các plugin JavaScript tùy chọn để tăng tốc quá trình phát triển.

Mặc dù Bootstrap là một bộ công cụ nguồn mở để phát triển với HTML, CSS và JavaScript, nhưng nó thường được gọi là khung CSS.

Để hiểu lý do tại sao, trước tiên bạn phải hiểu rằng CSS thường dễ học hơn cho mọi người ở mọi cấp độ kinh nghiệm kỹ thuật và nhanh hơn trong các trình duyệt so với JavaScript. Vì những lý do này, các nhà phát triển Bootstrap đã viết trong CSS (và HTML) qua JavaScript bất cứ khi nào có thể. Thư viện CSS có trong Bootstrap lớn hơn nhiều so với thư viện JavaScript.

Vì Bootstrap giúp việc tạo các trang web phản hồi nhanh hơn và nhanh hơn, nó hấp dẫn nhiều nhà phát triển và người mới bắt đầu nói riêng. Tuy nhiên, nó không được đề xuất bởi tất cả. Dưới đây, chúng tôi sẽ xem xét lý do tại sao Bootstrap rất phổ biến và khi nó lý tưởng để sử dụng - và khi nó không lý tưởng. & NBSP;

Tại sao bootstrap?

Bootstrap là bộ công cụ chuyển sang cho nhiều nhà phát triển phía trước. Theo W3Techs, nó được sử dụng bởi 22,1% tất cả các trang web trên Internet. & NBSP;

Có một vài yếu tố thúc đẩy sự phổ biến của Bootstrap. Đầu tiên và quan trọng nhất, nó có nguồn mở và do đó miễn phí tải xuống và sử dụng. Nó cũng có thể tùy chỉnh hoàn toàn và tương thích với tất cả các trình duyệt hiện đại. Điều này đúng với nhiều khung CSS, tuy nhiên. & NBSP;

Điều khiến Bootstrap khác biệt với các bộ công cụ phát triển khác là nó được phát triển đầu tiên trên thiết bị di động. Có nghĩa là, mã đã được tối ưu hóa cho các thiết bị di động (nghĩa là kích thước màn hình nhỏ nhất) trước tiên và sau đó được mở rộng để hiển thị trên các màn hình lớn hơn. Do đó, việc xây dựng với Bootstrap CSS đảm bảo rằng trang web của bạn hỗ trợ kết xuất và chạm vào phù hợp cho tất cả các thiết bị.

Một lý do khác khiến Bootstrap rất phổ biến là nó dễ sử dụng. Nó đi kèm với các mẫu cho kiểu chữ, biểu mẫu, nút, menu thả xuống, điều hướng và các thành phần giao diện khác. Sử dụng các mẫu được tạo kiểu trước này, bạn có thể thêm các tính năng làm phong phú trải nghiệm người dùng trên trang web của bạn mà không cần phải mã hóa chúng từ đầu.

Khi nào nên sử dụng bootstrap

Có nhiều lý do để sử dụng bootstrap. Chúng tôi đã thảo luận về một số ở trên nhưng hãy để xem xét kỹ hơn những lý do này dưới đây. & NBSP;

1. Bạn muốn một trang web đáp ứng.

Xây dựng một trang web đáp ứng dễ dàng hơn nhiều khi sử dụng bootstrap so với làm như vậy từ đầu. Bootstrap đi kèm với các kiểu đáp ứng, như các thùng chứa và truy vấn phương tiện, để đảm bảo trang web của bạn điều chỉnh theo chế độ xem. Điều đó có nghĩa là bạn không phải lo lắng về việc khách truy cập của bạn đang sử dụng máy tính để bàn, máy tính bảng hoặc thiết bị di động. & NBSP;

2. Bạn muốn tiết kiệm thời gian. & Nbsp;

Bạn có thể xây dựng trang web của bạn một cách nhanh chóng với Bootstrap. Khi bạn tải xuống khung, bạn có thể bắt đầu với một mẫu cơ bản và sau đó thêm các thành phần bạn cần. Các thành phần này là các phần tử HTML cơ bản, như bảng, biểu mẫu, nút, hình ảnh và biểu tượng, được tạo kiểu với một lớp cơ sở và được mở rộng với các lớp sửa đổi. Sử dụng các thành phần được thiết kế sẵn này giới hạn đáng kể lượng CSS tùy chỉnh bạn phải viết.

Xem xét các nút bootstrap chẳng hạn. Lớp cơ sở .BTN được sử dụng cho tất cả các kiểu chung mà bạn muốn cho các nút của mình, như hiển thị, đệm, chiều rộng biên giới. Với lớp này, bạn không cần phải lặp lại các thuộc tính CSS này trong bảng kiểu của bạn để định dạng mỗi nút bạn thêm.

Mặt khác, các lớp sửa đổi, như. Đây chỉ là một ví dụ về cách sử dụng các thành phần Bootstrap nhanh hơn nhiều so với việc mã hóa chúng từ đầu. & NBSP;

3. Bạn đã quen thuộc với HTML và CSS.

Mặc dù Bootstrap không đơn giản hóa quá trình xây dựng một trang web, nhưng bạn sẽ phải làm quen với HTML và CSS để sử dụng khung. Ví dụ: hiểu mô hình hộp CSS sẽ rất quan trọng khi sử dụng lớp container và xây dựng lưới bootstrap đầu tiên của bạn.

Tin tốt là bạn sẽ chỉ cần một kiến ​​thức cơ bản về mã hóa để bắt đầu. & NBSP;

4. Bạn có nhiều người xây dựng trang web của bạn.

Nếu bạn có nhiều cộng tác viên làm việc trên một trang web, thì tính nhất quán là quan trọng. Bạn không muốn các nút trên trang chủ của bạn trông khác với các nút trên trang đích của bạn hoặc sử dụng một kiểu chữ trang web khác trên blog của bạn so với bất kỳ nơi nào khác trên trang web của bạn - v.v. Sử dụng Bootstrap và các cài đặt mặc định, các lớp tiện ích và các thành phần thành phần có thể giúp đảm bảo mặt trước của trang web của bạn trông phù hợp.

5. Bạn muốn trở thành một phần của cộng đồng.

Vì Bootstrap là nguồn mở, nó có một cộng đồng toàn cầu gồm các nhà phát triển và nhà thiết kế dành riêng để hỗ trợ khuôn khổ. Những nhà phát triển và nhà thiết kế này sửa đổi và tăng cường cơ sở mã của Bootstrap trên GitHub. Họ cũng trả lời các câu hỏi trên Twitter, Stack Overflow và trong một phòng chùng chuyên dụng. Khi sử dụng Bootstrap, bạn có thể tận dụng cộng đồng đang hoạt động này để trở thành người dùng Bootstrap tốt hơn.

Khi không sử dụng bootstrap

Mặc dù có nhiều lợi ích của việc sử dụng khung CSS này, nhưng có một số lý do không sử dụng bootstrap. Hãy cùng xem xét kỹ hơn những lý do này dưới đây. & NBSP;

1. Bạn muốn một trang web độc đáo. & NBSP;

Vì bootstrap đi kèm với nội dung, các thành phần và mẫu được tạo kiểu trước, các trang web bootstrap có xu hướng trông giống nhau trong hộp. Trên thực tế, Bootstrap đã bị đổ lỗi cho lý do tại sao các trang web ngày nay trông giống nhau.

Bạn có thể tùy chỉnh một trang web bootstrap, nhưng nó sẽ mất thời gian. Ngoài ra, nếu bạn phải ghi đè quá nhiều kiểu dáng mặc định, thì có thể có ý nghĩa hơn khi tạo bảng kiểu của riêng bạn ngay từ đầu.

2. Bạn muốn một chủ đề.

Khung bootstrap không phải là một chủ đề - mặc dù có các chủ đề bootstrap có sẵn. Ví dụ, hãy so sánh khung với chủ đề WordPress.

Khi bạn cài đặt và kích hoạt chủ đề WordPress, nó sẽ thay đổi toàn bộ ngoại hình của bạn. Khi bạn tải xuống khung Bootstrap, các khía cạnh của trang web của bạn sẽ tự động thay đổi, như kiểu chữ. Nhưng bạn vẫn phải viết HTML và cắm các bố cục, màu sắc và các thành phần đặt trước bạn cần để tạo nên trang web của mình. & NBSP;

3. Bạn muốn một trang web tải nhanh. & NBSP;

Bootstrap có thể tác động tiêu cực đến tốc độ của trang web của bạn. Tại sao? Bởi vì nó nặng - không phải về KB, chính xác, nhưng về mức độ người dùng trung bình không sử dụng.

Bootstrap dưới 500kb. Bạn cũng có thể thực hiện một số bước để giảm trọng lượng đó và giảm thiểu tác động của nó đối với thời gian tải. Ví dụ: bạn có thể sử dụng các tệp CSS và JavaScript được thu nhỏ hoặc bạn chỉ tải xuống các tệp CSS, không phải các tệp JavaScript.

Nhưng ngay cả với các bước này, bootstrap vẫn có thể quá nặng cho những gì bạn cần. Hầu hết người dùng không cần tất cả các thành phần, tiện ích và plugin mà bootstrap đi kèm, vì vậy họ có thể cân nhắc trang web của bạn ngay cả khi chúng không được sử dụng. & NBSP;

4. Bạn không có thời gian để học và đọc qua tài liệu bootstrap.

Bootstrap được coi là một nền tảng dễ sử dụng. Nó cung cấp tài liệu rộng rãi cho mọi phần của khung của nó, từ bố cục đến nội dung đến các thành phần và hơn thế nữa. Điều đó có nghĩa là hầu như bất cứ ai cũng có thể học Bootstrap - điều đó cũng có nghĩa là sẽ mất thời gian để đọc qua tài liệu và tìm hiểu khung. Nếu bạn đang tìm cách xây dựng một trang web càng nhanh càng tốt, thì Bootstrap có thể không lý tưởng như các giải pháp khác, như các nhà xây dựng trang web. & NBSP;

5. Bạn muốn làm chủ HTML và CSS. & NBSP;

Sử dụng các thành phần và mẫu được thiết kế sẵn mà Bootstrap cung cấp giúp xây dựng một trang web dễ dàng và nhanh hơn-nhưng nó cũng có thể ngăn cản sự phát triển của bạn như một lập trình viên. Tạo với Bootstrap giống như sử dụng máy tính để thực hiện đại số: bạn có thể kết thúc với kết quả bạn muốn mà không hiểu hoàn toàn cách bạn có được nó. Đó là lý do tại sao thật tốt khi dành thời gian để tạo các thành phần tùy chỉnh của riêng bạn, ngay cả khi bạn cũng học và sử dụng Bootstrap. & NBSP;

Bây giờ chúng tôi đã hiểu Bootstrap CSS là gì và ai nên sử dụng nó, hãy để thảo luận ngắn gọn về các tùy chọn tải xuống khác nhau mà bạn có.

Cách tải xuống Bootstrap CSS

Trước khi chúng tôi đi qua quá trình tải xuống Bootstrap, điều quan trọng cần lưu ý là bạn có thể tải Bootstrap từ xa qua Bootstrapcdn hoặc JSDelivr thay vì tải xuống. Điều này sẽ yêu cầu khách truy cập có kết nối Internet để truy cập trang web của bạn và sẽ yêu cầu bạn đăng nhiều mã hơn. Kết quả là, tải xuống Bootstrap là lựa chọn phổ biến hơn.

Có hai hình thức bootstrap khác nhau có sẵn để tải xuống. Mỗi phiên bản-một phiên bản được biên dịch trước và mã nguồn-hấp dẫn người dùng khác nhau tùy thuộc vào việc họ ưu tiên dễ sử dụng hoặc linh hoạt. Hãy cùng xem xét kỹ hơn từng cái dưới đây.

Bootstrap được tổng hợp

Phiên bản được tổng hợp là hình thức bootstrap cơ bản nhất. Bạn sẽ tải xuống các tệp CSS và JS được biên dịch trước và các tệp CSS và JS được thu nhỏ dễ dàng trong gần như bất kỳ dự án web nào.

Sau khi tải xuống, bạn sẽ giải nén thư mục nén và xem cấu trúc sau.

bootstrap/

├── CSS/

& Nbsp; ├── Bootstrap-grid.css

& Nbsp; ├── Bootstrap-grid.css.map

& Nbsp; ├── Bootstrap-grid.min.css

& Nbsp; ├── Bootstrap-grid.min.css.map

& Nbsp; ├── Bootstrap-reboot.css

& Nbsp; Bootstrap-reboot.css.map

& Nbsp; ├── Bootstrap-reboot.min.css

& Nbsp; Bootstrap-reboot.min.css.map

& Nbsp; ├── Bootstrap.css

& Nbsp; ├── Bootstrap.css.map

& Nbsp; ├── Bootstrap.min.css

& Nbsp; └── Bootstrap.min.css.map

└── js/

& nbsp; & nbsp; & nbsp; & nbsp;

& nbsp; & nbsp; & nbsp; & nbsp;

& nbsp; & nbsp; & nbsp; & nbsp;

& nbsp; & nbsp; & nbsp; & nbsp;

& nbsp; & nbsp; & nbsp; & nbsp; ├── bootstrap.js

& nbsp; & nbsp; & nbsp; & nbsp;

& nbsp; & nbsp; & nbsp; & nbsp; ├── bootstrap.min.js

& nbsp; & nbsp; & nbsp; & nbsp;

Sử dụng phiên bản biên dịch dễ sử dụng hơn và nhanh hơn so với phiên bản mã nguồn - nhưng nó khó khăn hơn để tùy chỉnh. Bất kỳ thay đổi nào bạn muốn thực hiện cho một phần tử hoặc bố cục được tạo kiểu trước phải được áp dụng với ghi đè cho các kiểu hiện tại.

Nếu bạn muốn tùy chỉnh các tệp CSS và JS có trong Bootstrap theo cách bạn muốn, thì bạn sẽ tốt hơn khi tải xuống phiên bản mã nguồn.

Mã nguồn bootstrap

Phiên bản mã nguồn bao gồm các tài sản CSS, JS và phông chữ được biên dịch trước cũng như các tệp nguồn cho các phông chữ CSS, JS và ICON tương ứng.

Nếu bạn chọn tải xuống mã nguồn bootstrap, thì bạn sẽ giải nén thư mục và xem cấu trúc sau.

bootstrap/

├── Dist/

& Nbsp; ├── CSS/

& Nbsp; └── js/

├─ Địa điểm/

& Nbsp; └─hnsdocs/

& Nbsp; & nbsp; & nbsp; └── 4.6/

& Nbsp; & nbsp; & nbsp; & nbsp; & nbsp; └─ ─ Ví dụ/

├── js/

└── SCSS/

DIST/ thư mục chứa mọi thứ được liệt kê trong phần được biên dịch trước. Tài liệu/ thư mục bao gồm mã nguồn cho tài liệu bootstrap và ví dụ về việc sử dụng bootstrap. Thư mục JS/ chứa mã nguồn cho Bootstrap JS và SCSS/ thư mục cho Bootstrap CSS.

Vì phiên bản Bootstrap này yêu cầu bạn phải có autoprefixer và trình biên dịch SASS, quy trình thiết lập dài hơn và khó khăn hơn so với việc thiết lập phiên bản được biên dịch sẵn. Tuy nhiên, sau khi thiết lập, bạn có thể thay đổi và tùy chỉnh các tệp theo bất kỳ cách nào bạn muốn.

Mỗi phiên bản của Bootstrap là lý tưởng cho các trường hợp sử dụng khác nhau, nhưng vì bootstrap được biên dịch trước là đơn giản và nhanh hơn để sử dụng, chúng tôi sẽ tập trung vào phiên bản đó cho phần còn lại của bài đăng.

Dưới đây, hãy để xem xét cách bạn có thể sử dụng bootstrap được biên dịch trước để xây dựng một trang web.

Cách sử dụng Bootstrap CSS

Để sử dụng Bootstrap CSS, bạn cần tích hợp nó vào môi trường phát triển của mình. Để làm điều đó, bạn chỉ cần tạo một thư mục trên máy tính của bạn. Trong thư mục đó, hãy lưu các tệp CSS và JS đã biên dịch của bạn và tệp HTML mới nơi bạn sẽ tải Bootstrap. Sau đó, bạn có thể sử dụng các mẫu Bootstrap để thêm các thành phần giao diện vào trang.

Hãy để phá vỡ quá trình này từng bước.

Đang tải Bootstrap CSS và JS

Đầu tiên, tạo một thư mục trên máy tính của bạn có tên là Bootstrap. Di chuyển các tệp CSS đã biên dịch từ tải xuống Bootstrap của bạn vào thư mục đó. Nếu bạn cũng đang sử dụng phần JS của Bootstrap, hãy di chuyển các tệp JS được biên dịch vào thư mục.

Trong cùng một thư mục, hãy tạo một tệp khác và gọi nó là index.html. Mở tệp này với trình chỉnh sửa văn bản mà bạn chọn, như NotePad ++. Bạn có thể sao chép và dán mẫu HTML cơ bản trên trang web chính thức của Bootstrap vào tệp hoặc mã từ đầu.

Dưới đây là một ví dụ về trang HTML được mã hóa từ đầu.

Bây giờ bạn đã sẵn sàng để tải CSS Bootstrap vào dự án của bạn. Chỉ cần thêm dòng mã sau vào tiêu đề của tệp index.html, ngay trước thẻ.

Nếu bạn có kế hoạch chỉ sử dụng phần CSS của Bootstrap, thì bạn đã đặt tất cả.

Nếu bạn có kế hoạch sử dụng phần JS, thì bạn cần thêm hai dòng mã nữa. Các thành phần bao gồm cảnh báo, nút chuyển đổi, băng chuyền và thả xuống yêu cầu sử dụng JavaScript để hoạt động, vì vậy hãy tiếp tục các bước này nếu bạn muốn thêm bất kỳ yếu tố nào trong trang web của bạn.

Đầu tiên, bạn sẽ cần tải thư viện jQuery. Để làm như vậy, hãy tải jquery vào máy tính của bạn. Giải nén tệp và lưu nó trong thư mục Bootstrap, cùng với tệp CSS và JS đã biên dịch và tệp index.html.

Sau đó, bạn sẽ thêm dòng mã sau trong tệp index.html. Lần này, bạn sẽ thêm nó vào chân trang, thay vì tiêu đề, ngay sau thẻ.

Để tải Bootstrap JavaScript, hãy thêm dòng mã sau ngay sau cuộc gọi cho jQuery.

Khi bạn đã hoàn thành các bước này, đây là điều mà tệp index.html của bạn sẽ trông như thế nào:

Khi bạn lưu thư mục, bạn sẽ có một bố cục bootstrap cơ bản trông như thế này:

Điều này bây giờ có thể hoạt động như trang chủ của trang web của bạn.

Xây dựng một mẫu cơ bản

Để tiếp tục xây dựng trang này, bạn có thể thêm một thanh điều hướng, tiêu đề, chân trang, phông chữ glyphicon, favicon và các thành phần giao diện khác. Hãy cùng đi qua việc thêm một thành phần-một thanh điều hướng-từng bước để bạn hiểu cách sử dụng bootstrap.

Giả sử bạn muốn thêm một thanh Nav Bootstrap trông giống như thế này vào trang chủ:

Bây giờ một khách hàng tiềm năng có thể đến trang chủ của bạn và ngay lập tức tìm hiểu thêm về công ty của bạn, các tính năng của sản phẩm của bạn và giá cả của bạn - hoặc họ có thể tìm kiếm một cái gì đó khác.

Dưới đây là mã cho ví dụ điều hướng này.

Hãy cùng phá vỡ đoạn trích này vào các thành phần được hỗ trợ của nó: bảng màu, thương hiệu, người chuyển đổi, nav và hình thức.

Bảng màu

Hãy xem xét kỹ hơn dòng mã đầu tiên đó. Xem Navbar-Dark BG-Dark? Điều đó kêu gọi một màu nền tối. Nếu bạn thích một bảng màu sáng, hãy thay thế bằng đèn BG của Navbar-Light. Nó sẽ trông giống như sau:

Nhãn hiệu

Trong dòng mã thứ hai đó, xem Navbar-Brand? Chỉ định công ty, sản phẩm hoặc tên dự án của bạn. Chỉ cần thay thế Nav Navbar trước khi thẻ bằng tên chính xác.

Người chuyển đổi

Tiếp theo, bạn sẽ thấy một đoạn mã lớn biểu thị nút chuyển đổi. Nút này được ẩn trên máy tính để bàn. Nó chỉ xuất hiện trên thiết bị di động, khi nội dung của thanh điều hướng phải được thu gọn để phù hợp với màn hình nhỏ hơn.

Trong mã trên, kiểu Navbar-Toggler được xác định để tên thương hiệu hiển thị ở bên trái của màn hình di động và nút chuyển đổi ở bên phải. Nhấp vào nút sẽ tiết lộ nội dung bị thu gọn, như hiển thị bên dưới.

Nav

Trong bit tiếp theo của mã, xem Navbar-nav? Sử dụng thành phần con này, bạn có thể thêm các liên kết trong thanh điều hướng của mình. Bạn chỉ cần bao bọc lớp sửa đổi thích hợp (liên kết điều hướng) xung quanh từ bạn muốn siêu liên kết.

Hình thức

Bạn cũng có thể thêm một biểu mẫu, giống như hộp tìm kiếm, trong thanh điều hướng của bạn với thành phần phụ dòng dạng hình thức. Bạn có thể thấy bit mã này ở dưới cùng của mẫu ở trên.

Bây giờ bạn đã biết cách thêm tiêu đề điều hướng phản hồi của Bootstrap, với thương hiệu, điều hướng và hơn thế nữa, bạn có thể làm theo một quy trình tương tự để thêm các yếu tố khác vào trang. Hãy cùng xem một vài trong số những người dưới đây.

Bootstrap CSS Ví dụ

Bootstrap cung cấp các mẫu HTML và CSS, hoặc các ví dụ, để giúp bạn bắt đầu xây dựng trang web của mình một cách nhanh chóng. Mặc dù mã nguồn Bootstrap đi kèm với các ví dụ nâng cao hơn với các thành phần và bố cục tùy chỉnh thêm vào khung, chúng tôi sẽ tập trung vào các ví dụ sử dụng các thành phần tích hợp có sẵn trong cả hai phiên bản mã được biên dịch trước và tiền.

Chúng tôi đã chạm vào một vài ví dụ ở trên, bao gồm cả Navbar. Dưới đây chúng tôi sẽ xem xét kỹ hơn một vài ví dụ bổ sung.

Lưới bootstrap

Các hệ thống lưới CSS được sử dụng để tạo bố cục trang thông qua một loạt các hàng và cột nội dung nhà. Trong hệ thống lưới bootstrap, các hàng phải được đặt trong một .container (chiều rộng cố định) hoặc .container-fluid (toàn bộ chiều rộng) để định vị và đệm phù hợp. Các hàng này được sử dụng để tạo các nhóm cột ngang.

Vì Bootstrap là một hệ thống 12 cột, bạn sẽ phải chỉ định số lượng mười hai cột có sẵn mà bạn muốn kéo dài. Giả sử bạn muốn tạo ba cột có chiều rộng bằng nhau được tập trung trên trang trên các thiết bị ở mọi kích thước. Sau đó, bạn cần có ba cột bốn trong hai trong hai cột, được biểu thị bằng lớp .col-4. Dưới đây là ví dụ lưới đầy đủ.

 

  

  

    

      One of three columns
    

    

      One of three columns
    

    

      One of three columns
    

  

Trên mặt trước của trang web của bạn, nó sẽ giống như thế này trên thiết bị di động và máy tính để bàn.

Nhưng điều gì sẽ xảy ra nếu bạn muốn lưới xuất hiện một chiều trên máy tính để bàn và một cách khác trên điện thoại di động? Hãy nói rằng bạn muốn các cột xuất hiện cạnh nhau trên máy tính để bàn, nhưng xếp chồng lên nhau trên thiết bị di động.

Sau đó, bạn có thể chỉ định chiều rộng của các cột với tiền tố cho nhỏ. Điều này sẽ làm cho các cột rộng 100% cho đến khi điểm dừng nhỏ (576px). Dưới đây là ví dụ lưới đầy đủ.

 

  



One of three columns


One of three columns





One of three columns

Video dưới đây cho thấy nó sẽ trông như thế nào trên máy tính để bàn và sau đó thay đổi trên thiết bị di động.

Nguồn hình ảnh

Có nhiều lựa chọn khác bạn có thể chơi xung quanh. Sử dụng hệ thống lưới Bootstrap, bạn có thể tạo các cột có chiều rộng bằng nhau nhiều dòng. Bạn có thể đặt chiều rộng của một cột và có các cột anh chị em tự động thay đổi kích thước xung quanh nó. Bạn có thể kích thước các cột dựa trên chiều rộng tự nhiên của nội dung của chúng - và nhiều hơn nữa.

Cảnh báo bootstrap

Bạn có thể thêm cảnh báo vào trang web bootstrap của bạn để cung cấp các thông điệp quan trọng cho khách truy cập của bạn. Bootstrap cung cấp tám màu mặc định cho các thông báo cảnh báo. Ví dụ, hãy nói rằng bạn muốn thêm một cảnh báo để chỉ ra rằng khách truy cập đã tạo thành công một tài khoản chẳng hạn. Sau đó, bạn có thể sử dụng ví dụ dưới đây.

 

  

A simple success alert—check it out!

Nó sẽ trông như thế này trên mặt trước của trang web của bạn.

Nếu bạn đã tải các JS được biên dịch lên trang web của mình, bạn cũng có thể thêm một nút DISMISS để cho phép khách truy cập đóng cảnh báo sau khi họ đọc nó.

Nút bootstrap

Với Bootstrap, bạn có thể chọn từ một số kiểu nút được xác định trước để nhanh chóng thêm các nút vào các trang đích hoặc biểu mẫu trên trang web Bootstrap của bạn. Hãy nói rằng bạn muốn thêm một nút Thông tin trực tuyến vào trang web của bạn. Dưới đây là ví dụ và cách nó sẽ nhìn vào mặt trước.

 

  Info

Mặc dù các lớp .btn được thiết kế để sử dụng với phần tử, bạn cũng có thể sử dụng chúng trên các phần tử khác. Ví dụ, nếu bạn muốn biến một liên kết thành một nút, thì bạn có thể sử dụng mã bên dưới:

0

Hãy nói rằng tôi muốn thêm một nút vào trang web bootstrap của mình để khuyến khích khách truy cập tìm hiểu thêm về hoạt hình CSS, chẳng hạn. Sau đó, tôi có thể liên kết nút với một bài đăng trên blog về chủ đề này. Đây sẽ là mã:

1

Và đây là cách nó hoạt động trên trang web:

Nguồn hình ảnh

Bạn có thể thay đổi màu sắc, kích thước và các khía cạnh khác của nút của bạn bằng cách thêm các lớp sửa đổi thích hợp.

Bootstrap băng chuyền

Một băng chuyền là một trình chiếu để trình bày một loạt nội dung, cho dù đó là hình ảnh, văn bản hoặc đánh dấu tùy chỉnh. Trong thiết kế web, bạn có thể tạo một băng chuyền CSS thuần túy mà không cần JavaScript - hoặc bạn có thể sử dụng Bootstrap để tạo một. Trong bootstrap, băng chuyền được chế tạo với các biến đổi 3D CSS và một chút JavaScript. Sử dụng một ví dụ bootstrap, như cái dưới đây, có thể tăng tốc đáng kể quá trình mã hóa. & NBSP;

Ví dụ này là một băng chuyền chỉ có các slide và các điều khiển trước và tiếp theo. & NBSP;

2

Đây là cách nó sẽ nhìn vào mặt trước của trang web của bạn:

Bạn có thể đi qua quá trình phát triển từng bước trong cách tạo một thanh trượt băng chuyền cho trang web của bạn trong Bootstrap CSS. & NBSP;

Khi bạn đã hài lòng với bố cục của trang web của mình, bạn có thể muốn tùy chỉnh sự xuất hiện của các thành phần này và các thành phần bootstrap khác bằng cách thay đổi màu sắc, kích thước phông chữ, biên giới hoặc các kiểu bootstrap hiện có khác. Để làm như vậy, bạn có thể ghi đè các kiểu hiện có. Hãy cùng nhìn vào cách bên dưới.

Cách ghi đè Bootstrap CSS

Thay đổi kiểu dáng mặc định của Bootstrap CSS rất đơn giản. Tạo một tệp với trình soạn thảo văn bản của bạn và gọi nó là main.css. Ở đây, thêm bất kỳ thay đổi CSS tùy chỉnh nào bạn muốn thực hiện. Khi bạn đã hoàn thành, hãy lưu tệp này trong cùng một thư mục với tệp Bootstrap CSS và JS của bạn và tệp index.html. Sau đó, bạn chỉ cần thêm một dòng mã vào tiêu đề của tệp index.html của mình.

Hãy nhớ cách bạn đã thêm dòng mã sau vào tiêu đề của tệp index.html để tải Bootstrap CSS trên trang web của bạn?

3

Ngay bên dưới này, dán mã sau:

4

Điều này sẽ đảm bảo rằng bất kỳ CSS nào bạn thêm vào tệp Custom.css đều ghi đè lên các kiểu mặc định trong tệp index.html.

Cấu trúc của tệp index.html của bạn bây giờ sẽ trông như thế này:

5

Điều quan trọng cần lưu ý là quá trình ghi đè các kiểu CSS mặc định có thể hoạt động cho cả phiên bản Bootstrap và phiên bản mã nguồn. Tuy nhiên, sau này, bạn cũng có thể chỉnh sửa trực tiếp mã nguồn SASS Bootstrap nếu bạn có kinh nghiệm với SASS.

Vì nhiều người dùng không biết Sass, hãy để Lôi xem xét một ví dụ về chỉnh sửa bootstrap được biên dịch trước.

Chúng tôi sẽ bắt đầu với một bố cục đơn giản được tạo bởi nhà phát triển và nhà văn kỹ thuật Tania Rascia. Xây dựng mẫu HTML cơ bản được cung cấp bởi Bootstrap, cô đã thêm một thanh điều hướng, tiêu đề Jumbotron, lưới và glyphicons sử dụng các mẫu được gói trong khung. Kết quả sẽ được hiển thị dưới đây.

Nguồn hình ảnh

Bạn có thể thay đổi màu sắc, kích thước và các khía cạnh khác của nút của bạn bằng cách thêm các lớp sửa đổi thích hợp.

Bootstrap băng chuyền

6

Một băng chuyền là một trình chiếu để trình bày một loạt nội dung, cho dù đó là hình ảnh, văn bản hoặc đánh dấu tùy chỉnh. Trong thiết kế web, bạn có thể tạo một băng chuyền CSS thuần túy mà không cần JavaScript - hoặc bạn có thể sử dụng Bootstrap để tạo một. Trong bootstrap, băng chuyền được chế tạo với các biến đổi 3D CSS và một chút JavaScript. Sử dụng một ví dụ bootstrap, như cái dưới đây, có thể tăng tốc đáng kể quá trình mã hóa. & NBSP;

7

Ví dụ này là một băng chuyền chỉ có các slide và các điều khiển trước và tiếp theo. & NBSP;

8

Với những thay đổi này, cô ấy đã hoàn toàn biến đổi trang web bootstrap của mình. Hãy nhìn vào bên dưới.

Nguồn hình ảnh

Sử dụng ghi đè CSS, các tùy chọn tùy chỉnh hầu như vô hạn với Bootstrap. Bạn có thể duyệt qua Triển lãm Bootstrap để xem một số cách sử dụng sáng tạo nhất của Bootstrap.

Xây dựng trang web đáp ứng của bạn

Bootstrap là một khung phía trước mạnh mẽ để xây dựng và tùy chỉnh một trang web thân thiện với thiết bị di động. Với Bootstrap, bạn không phải bắt đầu từ đầu hoặc từ bỏ quyền kiểm soát sự xuất hiện của trang web của bạn. Bắt đầu khám phá khung này ngay bây giờ để xem nó có khả năng của nó bao nhiêu.

Tôi có cần CSS nếu tôi có bootstrap không?

Bootstrap có phải là một sự thay thế cho CSS không?

Tôi có nên sử dụng bootstrap hay CSS đơn giản không?