Bắt đầu bằng cách bao gồm CSS và JavaScript sẵn sàng sản xuất của Bootstrap thông qua CDN mà không cần bất kỳ bước xây dựng nào. Xem nó trong thực tế với bản demo Bootstrap CodePen này
Tạo một tệp
4 mới trong thư mục gốc của dự án của bạn. Bao gồm cả thẻ
5 để có hành vi phản hồi phù hợp trong thiết bị di độngBootstrap demo Hello, world!Bao gồm CSS và JS của Bootstrap. Đặt thẻ
5 vào CSS của chúng tôi và thẻ
5Bạn cũng có thể bao gồm Popper và JS của chúng tôi một cách riêng biệt. Nếu bạn không định sử dụng danh sách thả xuống, cửa sổ bật lên hoặc chú giải công cụ, hãy tiết kiệm một số kilobyte bằng cách không bao gồm Popper
Chào thế giới. Mở trang trong trình duyệt bạn chọn để xem trang Bootstrapped của bạn. Giờ đây, bạn có thể bắt đầu xây dựng với Bootstrap bằng cách tạo bố cục của riêng mình, thêm hàng chục thành phần và sử dụng các ví dụ chính thức của chúng tôi
Để tham khảo, đây là các liên kết CDN chính của chúng tôi
Mô tảURLCSS
Bạn cũng có thể sử dụng CDN để tìm nạp bất kỳ bản dựng bổ sung nào của chúng tôi được liệt kê trong trang Nội dung
Bước tiếp theo
thành phần JS
Tò mò không biết thành phần nào yêu cầu JavaScript và Popper của chúng tôi một cách rõ ràng? . Nếu bạn hoàn toàn không chắc chắn về cấu trúc trang chung, hãy tiếp tục đọc mẫu trang mẫu
Hiển thị các thành phần yêu cầu JavaScript- Cảnh báo sa thải
- Các nút để chuyển trạng thái và chức năng hộp kiểm/radio
- Băng chuyền cho tất cả các hành vi, điều khiển và chỉ báo của trang trình bày
- Thu gọn để chuyển đổi mức độ hiển thị của nội dung
- Danh sách thả xuống để hiển thị và định vị [cũng yêu cầu Popper]
- Các phương thức để hiển thị, định vị và hành vi cuộn
- Thanh điều hướng để mở rộng các plugin Thu gọn và Offcanvas của chúng tôi để triển khai các hành vi phản hồi
- Điều hướng với plugin Tab để chuyển đổi bảng nội dung
- Offcanvases để hiển thị, định vị và hành vi cuộn
- Scrollspy cho hành vi cuộn và cập nhật điều hướng
- Chúc mừng để hiển thị và loại bỏ
- Chú giải công cụ và cửa sổ bật lên để hiển thị và định vị [cũng yêu cầu Popper]
Toàn cầu quan trọng
Bootstrap sử dụng một số kiểu và cài đặt toàn cầu quan trọng, tất cả đều hầu như chỉ hướng đến việc chuẩn hóa các kiểu trình duyệt chéo. Hãy đi sâu vào
loại tài liệu HTML5
Bootstrap yêu cầu sử dụng loại tài liệu HTML5. Không có nó, bạn sẽ thấy một số kiểu dáng ngộ nghĩnh và không đầy đủ
...
Bootstrap được phát triển trên thiết bị di động trước, một chiến lược trong đó chúng tôi tối ưu hóa mã cho thiết bị di động trước rồi sau đó mở rộng quy mô các thành phần khi cần bằng truy vấn phương tiện CSS. Để đảm bảo hiển thị phù hợp và thu phóng cảm ứng cho tất cả các thiết bị, hãy thêm thẻ meta chế độ xem đáp ứng vào của bạn
Bạn có thể xem một ví dụ về điều này đang hoạt động trong phần bắt đầu nhanh
kích thước hộp
Để định cỡ đơn giản hơn trong CSS, chúng tôi chuyển giá trị toàn cầu
Trong trường hợp hiếm hoi, bạn cần ghi đè lên nó, hãy sử dụng một cái gì đó như sau
.selector-for-some-widget {
box-sizing: content-box;
}
Với đoạn mã trên, các phần tử lồng nhau—bao gồm cả nội dung được tạo thông qua
Tìm hiểu thêm về mô hình hộp và kích thước tại Thủ thuật CSS
khởi động lại
Để cải thiện khả năng hiển thị trên nhiều trình duyệt, chúng tôi sử dụng Khởi động lại để sửa lỗi không nhất quán giữa các trình duyệt và thiết bị đồng thời cung cấp các cài đặt lại có chủ ý hơn một chút cho các thành phần HTML phổ biến
Luôn cập nhật về sự phát triển của Bootstrap và tiếp cận cộng đồng với những tài nguyên hữu ích này
Như vậy trong bài viết này mình đã hướng dẫn cách làm sao để có thể tạo kiểu lại các nút radio, tương tự như vậy các bạn hãy thử làm với hộp kiểm để xem mình hiểu bài viết nhé. Cảm ơn các bạn đã đọc bài viết của mình
Khi học HTML, CSS chắc các bạn sẽ gặp nhiều vấn đề, đang muốn thử một tính năng rất gì đó và cái này cơ mà đăng lên nhóm hỏi mọi người, không biết làm sao ngoài cách phải up code lên đống nhìn rối không,
nghiên cứu tìm kiếm thì thấy có các trang cho phép đặt mã trực tuyến và chạy trên đó luôn, hỗ trợ đầy đủ các ngôn ngữ về Frontend như HTML CSS SASS LESS LESS JavaScript, thư viện các kiểu với giao diện dễ nhìn, dễ sử dụng và . Và nổi bật một số trang mã trực tuyến đó chính là Codepen
# Codepen là gì?
CodePen là nền tảng phát triển mã trực tuyến. Nó cho phép bạn viết mã trong trình duyệt và xem kết quả trực tuyến. Một trình soạn thảo mã trực tuyến hữu ích cho tập trung chủ yếu vào các ngôn ngữ về phía Frontend như HTML, CSS, JavaScript và các thư viện cũng như các Preprocessing như Sass, Less, TypeScript để hỗ trợ cho các ngôn ngữ đó
# Hướng dẫn tạo tài khoản miễn phí
Để tạo tài khoản, các bạn truy cập vào trang codepen. io rồi sau đó các bạn nhấn vào nút Đăng ký như hình
Sau đó, bạn có thể đăng ký tài khoản với các trang mạng xã hội như Twitter, Facebook hay là Github hoặc là đăng ký với Email cũng được
Việc đăng ký rất đơn giản, nếu các bạn đăng ký với các trang mạng xã hội thì cấp quyền là xong, rồi tự động đăng nhập luôn sau đó. Còn nếu các bạn đã đăng ký với Email thì các bạn sẽ điền các thông tin như Tên, Email, Tên người dùng và Mật khẩu vào rồi sau đó nhấn Gửi là được
Sau đó nó sẽ hiện ra trang thông tin cho phép các bạn nhập địa chỉ ,giới thiệu và ảnh đại diện. Các bạn có thể cập nhật hoặc không cũng không sao rồi sau đó nhấn Lưu và gửi để hoàn thành
tada. Ta has results
"Mã dễ đọc" là như thế nào?
15 trò chơi miễn phí giúp bạn luyện mã mỗi ngày
# Hướng dẫn sử dụng
Để tạo một cây bút mới, bạn hãy nhấn vào chữ Pen như hình
tại thời điểm này, chúng tôi sẽ có một giao diện mới như hình bao gồm các tab chính là HTML, CSS và JS. Nút Lưu để lưu, nút Cài đặt để thiết lập cài đặt, nút Thay đổi chế độ xem để mã hóa cấu trúc giao diện mã, bên trái là biểu tượng bút để sửa tiêu đề của Bút
Ở Codepen khi bạn viết mã HTML thì chỉ đơn giản là mã thứ hai trong thẻ
Các bạn muốn code SCSS, LESS trong CSS hay PUG trong HTML hay TypeScript trong JS thì các bạn cũng vào Setting rồi chọn mục tương ứng như HTML, CSS và JS lần lượt là
Ngoài ra còn có tab Behavior ở đây cho phép các bạn thiết lập sử dụng Tab hay là Spaces tuỳ theo mã của mỗi người. Và còn có thêm 2 lựa chọn khác là Autosave nghĩa là tự động lưu khi bạn đang code và Auto-Updating Preview nghĩa là khi bạn code tới đâu UI nó sẽ cập nhật tới thẻ ví dụ đó
Ngoài ra còn có các thiết lập khác như chỉnh sửa kiểu chữ khi mã, chủ đề hiển thị cho đẹp, chủ đề tối hay là sáng, kích thước chữ, emmet khi nhấn tab sẽ tự động sinh ra mã… Các bạn có thể thiết lập . Các bạn có thể tùy chỉnh theo ý thích hoặc để thiết lập mặc định cũng được nhé
Sau khi các bạn viết mã xong một Bút và lưu lại, để xem danh sách các Bút mà các bạn đã làm thì các bạn vào mục Dashboard nhé. Nó sẽ hiển thị ra danh sách cho các bạn như dưới đây
Ngoài ra sau khi các bạn code xong, các bạn muốn chia sẻ cho người khác xem thì các bạn copy đường dẫn phía trên thanh url có dạng codepen/username/sdaffjiuewrkjlz rồi đi chia sẻ là xong. Dưới đây là một ví dụ về Codepen mà mình code để các bạn tham khảo nha
# Kết luận
Như vậy là mình đã nói sơ qua về Codepen cho các bạn cũng như hướng dẫn các bạn cách đăng ký tài khoản với Codepen, giới thiệu sơ lược về khả năng mạnh mẽ của Codepen là gì, cách tạo Pen đơn giản cũng như là . Hi vọng với những kiến thức cơ bản này sẽ giúp ích cho các bạn trong việc định hướng trở thành 1 Frontend-Developer thực thụ nhé