Bootstrap là bộ công cụ mã nguồn mở cực kỳ phổ biến có chứa CSS, phông chữ và phần mở rộng JavaScript để giúp làm phong phú thêm các thành phần giao diện trên trang web hoặc ứng dụng Web. CSS đi kèm tăng cường và mở rộng các điều khiển giao diện tiêu chuẩn khi đi kèm với lệnh gọi đến các lớp CSS nhất định. Phông chữ từ Glyphicons. com được bao gồm trong bộ công cụ, với 180 biểu tượng mà bạn có thể sử dụng
Các tiện ích mở rộng JavaScript ở dạng trình cắm jQuery và cung cấp các phần tử giao diện bổ sung cùng với việc mở rộng chức năng của các phần tử giao diện tiêu chuẩn. Bộ công cụ bao gồm các tệp phân phối, mẫu, ví dụ và tất cả các tệp nguồn cần thiết để tiếp tục phát triển dựa trên bộ công cụ. Tuy nhiên, trong suốt bài viết này, tôi sẽ chỉ đề cập đến thư mục phân phối
Mặc dù tương thích với các phiên bản mới nhất của tất cả các trình duyệt chính, Bootstrap chỉ tương thích một phần với một số phiên bản trình duyệt cũ hơn vì bộ công cụ sử dụng các thuộc tính khác nhau chỉ khả dụng với các trình duyệt hỗ trợ CSS3. May mắn thay, điều này chỉ ảnh hưởng đến một số tiện ích mở rộng của bộ công cụ và không ảnh hưởng đến chức năng thực tế của chính các thành phần giao diện
Bootstrap cho phép hiển thị rõ ràng các trang web được cách điệu phong phú dù trên máy tính để bàn, máy tính bảng hay điện thoại di động. Do hỗ trợ thiết kế đáp ứng của Bootstrap, bố cục của các trang web sẽ tự động điều chỉnh dựa trên các đặc điểm của thiết bị. Với chức năng này có sẵn, thời gian để tạo một trang web hoàn chỉnh với sự hỗ trợ đầy đủ của thiết bị đã giảm đáng kể bằng cách loại bỏ nhu cầu phát triển phiên bản chỉ dành cho thiết bị di động của cùng một trang web
Thời gian để tạo một trang web hoàn chỉnh với sự hỗ trợ đầy đủ của thiết bị đã giảm đáng kể bằng cách loại bỏ nhu cầu phát triển phiên bản chỉ dành cho thiết bị di động của cùng một trang web
Các thành phần sau đây là một số thành phần giao diện cốt lõi có sẵn để sử dụng sau khi gắn Bootstrap vào trang web
Hệ thống lưới điện
Một trong những thành phần quan trọng nhất trong bộ công cụ Bootstrap, hệ thống lưới, cho phép căn chỉnh các cột trong các bộ phận với. lớp hàng. Được xác định theo loại thiết bị [di động, máy tính bảng, máy tính để bàn] để giúp tùy chỉnh khả năng phản hồi của bố cục trang web, độ dài của các cột này trong một hàng phải cộng lại bằng 12. Ví dụ sau định nghĩa một lưới gồm bốn cột có chiều rộng bằng nhau
Four columns
Column 1 content
Column 2 content
Column 3 content
Column 4 content
Được mô tả chi tiết ở phần sau của bài viết này, hệ thống lưới đã trải qua một bản cập nhật lớn trong Bootstrap 3. 0
kiểu chữ
Bootstrap bổ sung chức năng cho các điều khiển dựa trên văn bản HTML đã có nhưng cũng thêm các điều khiển dựa trên văn bản mới để nâng cao cách hiển thị văn bản. Các điều khiển dựa trên văn bản được thêm vào có trong bộ công cụ cho phép sửa đổi các kiểu phông chữ và mặc dù khả năng sử dụng của các đối tác dựa trên HTML không thay đổi, nhưng bạn nên sử dụng các điều khiển phông chữ mới này để Bootstrap có thể tạo kiểu cho chúng đúng cách. Ngoài ra, Bootstrap bao gồm các lớp để nhấn mạnh văn bản bằng màu sắc và căn chỉnh văn bản trong một điều khiển văn bản
Ví dụ sau đây, được thể hiện trong Hình 1, cho thấy một số lớp và điều khiển bổ sung này để nhấn mạnh và căn chỉnh văn bản theo những cách khác nhau
Fine print text
Bold text
Italicized text
Muted text
Primary text
Success Text
Info Text
Warning Text
Danger Text
Left aligned text.
Center aligned text.
Right aligned text.
Hình 1. Bạn có thể sử dụng màu sắc và căn chỉnh để nhấn mạnh văn bản
Hình thức
Các lớp liên quan đến biểu mẫu trong Bootstrap cho phép tạo nhóm và tạo kiểu rõ ràng khi yêu cầu nhập dữ liệu từ người dùng cuối. Bộ công cụ chứa ba loại biểu mẫu. cơ bản, ngang và nội tuyến
Ở dạng cơ bản, tất cả các điều khiển đầu vào dựa trên biểu mẫu có chiều rộng là 100% và có thể được nhóm lại với nhau để có khoảng trắng tối ưu trong nhóm. Không giống như biểu mẫu cơ bản, việc sử dụng biểu mẫu ngang làm cho nhãn mô tả và điều khiển đầu vào tồn tại trên cùng một dòng. Được cô đọng thành một dòng duy nhất, biểu mẫu nội tuyến là tối ưu để sử dụng khi giá trị bất động sản trên trang web khan hiếm. Ví dụ trong Liệt kê 1 sử dụng biểu mẫu nằm ngang và kết quả có thể được nhìn thấy trong Hình 2
Liệt kê 1. Sử dụng biểu mẫu ngang và chức năng
Email
Password
Remember me
Sign in
Hình 2. Biểu mẫu ngang cung cấp một cách nhanh chóng và nhất quán để tạo màn hình nhập dữ liệu.
nút
Bootstrap cung cấp các nút cách điệu để giúp phân biệt hành động của nhiều nút có thể xuất hiện trên trang web. Để sử dụng chức năng nút, thuộc tính lớp trong thẻ nút HTML phải chứa. btn cùng với kiểu nút mong muốn và kích thước nút tùy chọn. Ví dụ trong Liệt kê 2 cho thấy nhiều ví dụ sử dụng các kiểu dáng và kích thước khác nhau, và được thể hiện trong Hình 3
Liệt kê 2. Ví dụ mã về chức năng Nút của Bootstrap
Default
Primary
Success
Info
Warning
Danger
Link
Large button
Small button
Extra small button
Button
Hình 3. Chức năng nút Bootstrap giúp nhanh chóng thêm các nút vào biểu mẫu của bạn.
Hình ảnh
Các lớp định dạng ảnh Bootstrap giúp hiển thị ảnh theo các kiểu bố cục khác nhau. Ví dụ sau hiển thị biểu trưng Bootstrap trên một trang dưới dạng hình chữ nhật có các góc tròn, hình tròn và hình thu nhỏ. Ví dụ này được hiển thị trong một trình duyệt trong Hình 4
Home
Help
Dropdown
- Home
- Help
- Dropdown
Hình 6. Bạn có thể sử dụng điều hướng và thuốc để triển khai các tính năng điều hướng trang web
Bootstrap cho phép bất kỳ loại menu nào bao gồm menu thả xuống. Các menu thả xuống này giúp nhóm các mục menu tương tự lại với nhau thành một danh sách. Để xây dựng dựa trên ví dụ về mã Nav, ví dụ sau sẽ thay đổi mục menu đã tắt thành menu thả xuống
- Home
- Help
-
Dropdown
- Item 1
- Item 2
Để cho phép trình đơn thả xuống hoạt động bình thường, vị trí của mã JavaScript sau cần phải nằm bên dưới vị trí của bootstrap. js được tham chiếu trong trang web
________số 8Hình 7 hiển thị ví dụ mã trước đó cho menu thả xuống trong menu Điều hướng
Hình 7. Bạn có thể sử dụng trình đơn thả xuống để nhóm các mục lại với nhau
phương thức
Chức năng Phương thức đi kèm với Bootstrap cho phép người dùng thực hiện một hành động, chẳng hạn như nhấp vào nút, để hiển thị hộp thoại tương tác. Bất kỳ loại chức năng nào cũng có thể được điền vào hộp thoại này. Cho dù nó chứa điều khiển biểu mẫu, văn bản đơn giản hay bất kỳ loại điều khiển nào khác, Phương thức cung cấp một dạng quy trình công việc đẹp mắt thông qua một trang web. Liệt kê 3 hiển thị mã của phương thức được thấy trong Hình 8
Liệt kê 3. Ví dụ mã về chức năng Modal của Bootstrap
Launch modal
×
Modal title
Modal body text is displayed here
Close
Save changes
Hình 8. Sử dụng các phương thức để kiểm soát quy trình làm việc thông qua trang web của bạn.
Bây giờ, hãy xem một số điểm khác biệt giữa Bootstrap 2. x và Bootstrap 3
Bootstrap 3. Thay đổi đã đến
Bootstrap 3. 0 giới thiệu những thay đổi quan trọng. Một số thay đổi này có tác động mạnh hơn những thay đổi khác, tuy nhiên, bạn sẽ thực hiện một số công việc để nâng cấp trang web của mình từ phiên bản Bootstrap trước đó. Bootstrap 3 là một bản nâng cấp toàn diện, vì vậy đừng mong đợi bỏ vào biểu định kiểu mới và các tệp JavaScript và mọi thứ sẽ hoạt động như mong đợi. nó sẽ không
May mắn thay, có một số tài nguyên trên Web để trợ giúp quá trình di chuyển tự động-nhưng tôi đang vượt lên chính mình. Hãy bắt đầu bằng việc xem có gì mới và nó sẽ tác động như thế nào đến các trang Bootstrap hiện có của bạn
Bootstrap 3 là một bản nâng cấp toàn diện, vì vậy đừng mong đợi thả các tệp CSS và JavaScript mới vào và mọi thứ sẽ hoạt động như mong đợi. nó sẽ không
Điện thoại di động đầu tiên
Thay đổi quan trọng nhất không phải là kỹ thuật mà là thay đổi trong quan điểm thiết kế. Bootstrap 3 áp dụng phương pháp thiết kế Web đáp ứng "di động đầu tiên" làm chủ đề quan trọng trong toàn bộ khung
Điện thoại di động đầu tiên có nghĩa là chính xác những gì được nói. Đó là một sự thay đổi mô hình tập trung vào việc thiết kế giao diện người dùng cho màn hình di động nhỏ hơn trước khi thiết kế nó cho màn hình máy tính để bàn lớn hơn. Thay vì cố gắng lấy một thiết kế dành cho máy tính để bàn và thu nhỏ, ép và nén nó xuống cho màn hình di động, trước tiên, thiết bị di động sẽ lật ngược mọi thứ và làm điều ngược lại. Bạn có không gian hạn chế trên màn hình điện thoại thông minh, vì vậy, trước tiên, điện thoại di động khiến bạn tập trung vào thiết kế đưa nội dung quan trọng và quan trọng nhất lên màn hình nhỏ đó. Ví dụ: khi kích thước màn hình tăng lên thành màn hình máy tính bảng, thiết kế của bạn sẽ phát triển và bắt đầu chứa nhiều nội dung và thông tin hơn. Khi kích thước màn hình đạt tối đa trên màn hình máy tính để bàn lớn, thiết kế của bạn chứa tất cả nội dung và thông tin cho trang. Việc áp dụng phương pháp ưu tiên trên thiết bị di động có nghĩa là không còn phải tạo các phiên bản dành cho máy tính để bàn và thiết bị di động của cùng một trang
Điện thoại di động đầu tiên có nghĩa là chính xác những gì được nói. Đó là một sự thay đổi mô hình tập trung vào việc thiết kế giao diện người dùng cho màn hình di động nhỏ hơn trước khi thiết kế nó cho màn hình máy tính để bàn lớn hơn
Mặc dù việc áp dụng phương pháp ưu tiên thiết bị di động là tính năng mới trong Bootstrap 3, nhưng các tính năng thiết kế đáp ứng tồn tại trong các phiên bản trước, nhưng chúng yêu cầu thêm tệp
Email
Password
Remember me
Sign in
5. Yêu cầu đó không còn với Bootstrap 3 vì tất cả các lớp và kiểu đáp ứng được bao gồm trong tệp
Email
Password
Remember me
Sign in
6 cốt lõi. Điều này có nghĩa là các phần tử của trang Web như hộp văn bản, đoạn văn, nút, hình ảnh, v.v. sẽ tự động chia tỷ lệ dựa trên kích thước của vùng xem từ màn hình điện thoại thông minh nhỏ, đến máy tính bảng kích thước nhỏ và kích thước đầy đủ, đến màn hình máy tính để bàn lớn hơn. Trước khi bạn hỏi, vâng, bạn có thể tắt khả năng đáp ứng nếu bạn cần tạo một trang có chiều rộng cố địnhBắt Bootstrap 3
Trang bắt đầu [
Email
Password
Remember me
Sign in
7] cung cấp một số cách khác nhau để tải Bootstrap 3. Đơn giản nhất là tải xuống phiên bản đã biên dịch và rút gọn, bao gồm CSS, JavaScript và phông chữ. Bạn cũng có thể tải xuống các tệp nguồn mới nhất từ GitHub hoặc Clone/fork phiên bản của riêng bạn từ GitHubChuẩn bị các trang của bạn sẵn sàng cho Bootstrap 3
Tất cả những gì bạn cần làm là thêm thẻ meta
Email
Password
Remember me
Sign in
8 vào thẻ của mình để đảm bảo tính năng hiển thị và thu phóng cảm ứng hoạt động bình thường________số 8Sử dụng lưới mới
Hệ thống lưới mới nổi bật là thay đổi rõ ràng nhất trong Bootstrap 3, vì vậy tôi sẽ bắt đầu với hệ thống đó trước. Đã qua rồi cái thời làm việc với lưới ở chế độ cột có chiều rộng cố định hoặc ở chế độ linh hoạt, đáp ứng. Lưới mới linh hoạt, lấy thiết bị di động làm trung tâm đầu tiên và dựa trên tỷ lệ phần trăm. Điều này có nghĩa là thay vì làm việc với lưới có chiều rộng cố định [940 pixel], giờ đây bạn làm việc với lưới được thiết kế với bố cục dựa trên thiết bị di động và sau đó mở rộng mọi thứ từ đó
Hãy cùng xem những thay đổi bạn cần thực hiện trong mã HTML của mình. Trong các phiên bản trước, các hàng được chỉ định bằng lớp
Email
Password
Remember me
Sign in
9 hoặc lớp
Default
Primary
Success
Info
Warning
Danger
Link
Large button
Small button
Extra small button
Button
0 cho lưới và cột linh hoạt mà bạn đã xác định bằng tiền tố lớp
Default
Primary
Success
Info
Warning
Danger
Link
Large button
Small button
Extra small button
Button
1. Mười hai đã và vẫn là con số kỳ diệu mà các lớp span phải cộng lại
Fine print text
Bold text
Italicized text
Muted text
Primary text
Success Text
Info Text
Warning Text
Danger Text
Left aligned text.
Center aligned text.
Right aligned text.
1Lưới Bootstrap 3 linh hoạt 100% và chỉ yêu cầu sử dụng lớp
Email
Password
Remember me
Sign in
9. Cấu trúc 12 cột từ các phiên bản trước vẫn được giữ nguyên nhưng các cột không cố định chiều rộng. Thay vì tiền tố
Default
Primary
Success
Info
Warning
Danger
Link
Large button
Small button
Extra small button
Button
1 trên các lớp cột, giờ đây bạn sử dụng một trong bốn tiền tố lớp cột dành riêng cho thiết bị mới. Các lớp cột mới này cung cấp hỗ trợ cho điện thoại thông minh, máy tính bảng, máy tính để bàn và máy tính để bàn lớn. Bảng 1 liệt kê các tùy chọn lưới cho từng kích thước màn hình bao gồm chiều rộng vùng chứa, chiều rộng cột tối đa và tiền tố lớp CSS để sử dụng với từngHãy xem một lưới mẫu có ba cột có chiều rộng bằng nhau. Các cột được xác định bằng tiền tố lớp
Default
Primary
Success
Info
Warning
Danger
Link
Large button
Small button
Extra small button
Button
4 để các cột xuất hiện trên trang cho màn hình 970 pixel trở lên và được xếp chồng lên nhau trên các thiết bị nhỏ hơn
Fine print text
Bold text
Italicized text
Muted text
Primary text
Success Text
Info Text
Warning Text
Danger Text
Left aligned text.
Center aligned text.
Right aligned text.
2Hình 9 minh họa đoạn mã trên trông như thế nào trong trình duyệt máy tính để bàn
Hình 9. Cột lưới hiển thị theo chiều ngang trên màn hình rộng
Hình 10 hiển thị giao diện của cùng một mã trong điện thoại thông minh. Lưu ý không có máng xối ở hai bên của các cột xếp chồng lên nhau
Hình 10. Cột lưới xếp chồng lên nhau trên màn hình điện thoại thông minh
Độ lệch cột cũng đã thay đổi trong Bootstrap 3. Bạn sẽ cần thay thế bất kỳ tham chiếu lớp
Default
Primary
Success
Info
Warning
Danger
Link
Large button
Small button
Extra small button
Button
5 nào bằng lớp
Default
Primary
Success
Info
Warning
Danger
Link
Large button
Small button
Extra small button
Button
6 mới
Fine print text
Bold text
Italicized text
Muted text
Primary text
Success Text
Info Text
Warning Text
Danger Text
Left aligned text.
Center aligned text.
Right aligned text.
3Các cột lồng nhau đã thay đổi trong Bootstrap 3. Bootstrap 2. x cột lồng nhau được thêm vào số lượng cột trong khoảng lưu trữ. Trong đoạn mã bên dưới, hai cột lồng nhau của
Default
Primary
Success
Info
Warning
Danger
Link
Large button
Small button
Extra small button
Button
7 và
Default
Primary
Success
Info
Warning
Danger
Link
Large button
Small button
Extra small button
Button
8 cộng lại thành hàng chính với
Default
Primary
Success
Info
Warning
Danger
Link
Large button
Small button
Extra small button
Button
9
Fine print text
Bold text
Italicized text
Muted text
Primary text
Success Text
Info Text
Warning Text
Danger Text
Left aligned text.
Center aligned text.
Right aligned text.
4Trong Bootstrap 3, các cột lồng nhau cần cộng tối đa 12 chứ không phải số cột trong khoảng lưu trữ như trong Bootstrap 2. x. Trong đoạn mã bên dưới, các cột lồng nhau có tổng bằng 12 chứ không phải 9 như mã Bootstrap 2
Fine print text
Bold text
Italicized text
Muted text
Primary text
Success Text
Info Text
Warning Text
Danger Text
Left aligned text.
Center aligned text.
Right aligned text.
5Nhiều mảnh và bộ phận mới
Bootstrap 3 chỉ có một số thành phần thực sự mới vì trọng tâm chủ yếu là các tính năng thiết kế phẳng và ưu tiên thiết bị di động. Có một số lớp mới triển khai mô hình thiết kế ưu tiên thiết bị di động. Bảng 2 liệt kê các phần tử mới, cả thành phần và lớp. Có một vài thành phần mới mà bạn sẽ muốn tự làm quen, cụ thể là Bảng điều khiển, Nhóm danh sách và Jumbotron
tấm
Bảng điều khiển là vùng chứa mà bạn đặt nội dung vào đó. Đơn giản nhất, chúng áp dụng đường viền và phần đệm cơ bản xung quanh nội dung của bạn. Hình 11 cho bạn ý tưởng về chức năng của bảng điều khiển mới. Các bảng được triển khai với lớp bắt đầu là
0, tiếp theo là các lớp định dạng và loại bổ sungHình 11. Sử dụng Bảng điều khiển để nhóm và sắp xếp nội dung
Các bảng có thể có một tiêu đề và một phần chân trang
Fine print text
Bold text
Italicized text
Muted text
Primary text
Success Text
Info Text
Warning Text
Danger Text
Left aligned text.
Center aligned text.
Right aligned text.
6Các lớp
1 bổ sung có sẵn để tùy chỉnh thêm giao diện của thành phần bảng điều khiển dựa trên loại sử dụng mà bạn có trong đầu
Fine print text
Bold text
Italicized text
Muted text
Primary text
Success Text
Info Text
Warning Text
Danger Text
Left aligned text.
Center aligned text.
Right aligned text.
7Liệt kê 4 chứa mã đã tạo ra trang mà bạn đã thấy trong Hình 11
Liệt kê 4. Ví dụ mã về chức năng Thành phần Bảng điều khiển của Bootstrap
Fine print text
Bold text
Italicized text
Muted text
Primary text
Success Text
Info Text
Warning Text
Danger Text
Left aligned text.
Center aligned text.
Right aligned text.
8Liệt kê các nhóm
Nhóm danh sách cung cấp cách hiển thị danh sách giống như thiết bị di động. Bạn triển khai chúng với lớp
2 và các mục liên quan của lớp
3
Fine print text
Bold text
Italicized text
Muted text
Primary text
Success Text
Info Text
Warning Text
Danger Text
Left aligned text.
Center aligned text.
Right aligned text.
9Hình 12 cho bạn ý tưởng về chức năng của thành phần nhóm danh sách mới
Hình 12. Nhóm danh sách cung cấp các mục danh sách để chọn
Lớp huy hiệu thêm khả năng thêm huy hiệu vào bên phải của mục nhóm danh sách
Email
Password
Remember me
Sign in
0Hình 13 hiển thị một nhóm danh sách có huy hiệu
Hình 13. Thêm Huy hiệu vào Nhóm danh sách để cung cấp thông tin về các mục trong danh sách
Danh sách sẽ là gì nếu các mục không được liên kết với thứ gì khác?
Email
Password
Remember me
Sign in
1Bạn không bị giới hạn ở HTML đơn giản trong một nhóm danh sách. Các lớp bổ sung cho phép bạn tùy chỉnh thêm nội dung của từng nhóm danh sách với các lớp để tùy ý đánh dấu một mục cụ thể là đang hoạt động, thêm tiêu đề mục, chân trang và văn bản mục
Email
Password
Remember me
Sign in
2Hình 14 hiển thị một nhóm danh sách tận dụng các khả năng phức tạp hơn của thành phần nhóm danh sách. Liệt kê 5 hiển thị mã được sử dụng để tạo trang trong Hình 14
Liệt kê 5. Ví dụ về mã của Thành phần nhóm danh sách Bootstrap và chức năng HTML phức tạp của nó
Email
Password
Remember me
Sign in
3Hình 14. Nhóm danh sách có thể hiển thị thông tin ngoài tiêu đề mục danh sách đơn giản.
Jumbotron
Lớp
4 mới thay thế Bootstrap 2. x lớp
5. Giống như lớp
5, bạn sử dụng lớp
4 để hiển thị nội dung được đánh dấu trên trang web của mình. Jumbotron khác với lớp
5 ở chỗ nó cung cấp một lớp chứa giới hạn chiều rộng của jumbotron. Việc bỏ qua lớp vùng chứa sẽ khiến jumbotron trải dài toàn bộ chiều rộng của khung nhìn của bạn. Đoạn mã sau làm nổi bật sự khác biệt giữa các lớp
5 và
4
Email
Password
Remember me
Sign in
4Phần lớn các thay đổi trong Bootstrap 3 xoay quanh các thay đổi về lớp được thực hiện để hỗ trợ ưu tiên thiết bị di động và mô hình thiết kế đáp ứng
Các hình thức
Một điểm cập nhật trong các lớp liên quan đến biểu mẫu là các điều khiển nhập trường hiện được mặc định có chiều rộng là 100%. Điều này được thực hiện để đảm bảo rằng các biểu mẫu nhập dữ liệu trông chính xác trên thiết bị di động