Nhóm nút – btn-group responsive bootstrap 4

27 Tháng Sáu, 2022 Bởi ads_php

Nhóm một loạt các nút lại với nhau trên một dòng với nhóm nút và tăng sức mạnh cho chúng bằng JavaScript.

Bạn đang xem : bootstrap đáp ứng btn-group 4

Nhóm nút

Nhóm một loạt các nút lại với nhau trên một dòng với nhóm nút và tăng sức mạnh cho chúng bằng JavaScript.

Ví dụ cơ bản

Gói một loạt các nút bằng . btn trong . btn-group . Thêm hành vi kiểu hộp kiểm và radio JavaScript tùy chọn với plugin nút của chúng tôi .

   & lt; div 
  class = 
  "btn-group" 
  role = 
  "group" 
  aria-label = 
  "Ví dụ cơ bản" 
  & gt; 
   & lt; button 
  type = 
  "button" 
  class = 
 " btn btn-Secondary "
  & gt; 
 Còn lại  & lt ; / nút & gt; 
   & lt; button 
  type = 
  "button" 
  class = 
 " btn btn-Secondary "
  & gt; 
 Middle  & lt ; / nút & gt; 
   & lt; button 
  type = 
  "button" 
  class = 
 " btn btn-Secondary "
  & gt; 
 Phải  & lt ; / nút & gt; 
 & lt; / div & gt;

Đảm bảo đúng `role` và cung cấp nhãn

