Bootstrap thu gọn thanh điều hướng 5 bên
|
Thực tế, có ba cách để bạn có thể tạo thanh bên bootstrap 3. Tôi đã cố gắng giữ mã đơn giản nhất có thể Show
Tại đây, bạn có thể xem bản trình diễn thanh bên cố định đơn giản mà tôi đã phát triển với cùng chiều cao với trang Tôi cũng đã phát triển một thanh bên cột khá đơn giản hoạt động trong trang hai hoặc ba cột bên trong vùng chứa. Nó chiếm chiều dài của cột dài nhất. Ở đây bạn có thể thấy một bản demo Nếu bạn google bảng điều khiển bootstrap, bạn có thể tìm thấy nhiều bảng điều khiển phù hợp, chẳng hạn như bảng điều khiển này. Tuy nhiên, hầu hết trong số họ yêu cầu rất nhiều mã hóa. Tôi đã phát triển một trang tổng quan hoạt động mà không cần thêm javascript (bên cạnh javascript bootstrap). Đây là một bản trình diễn Đối với cả ba ví dụ, tất nhiên bạn phải bao gồm jquery, bootstrap css, js và theme. tập tin css Nếu bạn muốn thanh bên ẩn khi nhấn nút, điều này cũng có thể thực hiện được chỉ với một chút javascript. Đây là một bản trình diễn Hôm nay tôi muốn chỉ cho bạn cách tạo điều hướng thanh bên HTML có thể thu gọn bằng Bootstrap 4 với một số CSS và jQuery Vì Bootstrap 4 và Bootstrap 3 không cung cấp bất kỳ menu thanh bên nào nên chúng tôi sẽ xây dựng 5 giải pháp riêng biệt. Mỗi người trong số họ sẽ có các tính năng và thiết kế hơi khác nhau, vì vậy bạn có thể chọn một cái phù hợp với nhu cầu của mình. Trong mỗi phần của hướng dẫn, tôi sẽ hướng dẫn bạn từng bước tất cả các bước cần thiết trong HTML, CSS và JavaScript  Chúng ta sẽ xây dựng 5 thanh bên như thế này Đây là những gì chúng ta sẽ xây dựng Nguồn tải xuống Bản trình diễn số 1 Bản trình diễn số 2 Bản trình diễn số 3 Bản trình diễn số 4 Bản trình diễn - Phần bổ sung Ban đầu, tôi đã xuất bản hướng dẫn này cho Bootstrap 3 vào năm 2017 Vào năm 2018, tôi đã nâng cấp nó lên Bootstrap 4 và thực hiện các cải tiến bổ sung dựa trên phản hồi của bạn vào năm 2020. Tuy nhiên, phiên bản Bootstrap 3 cũng là một phần của quá trình tải xuống, trong trường hợp bạn cần nó tập tin cơ bảnTrước khi đi sâu vào mã hóa, trước tiên chúng ta nên thiết lập mẫu bắt đầu của mình với tất cả các tệp cần thiết Trong tất cả bốn mẫu thanh bên mà chúng ta sẽ xem xét hôm nay, chúng ta sẽ cần các tệp CSS và JS Bootstrap 4, thư viện jQuery và biểu định kiểu tùy chỉnh của chúng ta Ngoài ra, tôi bao gồm Phông chữ Tuyệt vời 5 sẽ được sử dụng trên các nút và mục menu trong một ví dụ Vì vậy, đánh dấu khởi động của chúng tôi sẽ như sau 1. Menu thanh bên có thể thu gọn tĩnhTrong phần này, chúng ta sẽ xây dựng một thanh bên đáp ứng Bootstrap 4 đơn giản cuộn theo chiều dọc của trang. HTMLCấu trúc tài liệu cơ bảnChúng tôi sẽ bọc mọi thứ trong div Trong trường hợp này, chúng tôi sẽ cung cấp cho Bằng cách này, điều hướng thanh bên sẽ lấy chiều cao của nội dung trang. Khi nội dung tăng lên, chiều cao của thanh bên cũng tự động tăng lên Menu thanh bên và nội dung của nóBây giờ, hãy lấp đầy thanh bên của chúng tôi bằng một số nội dung Tôi sẽ đặt ở đó một menu điều hướng thanh bên chứa một số liên kết điều hướng demo và cả menu thả xuống Bootstrap 4 Lưu ý rằng chúng tôi cũng đã thêm một lớp _______16 vào mục đầu tiên để đánh dấu rằng đó là mục menu hiện đang hoạt động, tôi. e. trang trên trang web. Làm cho danh sách thả xuống hoạt động
Đảm bảo thêm Thuộc tính này xác định rõ ràng trạng thái hiện tại của phần tử có thể thu gọn đối với trình đọc màn hình và các công nghệ hỗ trợ tương tự Nếu phần tử có thể thu gọn được đóng theo mặc định, thì phần tử đó phải có giá trị là Bằng cách nhấp vào neo, danh sách thả xuống sẽ trượt lên hoặc trượt xuống theo giá trị Nút chuyển đổi thanh bênBây giờ là lúc để thêm nút chuyển đổi thanh bên. Nút này sẽ xử lý việc mở và đóng thanh bên Chúng tôi sẽ đặt nó bên ngoài thanh bên. Không quan trọng nó nằm ở đâu trong nội dung của bạn, miễn là nó nằm ngoài thanh bên, tôi. e. có thể nhìn thấy tất cả các thời gian Hãy đặt nó vào thanh điều hướng Bootstrap trong div nội dung CSSBây giờ là lúc áp dụng một số kiểu dáng cho thanh bên của chúng ta Điều quan trọng nhất đối với phương pháp này là sử dụng thuộc tính flex cho Sau đó, chúng tôi sẽ cung cấp cho thanh bên chiều rộng cố định là 250px. Do sử dụng thuộc tính flexbox, nội dung trang Sau đó, chúng ta sẽ sử dụng độ rộng của sidebar để đẩy phần tử ra khỏi màn hình khi không cần dùng đến. Hành vi này sẽ được áp dụng khi thanh bên có lớp _______16 Xin lỗi tôi đã không nghĩ ra một tên lớp tốt hơn khi tôi viết hướng dẫn này vào năm 2017 Trên máy tính để bàn, Nó sẽ có hành vi ngược lại trên điện thoại di động trong đó Lớp Chúng ta cũng sẽ sử dụng lớp này sau trong phần JavaScript Vì chúng tôi không biết liệu nội dung có lấp đầy toàn bộ màn hình theo chiều dọc hay không, nên chúng tôi sẽ đặt chiều cao tối thiểu của thanh bên thành Điều này có nghĩa là chiều cao ban đầu của thanh bên ít nhất sẽ bằng chiều cao màn hình. Ngoài ra, chiều cao của nó sẽ tăng lên khi nội dung trang tăng lên danh sách thả xuống tạo kiểuChỉ cần chạm nhẹ vào trình đơn thả xuống Bootstrap 4 Chúng tôi đang sử dụng lớp Bootstrap 4 tiêu chuẩn Lớp này thêm một hình tam giác nhỏ bên cạnh các liên kết thả xuống Để thống nhất giao diện của liên kết, chúng tôi sẽ di chuyển hình tam giác, thường nằm bên cạnh văn bản, sang phần bên phải của thanh bên bằng mã CSS sau truy vấn phương tiệnChúng tôi sẽ cần hành vi hơi khác cho thanh bên trên màn hình nhỏ hơn. Thay vì xuất hiện theo mặc định, nó sẽ bị ẩn và chỉ xuất hiện sau khi nhấp vào nút chuyển đổi Như vậy, chúng tôi sẽ tiết kiệm không gian quý giá cho nội dung của bạn và chỉ hiển thị điều hướng cho người dùng khi cần Về cơ bản, điều chúng ta cần làm ở đây là đảo ngược kiểu kiểu dáng bổ sungĐây sẽ là tất cả những gì liên quan đến kiểu dáng CSS cần thiết để làm cho thanh bên của bạn hoạt động. Để cho nó trông lạ mắt hơn, tôi đã tạo kiểu cho nó nhiều hơn một chút Tất cả đã được bao gồm trong gói tải xuống, vì vậy tôi sẽ chỉ đề cập nhanh ở đây mà không có bất kỳ bình luận nào thêm JavaScriptÝ tưởng ở đây là chuyển lớp Theo mặc định, thanh bên sẽ xuất hiện, tôi. e. nó vẫn chưa có lớp Sau khi nhấp vào nút chuyển đổi, thanh bên sẽ có một lớp Nhấp lại vào nút chuyển đổi sẽ xóa lớp Chúng ta hãy xem mã Điều này hoàn thành ví dụ đầu tiên của chúng tôi, hãy xem những gì chúng tôi đã xây dựng Xem bản trình diễn 2. Đã sửa lỗi thanh bên có thể cuộn được định vịTrong phần này, chúng tôi sẽ tạo một thanh bên tương tự nhưng nó sẽ được sửa. Điều này có nghĩa là nó sẽ không cuộn theo trang mà sẽ cố định ở cùng một vị trí. Điều này sẽ chỉ áp dụng cho các thiết bị lớn hơn có chiều rộng khung nhìn là 768px+. Toàn bộ trang cũng sẽ phản hồi HTMLCách tiếp cận trong ví dụ này tương tự như điều hướng thanh bên trước đó, do đó chúng tôi có thể sử dụng lại mã trước đó đánh dấu của chúng tôi nên như sau CSSVì chúng tôi cần một thanh bên có chiều cao cố định, chúng tôi sẽ loại bỏ thuộc tính Tuy nhiên, nội dung mở rộng, thanh bên vẫn sẽ chiếm toàn bộ chiều cao của chế độ xem. Đối với điều này, chúng tôi sẽ thay thế Tại thời điểm này, chúng tôi đã hoàn thành tất cả các sửa đổi CSS Chúng tôi sẽ thêm hai thủ thuật bổ sung trong JavaScript, hãy xem chúng ngay bây giờ JavaScriptThủ thuật đầu tiên là tôi sẽ thay thế thanh cuộn mặc định của trình duyệt trong menu bên bằng thanh tùy chỉnh Chúng tôi sẽ cần thanh cuộn xuất hiện chỉ trong trường hợp điều hướng quá cao để vừa với chế độ xem Vì mục đích này, tôi sẽ sử dụng trình cuộn nội dung tùy chỉnh jQuery Trước tiên hãy thêm tệp JS của nó vào tệp HTML của chúng tôi Và tệp biểu định kiểu của nó cho phần tử Bây giờ, hãy khởi tạo plugin và sử dụng một số tùy chọn của nó Thủ thuật thứ hai mà chúng tôi sẽ sử dụng là tôi sẽ thu nhỏ các menu thả xuống đang mở khi thanh bên đóng lại Lý do cho việc này là để giữ cho mọi thứ nhất quán và mở một thanh điều hướng với các danh sách thả xuống đóng mỗi lần Để làm rõ những gì chúng tôi đã làm ở đây. Lớp Chúng tôi đã nói với JavaScript của mình rằng nếu có lớp này, vui lòng xóa nó. Ngoài ra, vui lòng thay đổi giá trị Điều này làm cho điều hướng thanh bên cố định của chúng tôi hoàn tất. Hãy xem những gì chúng tôi đã xây dựng Xem bản trình diễn 3. Đã sửa lỗi menu thanh bên có thể cuộn với lớp phủ nội dungTheo cách tiếp cận này, chúng ta sẽ tạo thanh điều hướng bên tương tự như thanh điều hướng mà Google sử dụng cho thanh điều hướng trên máy tính bảng và điện thoại di động trong thiết kế Vật liệu. Thanh bên sẽ bao phủ phần bên trái của nội dung trang khi mở và phần còn lại của nội dung sẽ được bao phủ bởi lớp phủ trong suốt màu tối HTMLChúng tôi sẽ sử dụng cùng một mã đánh dấu ở trên và thêm nút Và vì chúng ta sẽ áp dụng một lớp phủ trong suốt, hãy chèn một CSSThanh bên sẽ có một vị trí cố định ở phần bên trái của màn hình và nội dung sẽ luôn chiếm toàn màn hình Theo mặc định, thanh bên sẽ bị ẩn Khi nhấp vào nút chuyển đổi, cả Hãy tưởng tượng nó là các lớp. Nội dung trang sẽ là lớp phía sau, Lớp phủ sẽ bao phủ nội dung của trang để cho phép mắt người dùng dễ dàng tập trung vào chính thanh bên Cuối cùng, thanh bên sẽ là lớp phía trước Để đạt được hành vi phân lớp này, chúng ta chỉ cần sử dụng thuộc tính Như đã đề cập trước đây, chúng tôi cũng sẽ thêm nút __ Nó sẽ được định vị tuyệt đối, ở phần trên cùng bên phải của nó JavaScriptTrong hai thanh bên trước, chức năng của nút chuyển đổi là mở/đóng thanh bên Ở đây, chúng tôi đã chèn một nút đóng vào thanh bên của chúng tôi, vì vậy chức năng của nút chuyển đổi chỉ để mở thanh bên Để làm rõ cơ chế, bằng cách nhấp vào nút chuyển đổi, cả lớp phủ và thanh bên đều xuất hiện và bằng cách nhấp vào nút đóng thanh bên, cả lớp phủ và thanh bên sẽ biến mất Đây chính là nó Thời gian để kiểm tra bản demo Xem bản trình diễn 4. Thu gọn một phần thanh bên Bootstrap tĩnhTrong ví dụ này, thay vì xây dựng một thanh bên thu gọn hoàn toàn, chúng tôi sẽ xây dựng một thanh điều hướng bên thu gọn một phần. Menu bên sẽ tự chuyển đổi thành phiên bản nén sau khi nhấp vào nút chuyển đổi Hãy sử dụng đánh dấu của ví dụ đầu tiên làm điểm bắt đầu HTMLĐể nâng cao hơn nữa, chúng tôi sẽ chèn một biểu tượng vào mỗi liên kết điều hướng Chúng tôi sẽ sử dụng Font Awesome cho các biểu tượng trong menu bên. CSSThay vì đẩy thanh bên hoàn toàn ra khỏi màn hình, chúng ta sẽ chỉ thu nhỏ chiều rộng của nó và định kiểu lại nội dung của nó để phù hợp với chiều rộng mới này Các kiểu của phiên bản nén sẽ được thêm vào lớp Ví dụ: chúng tôi sẽ thu nhỏ kích thước phông chữ của văn bản neo, căn chỉnh nó vào giữa và làm cho nó hiển thị bên dưới biểu tượng Ngoài ra, chúng tôi sẽ di chuyển mũi tên xuống dưới cùng của mỗi neo hoặc điều chỉnh phần đệm xung quanh các liên kết thả xuống Mã sẽ như sau Truy vấn phương tiện truyền thôngTrên các màn hình nhỏ hơn, chúng tôi sẽ giữ phiên bản nén làm trạng thái hoạt động mặc định của thanh bên. Tôi. e. , phiên bản không nén sẽ hoàn toàn không được sử dụng trên điện thoại di động và phiên bản nén sẽ hiển thị sau khi nhấp vào nút chuyển đổi Để đạt được điều này, chúng tôi chỉ có thể sao chép các kiểu từ Đối với điện thoại di động, thanh bên JavaScriptChúng tôi sẽ không bao gồm bất kỳ dòng JavaScript bổ sung nào và chúng tôi sẽ chỉ sử dụng chức năng tương tự đã sử dụng trong thanh bên đầu tiên Đó sẽ là tất cả cho bây giờ. Chúng ta nên có một thanh bên thu gọn một phần hoạt động tốt Hãy cùng xem kết quả Xem bản trình diễn Cải tiến hơn nữaLuôn có chỗ cho những cải tiến và chỉnh sửa hơn nữa Như một phần thưởng, tôi muốn chỉ cho bạn cách chuẩn bị biểu tượng menu hamburger động cho nút chuyển đổi, đồng thời cách thêm hoạt ảnh bắt mắt để mở và đóng bảng điều khiển thanh bên HTMLMột lần nữa, tôi sẽ sử dụng thanh bên đơn giản từ ví dụ đầu tiên làm cơ sở Nhưng thay vì sử dụng Glyphicon cho nút chuyển đổi, thay vào đó, hãy đặt ba CSSTạo hoạt ảnh cho nút chuyển đổiTrước tiên, hãy thêm một số kiểu cho nút và các thanh của nó Sẽ có ba thanh bên dưới nhau và chúng tôi sẽ tạo cho chúng một hiệu ứng chuyển tiếp lạ mắt với một hiệu ứng chuyển tiếp Khi thanh bên mở, các thanh nút chuyển đổi sẽ bị gạch chéo. Khi nó ra khỏi canvas, các thanh sẽ song song với nhau Theo mặc định, thanh bên sẽ được mở, vì vậy trạng thái ban đầu của các thanh sẽ được gạch chéo. Chúng tôi sẽ sử dụng thuộc tính Thanh đầu tiên sẽ được xoay 45 độ, thanh cuối cùng sẽ được xoay 45 độ theo hướng ngược lại. Thanh thứ hai sẽ được ẩn tại thời điểm này Bằng cách nhấp vào nút, các thanh sẽ chuyển sang trạng thái song song. Để đạt được điều đó, chúng ta sẽ sử dụng jQuery để chuyển đổi lớp Hoạt hình thanh bênBây giờ, hãy thêm hoạt ảnh CSS 3D vào thanh bên Chúng tôi sẽ tạo hoạt ảnh mở cửa khi người dùng đóng hoặc mở thanh bên Trước hết, chúng ta nên thêm thuộc tính Container của chúng tôi, trong trường hợp này, là Sau đó, chúng tôi sẽ xoay thanh bên theo chiều dọc 100 độ trong khi thu gọn bằng cách sử dụng thuộc tính Thuộc tính Truy vấn phương tiện truyền thôngTrên màn hình nhỏ hơn, thanh bên sẽ được thu gọn theo mặc định Trạng thái mặc định của menu hamburger sẽ được trả về trạng thái song song. Để đạt được điều này, chúng ta nên chuyển các quy tắc CSS từ chế độ xem tiêu chuẩn JavaScriptChúng tôi sẽ sử dụng jQuery để chuyển đổi lớp Hãy cùng xem kết quả Xem bản trình diễn Sự kết luậnTôi hy vọng hướng dẫn này đã giúp bạn hiểu cách thêm thanh bên Bootstrap vào dự án của bạn. Nếu bạn thích bài viết - hãy cho bạn bè của bạn biết về nó Nếu bạn thích hướng dẫn Bootstrapious này, hãy xem hướng dẫn của tôi về Cách tạo biểu mẫu liên hệ hoặc thanh điều hướng Bootstrap Làm cách nào để thu gọn thanh điều hướng bootstrap 5?Để tạo thanh điều hướng có thể thu gọn, hãy sử dụng nút có class="navbar-toggler", data-bs-toggle="collapse" và data-bs-target=" . .
Làm cách nào để làm cho thanh bên phản hồi trong bootstrap 5?Cách sử dụng. . Tạo HTML cho điều hướng thanh bên. . Thêm nút chuyển đổi menu vào nội dung chính của bạn. . Các kiểu chính cho điều hướng thanh bên. . JavaScript cần thiết để bật điều hướng thanh bên Bootstrap 5 có thanh bên không?Bây giờ Bootstrap 5 có thành phần Offcanvas 👏, bạn nên khám phá việc xây dựng Thanh bên Bootstrap 5. Thanh bên thường được sử dụng để điều hướng theo chiều dọc, nhưng chúng thực sự có thể được sử dụng cho bất kỳ nội dung nào nằm ngoài nội dung chính.
Làm cách nào để đặt hai nội dung thu gọn thanh điều hướng trong cùng một dòng?Gói cả #nabar-mid-collapse và #navbar-rt-collapse trong div với lớp row-fluid và áp dụng lớp col-xs-4 (*hoặc bất kỳ lớp nào tương ứng. col theo chiều rộng bạn cần cho từng mục *) cho cả hai. Không có dòng chất lỏng trong Bootstrap 3 |
