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

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