Để các công nghệ hỗ trợ (chẳng hạn như trình đọc màn hình) truyền tải rằng một loạt các nút được nhóm lại, cần cung cấp thuộc tính role thích hợp. Đối với nhóm nút, đây sẽ là role = "group" , trong khi các thanh công cụ phải có role = "toolbar" .


 Ngoài ra, các nhóm và thanh công cụ phải được gắn nhãn rõ ràng vì hầu hết các công nghệ hỗ trợ sẽ không thông báo chúng, mặc dù có thuộc tính vai trò chính xác. Trong các ví dụ được cung cấp ở đây, chúng tôi sử dụng  aria-label , nhưng các lựa chọn thay thế như  aria-labellingby  cũng có thể đã qua sử dụng. 
 Thanh công cụ nút 
 Kết hợp các nhóm nút thành thanh công cụ nút cho các thành phần phức tạp hơn. Sử dụng các lớp tiện ích nếu cần để xóa các nhóm, nút và hơn thế nữa. 



   & lt; div 
  class = 
  "btn-toolbar" 
  role = 
  "toolbar" 
  aria-label = 
  "Thanh công cụ với các nhóm nút" 
  & gt; 
   & lt; div 
  class = 
  "btn-group mr-2" 
 < p class = "na"> role = 
  "group" 
  aria-label = 
 " Nhóm đầu tiên "
  & gt; 
     & lt; button 
  type = 
  "button" 
  class = 
 " btn btn-Secondary "
  & gt; 
 1  & lt ; / nút & gt; 
     & lt; button 
  type = 
  "button" 
  class = 
 " btn btn-Secondary "
  & gt; 
 2  & lt ; / nút & gt; 
     & lt; button 
  type = 
  "button" 
  class = 
 " btn btn-Secondary "
  & gt; 
 3  & lt ; / nút & gt; 
     & lt; button 
  type = 
  "button" 
  class = 
 " btn btn-Secondary "
  & gt; 
 4  & lt ; / nút & gt; 
   & lt; / div & gt; 
   & lt; div 
  class = 
  "btn-group mr-2" 
 < p class = "na"> role = 
  "group" 
  aria-label = 
 " Nhóm thứ hai "
  & gt; 
     & lt; button 
  type = 
  "button" 
  class = 
 " btn btn-Secondary "
  & gt; 
 5  & lt ; / nút & gt; 
     & lt; button 
  type = 
  "button" 
  class = 
 " btn btn-Secondary "
  & gt; 
 6  & lt ; / nút & gt; 
    Nút  & lt;
  type = 
  "button" 
  class = 
  "btn btn-Secondary" 
  & gt; 
 7  & lt; / button & gt; 
   & lt; / div & gt; 
   & lt; div 
  class = 
  "btn-group" 
  role = 
  "group" 
  aria-label = 
  " Nhóm thứ ba "
  & gt; 
     & lt; button 
  type = 
  "button" 
  class = 
 " btn btn-Secondary "
  & gt; 
 8  & lt ; / nút & gt; 
   & lt; / div & gt; 
 & lt; / div & gt; 
  
 Hãy kết hợp các nhóm đầu vào với các nhóm nút trong thanh công cụ của bạn. Tương tự như ví dụ trên, bạn có thể sẽ cần một số tiện ích để sắp xếp mọi thứ đúng cách. 

 @ 

 @ 
   & lt; div 
  class = 
  "btn-toolbar mb-3" 
  role = 
  "toolbar" 
  aria -label = 
  "Thanh công cụ với các nhóm nút" 
  & gt; 
   & lt; div 
  class = 
  "btn-group mr-2" 
 < p class = "na"> role = 
  "group" 
  aria-label = 
 " Nhóm đầu tiên "
  & gt; 
     & lt; button 
  type = 
  "button" 
  class = 
 " btn btn-Secondary "
  & gt; 
 1  & lt ; / nút & gt; 
     & lt; button 
  type = 
  "button" 
  class = 
 " btn btn-Secondary "
  & gt; 
 2  & lt ; / nút & gt; 
     & lt; button 
  type = 
  "button" 
  class = 
 " btn btn-Secondary "
  & gt; 
 3  & lt ; / nút & gt; 
     & lt; button 
  type = 
  "button" 
  class = 
 " btn btn-Secondary "
  & gt; 
 4  & lt ; / nút & gt; 
   & lt; / div & gt; 
   & lt; div 
  class = 
  "input-group" 
  & gt; 
     & lt; div 
  class = 
  "input-group-prepend" 
  & gt; 
       & lt; div 
  class = 
  "input-group-text" 
  id = 
  "btnGroupAddon" 
  & gt; 
 @  & lt; / div & gt; 
     & lt; / div & gt; 
     & lt; input 
  type = 
  "text" 
  class = 
 " form-control "
  placeholder = 
 " Nhóm đầu vào ví dụ "
  aria-label = 
 " Ví dụ về nhóm đầu vào "
  aria-descriptionby = 
  "btnGroupAddon" 
  & gt; 
   & lt; / div & gt; 
 & lt; / div & gt; 

 & lt; div 
  class = 
  "btn-toolbar justify-content-between"  
 role = 
  "thanh công cụ" 
  aria-label = 
  "Thanh công cụ có nhóm nút" 
  & gt; 
   & lt; div 
  class = 
  "btn-group" 
  role = 
  "group" 
  aria-label = 
  " Nhóm đầu tiên "
  & gt; 
     & lt; button 
  type = 
  "button" 
  class = 
 " btn btn-Secondary "
  & gt; 
 1  & lt ; / nút & gt; 
     & lt; button 
  type = 
  "button" 
  class = 
 " btn btn-Secondary "
  & gt; 
 2  & lt ; / nút & gt; 
     & lt; button 
  type = 
  "button" 
  class = 
 " btn btn-Secondary "
  & gt; 
 3  & lt ; / nút & gt; 
     & lt; button 
  type = 
  "button" 
  class = 
 " btn btn-Secondary "
  & gt; 
 4  & lt ; / nút & gt; 
   & lt; / div & gt; 
   & lt; div 
  class = 
  "input-group" 
  & gt; 
     & lt; div 
  class = 
  "input-group-prepend" 
  & gt; 
       & lt; div 
  class = 
  "input-group-text" 
  id = 
  "btnGroupAddon2" 
  & gt; 
 @  & lt; / div & gt; 
     & lt; / div & gt; 
     & lt; input 
 type = 
  "text" 
  class = 
  "form-control" 
  placeholder = 
  "Ví dụ về nhóm đầu vào" 
  aria -label = 
  "Ví dụ về nhóm đầu vào" 
  aria-descriptionby = 
  "btnGroupAddon2 "
  & gt; 
   & lt; / div & gt; 
 & lt; / div & gt; 
  
 Định cỡ 
 Thay vì áp dụng các lớp định cỡ nút cho mọi nút trong nhóm, chỉ cần thêm . btn-group- *  vào mỗi  .btn-group , bao gồm mỗi nhóm khi lồng nhiều nhóm. 





   & lt; div 
  class = 
  "btn-group btn-group-lg" 
  role = 
  "group" 
  aria-label = 
  "..." 
  & gt; 
 ...  & lt; / div & gt; 
 & lt; div 
  class = 
  "btn-group" 
  role = 
  "group" 
  aria-label = 
  " ... "
  & gt; 
 ...  & lt; / div & gt; 
 & lt; div 
  class = 
  "btn-group btn-group-sm"  
 role = 
  "group" 
  aria-label = 
  "..." 
  & gt; 
 ...  & lt; / div & gt; 
  

 Làm tổ 
 Đặt . btn-group  trong một . btn-group  khi bạn muốn kết hợp các menu thả xuống với một loạt các nút. 
 Liên kết thả xuống 

 Liên kết thả xuống 
   & lt; div 
  class = 
  "btn-group" 
  role = 
  "group" 
  aria-label = 
  "Nhóm nút có menu thả xuống lồng nhau" 
  & gt; 
   & lt; button 
  type = 
  "button" 
  class = 
 " btn btn-Secondary "
  & gt; 
 1  & lt ; / nút & gt; 
   & lt; button 
  type = 
  "button" 
  class = 
 " btn btn-Secondary "
  & gt; 
 2  & lt ; / nút & gt; 

   & lt; div 
  class = 
  "btn-group" 
  role = 
  "group" 
  & gt; 
     & lt; button 
  id = 
  "btnGroupDrop1" 
  type = 
 " button "
  class = 
 " btn btn-Secondary dropdown-toggle "
  data-toggle = 
 " dropdown "
  aria-haspopup = 
  "true" 
  aria-expand = 
  "false"  
 & gt; 
      Trình đơn thả xuống
     & lt; / button & gt; 
     & lt; div 
  class = 
  "menu thả xuống" 
  aria-labellingby = 
  "btnGroupDrop1" 
  & gt; 
       & lt; a 
  class = 
  "dropdown-item" 
  href = 
  "#" 
  & gt; 
 Liên kết thả xuống  & lt ; / a & gt; 
       & lt; a 
  class = 
  "dropdown-item" 
  href = 
  "#" 
  & gt; 
 Liên kết thả xuống  & lt ; / a & gt; 
     & lt; / div & gt; 
   & lt; / div & gt; 
 & lt; / div & gt; 
  
 Biến thể dọc 
 Làm cho một tập hợp các nút xuất hiện được xếp chồng lên nhau theo chiều dọc thay vì theo chiều ngang.  Trình đơn thả xuống nút tách không được hỗ trợ ở đây.  

   & lt; div 
  class = 
  "btn-group-vertical" 
  & gt; 
  ...
 & lt; / div & gt;




