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ể
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
Pages
- Page 1
- Page 2
- Page 3
Pages
-
Page 1
-
Page 2
-
Page 3
3Trong trường hợp này, chúng tôi sẽ cung cấp cho
Pages
-
Page 1
-
Page 2
-
Page 3
2 thuộc tính CSS Pages
-
Page 1
-
Page 2
-
Page 3
5Bằ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.
Bootstrap Sidebar
Dummy Heading
-
Home
-
Home 1
-
Home 2
-
Home 3
-
About
-
Pages
-
Page 1
-
Page 2
-
Page 3
-
Portfolio
-
Contact
Làm cho danh sách thả xuống hoạt động
- Để làm cho menu thả xuống có thể thu gọn, bạn nên thêm
7 vào liên kết giữ menu thả xuốngPages
- Page 1
- Page 2
- Page 3
- Lưu ý rằng tôi cũng đã thêm
8 - lớp này thêm một hình tam giác nhỏ ở bên cạnh và giúp người dùng hiểu chức năng của nóPages
- Page 1
- Page 2
- Page 3
- Thuộc tính
9 của liên kết phải chứaPages
- Page 1
- Page 2
- Page 3
10 của menu thả xuống trước một hàm băm. Trong trường hợp này, tôi đã sử dụngPages
- Page 1
- Page 2
- Page 3
11Pages
- Page 1
- Page 2
- Page 3
- Bản thân trình đơn thả xuống cũng phải có lớp
12Pages
- Page 1
- Page 2
- Page 3
Pages
-
Page 1
-
Page 2
-
Page 3
Đảm bảo thêm
Pages
-
Page 1
-
Page 2
-
Page 3
13 vào thành phần kiểm soát của trình đơn thả xuống Pages
-
Page 1
-
Page 2
-
Page 3
14Thuộ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à
Pages
-
Page 1
-
Page 2
-
Page 3
15. Nếu bạn đã đặt phần tử có thể thu gọn thành mở, theo mặc định sử dụng lớp Pages
-
Page 1
-
Page 2
-
Page 3
16, thay vào đó, hãy đặt Pages
-
Page 1
-
Page 2
-
Page 3
17 trên điều khiểnBằ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ị
Pages
-
Page 1
-
Page 2
-
Page 3
18Nút chuyển đổi thanh bên
Bâ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
Pages
-
Page 1
-
Page 2
-
Page 3
1CSS
Bâ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
Pages
-
Page 1
-
Page 2
-
Page 3
2 div. Như tôi đã đề cập ở trên, giá trị Pages
-
Page 1
-
Page 2
-
Page 3
30 sẽ cân bằng cả nội dung trang và chiều cao của thanh bênPages
-
Page 1
-
Page 2
-
Page 3
3Sau đó, 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
Pages
-
Page 1
-
Page 2
-
Page 3
31 sẽ có chiều rộng còn lại của Pages
-
Page 1
-
Page 2
-
Page 3
2. [miễn là chúng tôi không sử dụng tài sản ______233]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,
Pages
-
Page 1
-
Page 2
-
Page 3
35 có nghĩa là thanh bên bị ẩn và chỉ có Pages
-
Page 1
-
Page 2
-
Page 3
36 khi thanh bên hiển thịNó sẽ có hành vi ngược lại trên điện thoại di động trong đó
Pages
-
Page 1
-
Page 2
-
Page 3
35 là khi thanh bên hiển thị và Pages
-
Page 1
-
Page 2
-
Page 3
36 bị ẩnLớp
Pages
-
Page 1
-
Page 2
-
Page 3
6 có giá trị âm Pages
-
Page 1
-
Page 2
-
Page 3
40 bằng với chiều rộng của thanh bênChúng ta cũng sẽ sử dụng lớp này sau trong phần JavaScript
Pages
-
Page 1
-
Page 2
-
Page 3
4Vì 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
Pages
-
Page 1
-
Page 2
-
Page 3
41. Pages
-
Page 1
-
Page 2
-
Page 3
42 là một đơn vị CSS dùng để chỉ chiều cao của khung nhìn. Đ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
Pages
-
Page 1
-
Page 2
-
Page 3
8danh sách thả xuống tạo kiểu
Chỉ 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
Pages
-
Page 1
-
Page 2
-
Page 3
43Lớ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
Pages
-
Page 1
-
Page 2
-
Page 3
0truy vấn phương tiện
Chú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
Pages
-
Page 1
-
Page 2
-
Page 3
6Pages
-
Page 1
-
Page 2
-
Page 3
2kiể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
...
0JavaScript
Ý tưởng ở đây là chuyển lớp
Pages
-
Page 1
-
Page 2
-
Page 3
6 sang thanh bên khi nhấp vào nút chuyển đổiTheo mặc định, thanh bên sẽ xuất hiện, tôi. e. nó vẫn chưa có lớp
Pages
-
Page 1
-
Page 2
-
Page 3
6. Sau khi nhấp vào nút chuyển đổi, thanh bên sẽ có một lớp
Pages
-
Page 1
-
Page 2
-
Page 3
6 và được đẩy ra khỏi màn hình. Nội dung trang cũng sẽ có chiều rộng toàn màn hìnhNhấp lại vào nút chuyển đổi sẽ xóa lớp
Pages
-
Page 1
-
Page 2
-
Page 3
6 và thanh bên xuất hiện lại. Và như thếChúng ta hãy xem mã
...
1Đ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
Pages- Page 1
- Page 2
- Page 3
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ế
Pages
-
Page 1
-
Page 2
-
Page 3
80 bằng Pages
-
Page 1
-
Page 2
-
Page 3
81.
...
3Tạ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ờ
JavaScript
Thủ 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
...
4Và tệp biểu định kiểu của nó cho phần tử
...
5Bây giờ, hãy khởi tạo plugin và sử dụng một số tùy chọn của nó
...
6Thủ 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
...
7Để làm rõ những gì chúng tôi đã làm ở đây.
Lớp
Pages
-
Page 1
-
Page 2
-
Page 3
16 chịu trách nhiệm mở menu thả xuống. Nếu danh sách thả xuống có thì nó đang mở, nếu không có thì nó đã đóngChú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ị
Pages
-
Page 1
-
Page 2
-
Page 3
13 từ Pages
-
Page 1
-
Page 2
-
Page 3
84 thành Pages
-
Page 1
-
Page 2
-
Page 3
85 để mũi tên quay trở lại hướng hợp lý của nóĐ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 dung
Theo 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
Pages- Page 1
- Page 2
- Page 3
Và vì chúng ta sẽ áp dụng một lớp phủ trong suốt, hãy chèn một
Pages
-
Page 1
-
Page 2
-
Page 3
87 div ở cuối trang của chúng ta cho mục đích đó
...
8CSS
Thanh 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ả
Pages
-
Page 1
-
Page 2
-
Page 3
87 và thanh bên sẽ xuất hiện phía trên nội dungHãy tưởng tượng nó là các lớp.
Nội dung trang sẽ là lớp phía sau,
Pages
-
Page 1
-
Page 2
-
Page 3
87 sẽ là lớp ở giữa với màu đen trong suốtLớ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
Pages
-
Page 1
-
Page 2
-
Page 3
00Như đã đề cập trước đây, chúng tôi cũng sẽ thêm nút __
Pages
-
Page 1
-
Page 2
-
Page 3
86 vào thanh bênNó sẽ được định vị tuyệt đối, ở phần trên cùng bên phải của nó
...
9JavaScript
Trong 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
Bootstrap Sidebar
Dummy Heading
-
Home
-
Home 1
-
Home 2
-
Home 3
-
About
-
Pages
-
Page 1
-
Page 2
-
Page 3
-
Portfolio
-
Contact
0Đâ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ĩnh
Trong 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
Home- Home 1
- Home 2
- Home 3
- Page 1
- Page 2
- Page 3
CSS
Thay 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
Pages
-
Page 1
-
Page 2
-
Page 3
6. 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
Bootstrap Sidebar
Dummy Heading
-
Home
-
Home 1
-
Home 2
-
Home 3
-
About
-
Pages
-
Page 1
-
Page 2
-
Page 3
-
Portfolio
-
Contact
2Truy vấn phương tiện truyền thông
Trê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ừ
Pages
-
Page 1
-
Page 2
-
Page 3
6 sang truy vấn phương tiện trên thiết bị di động của chúng tôi Pages
-
Page 1
-
Page 2
-
Page 3
04 và thêm chức năng _Pages
-
Page 1
-
Page 2
-
Page 3
40 vào truy vấn đóĐối với điện thoại di động, thanh bên
Pages
-
Page 1
-
Page 2
-
Page 3
35 sẽ có lề trái âm [nó sẽ nằm ngoài canvas] và Pages
-
Page 1
-
Page 2
-
Page 3
36 không có lớp Pages
-
Page 1
-
Page 2
-
Page 3
6 sẽ có Pages
-
Page 1
-
Page 2
-
Page 3
40 được đặt thành 0
Bootstrap Sidebar
Dummy Heading
-
Home
-
Home 1
-
Home 2
-
Home 3
-
About
-
Pages
-
Page 1
-
Page 2
-
Page 3
-
Portfolio
-
Contact
3JavaScript
Chú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
...
1Đó 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ữa
Luô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
Pages- Page 1
- Page 2
- Page 3
Bootstrap Sidebar
Dummy Heading
-
Home
-
Home 1
-
Home 2
-
Home 3
-
About
-
Pages
-
Page 1
-
Page 2
-
Page 3
-
Portfolio
-
Contact
5CSS
Tạo hoạt ảnh cho nút chuyển đổi
Trướ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
Pages
-
Page 1
-
Page 2
-
Page 3
21. Tôi thường sử dụng công cụ hoạt hình CSS này để tạo ra các hiệu ứng chuyển tiếp thú vị, bạn có thể chọn từ một số hiệu ứng chuyển tiếp dựng sẵn hoặc tạo hiệu ứng chuyển tiếp tùy chỉnh của mình một cách dễ dàng
Bootstrap Sidebar
Dummy Heading
-
Home
-
Home 1
-
Home 2
-
Home 3
-
About
-
Pages
-
Page 1
-
Page 2
-
Page 3
-
Portfolio
-
Contact
6Khi 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
Pages
-
Page 1
-
Page 2
-
Page 3
22 để đạt được điều đó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
Bootstrap Sidebar
Dummy Heading
-
Home
-
Home 1
-
Home 2
-
Home 3
-
About
-
Pages
-
Page 1
-
Page 2
-
Page 3
-
Portfolio
-
Contact
7Bằ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
Pages
-
Page 1
-
Page 2
-
Page 3
6 trên nút. Lớp này đặt lại vòng quay của các thanh và hiển thị tất cả chúng
Bootstrap Sidebar
Dummy Heading
-
Home
-
Home 1
-
Home 2
-
Home 3
-
About
-
Pages
-
Page 1
-
Page 2
-
Page 3
-
Portfolio
-
Contact
8Hoạt hình thanh bên
Bâ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
Pages
-
Page 1
-
Page 2
-
Page 3
24 vào vùng chứaContainer của chúng tôi, trong trường hợp này, là
Pages
-
Page 1
-
Page 2
-
Page 3
2. Thuộc tính Pages
-
Page 1
-
Page 2
-
Page 3
24 xác định số lượng pixel mà một phần tử 3D được đặt từ chế độ xem và cho phép bạn thay đổi phối cảnh về cách các phần tử 3D được xemSau đó, 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
Pages
-
Page 1
-
Page 2
-
Page 3
22Thuộc tính
Pages
-
Page 1
-
Page 2
-
Page 3
28 cho phép bạn thay đổi vị trí của các phần tử được biến đổi. Ở đây, chúng tôi sẽ xoay thanh bên từ phía giữa bên trái
Bootstrap Sidebar
Dummy Heading
-
Home
-
Home 1
-
Home 2
-
Home 3
-
About
-
Pages
-
Page 1
-
Page 2
-
Page 3
-
Portfolio
-
Contact
9Truy vấn phương tiện truyền thông
Trê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
Pages
-
Page 1
-
Page 2
-
Page 3
0JavaScript
Chúng tôi sẽ sử dụng jQuery để chuyển đổi lớp
Pages
-
Page 1
-
Page 2
-
Page 3
6 để chuyển đổi giữa trạng thái chéo và song songPages
-
Page 1
-
Page 2
-
Page 3
1Hãy cùng xem kết quả
Xem bản trình diễn
Sự kết luận
Tô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