Xem thêm những thông tin liên quan đến chủ đề btn-group responsive bootstrap 4
Button Group - Bootstrap 5 Alpha Responsive Web Development and Design




Tác giả: Sonar Systems
Ngày đăng: 2020-07-30
Đánh giá: 4 ⭐ ( 4631 lượt đánh giá )
Khớp với kết quả tìm kiếm: ⭐ Kite is a free AI-powered coding assistant that will help you code faster and smarter. The Kite plugin integrates with all the top editors and IDEs to give you smart completions and documentation while you’re typing. I've been using Kite for 6 months and I love it! https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=sonarsystems&utm_content=description-only
Bootstrap 5 Source Code: https://github.com/SonarSystems/Bootstrap-5-Tutorial-Source-Code
Bootstrap 5 Website: https://v5.getbootstrap.com/docs/5.0/getting-started/introduction/
Bootstrap Button Group API: Button group
Discord: https://discordapp.com/invite/Qn4tSPD
This video has been made with Fair Use in mind and has been created as an educational piece of media.
Like our content and want to support us more directly? Help Us, Help You! https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=6DF2Q8TR5FB3E
bootstrap sonarsystems snrsys
If you like this stuff, as always, show the love through comments, likes, favorites, subscriptions, etc. 
Tens of thousands of free videos at
www.sonarlearning.co.uk
If you have any questions feel free to post them at
http://www.sonarlearning.co.uk/questions.php
Our Website
http://www.sonarsystems.co.uk/
Facebook - https://www.facebook.com/pages/Sonar-Systems/581403125243822
Twitter - https://twitter.com/SonarSystems
Google+ - https://plus.google.com/+SonarsystemsCoUk/
Donate - https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=6DF2Q8TR5FB3E
Our games made with love
------------------------------------------------------
iOS: https://itunes.apple.com/us/artist/sonar-systems/id672545941
Google Play: https://play.google.com/store/apps/developer?id=Sonar+Systems
Check out our books:
Cocos2d-x - https://www.packtpub.com/game-development/cocos2d-x-game-development-essentials
Bootstrap 4 - https://www.packtpub.com/web-development/responsive-web-design-example-0
OpenGL - https://www.packtpub.com/game-development/learn-opengl

Bootstrap 4 Button Group

Tác giả: mdbootstrap.com
Đánh giá: 5 ⭐ ( 3405 lượt đánh giá )
Khớp với kết quả tìm kiếm: Bootstrap button groups are buttons grouped together in a single line with no space between them. They can be grouped both vertically and horizontally.

Bootstrap 4 Button Groups

Tác giả: www.w3schools.com
Đánh giá: 3 ⭐ ( 6794 lượt đánh giá )
Khớp với kết quả tìm kiếm: 

bootstrap 4 button group responsive

Tác giả: stackoverflow.com
Đánh giá: 3 ⭐ ( 4896 lượt đánh giá )
Khớp với kết quả tìm kiếm: 

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình
Xem Thêm  Lưu văn bản, JSON và CSV vào một tệp bằng Python - python lưu vào tệp văn bản



				
			Danh mục Kiến thức lập trình 		
			Điều hướng bài viết

			Cách sao chép bảng từ cơ sở dữ liệu này sang cơ sở dữ liệu khác trong SQL Server – sao chép các hàng từ một bảng sang một máy chủ sql khác
Làm cách nào để tắt nút radio bằng JavaScript? – tắt tất cả các nút radio



	
	
		Tìm kiếm
Bài viết mới
Cách nối 3 bảng (hoặc nhiều hơn) trong SQL – tham gia 3 bảng sql
ArrayList trong Java – mảng danh sách mảng java
Các phương pháp vòng đời phản ứng: Một hướng dẫn có thể tiếp cận với các ví dụ – các phương pháp vòng đời trong phản ứng
AWS Lambda là gì? – lambda làm gì
Thuộc tính HTML a href được giải thích với các ví dụ – a href có nghĩa là gì trong html
Phản hồi gần đây
Không có bình luận nào để hiển thị.
Lưu trữ
	Tháng Bảy 2022
	Tháng Sáu 2022
	Tháng Năm 2022
	Tháng Tư 2022
	Tháng Ba 2022
Chuyên mục
	Blog

	Kiến thức lập trình

	phần mềm

	Thủ thuật máy tính





			
			
								
					© 2022 phptravels.vn • Built with GeneratePress