These are chat archives for twbs/bootstrap
simbonBut I'm not a expert. I just guess...
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
aria-*? Do I need it?
simbonIt's new features in HTML5. If you delete them, you can't show your element by clicking the button.
simbonYou can try to delete it and see the result
simbonMatrixRobot is used to resend my message from M]atrix to Gitter
simbonNo, you can use button also, but you can't use it to collapse your element of which id is navbarSupportedContent
simbonYour code is aimed to collapse an element by clicking the button, right?
simbonYeah, I've seen the content. navbar-toggler is used to expand navigator when the width of window is too little. Such as on mobile phone, it will automatically collapse the navigator
simbonI'll show you a snapshot
simbonposted an image:
simbonIs there a button showed three lines? If you click it, the navigator will show
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <link rel="stylesheet" href="css/bootstrap.min.css"> <title>Bootstrap</title> </head> <body> <nav class="navbar navbar-dark bg-dark navbar-expand-sm"> <div class="container"> <a href="#" class="navbar-brand">Wisdom Pet Medicine</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent""> <a class="nav-item nav-link active" href="#">Home</a> <a class="nav-item nav-link" href="#">Mission</a> <a class="nav-item nav-link" href="#">Services</a> <a class="nav-item nav-link" href="#">Staff</a> <a class="nav-item nav-link" href="#">Testimonials</a> </div><!-- navbar --> </div><!-- container --> </nav><!-- nav --> <div class="container"> <div class="row"> <section class="col-12"> <h2>Our Mission</h2> <p>Wisdom Pet Medicine strives to blend the best in traditional and alternative medicine in the diagnosis and treatment of companion animals including dogs, cats, birds, reptiles, rodents, and fish. We apply the wisdom garnered in the centuries old tradition of veterinary medicine, to find the safest treatments and cures.</p> <p>We strive to be your pet's medical experts from youth through the senior years. We build preventative health care plans for each and every one of our patients, based on breed, age, and sex, so that your pet receives the most appropriate care at crucial milestones. We want to give your pet a long and healthy life.</p> <h2>Exotic Pets</h2> <p>We offer specialized care for reptiles, rodents, birds, and other exotic pets.</p> <h2>Services</h2> <h3>Grooming</h3> <p>Our therapeutic grooming treatments help battle fleas, allergic dermatitis, and other challenging skin conditions.</p> <h3>General Health</h3> <p>Wellness and senior exams, ultrasound, x-ray, and dental cleanings are just a few of our general health services.</p> <h3>Nutrition</h3> <p>Let our nutrition experts review your pet's diet and prescribe a custom nutrition plan for optimum health and disease prevention.</p> <h3>Pest Control</h3> <p>We offer the latest advances in safe and effective prevention and treatment of fleas, ticks, worms, heart worm, and other parasites.</p> <h3>Vaccinations</h3> <p>Our veterinarians are experienced in modern vaccination protocols that prevent many of the deadliest diseases in pets.</p> <h2>Our Staff</h2> Our Staff <h3>Dr. Winthrop</h3> <p>Dr. Winthrop is the guardian of Missy, a three-year old Llaso mix, who he adopted at the shelter. Dr. Winthrop is passionate about spay and neuter and pet adoption, and works tireless hours outside the clinic, performing free spay and neuter surgeries for the shelter.</p> <h3>Dr. Chase</h3> <p>Dr. Chase spends much of her free time helping the local rescue organization find homes for animals, such as Kibbles - a Maine Coon Cat who is part of the large Chase household, including two dogs, three cats, and a turtle.</p> <h3>Dr Sanders</h3> <p>Leroy walked into Dr. Sanders front door when he was moving into a new house. After searching for weeks for Leroy's guardians, he decided to make Leroy a part of his pet family, and now has three cats.</p> </section> </div><!-- row --> </div><!-- content container --> <script src="js/jquery.slim.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
aria-controls="navbarSupportedContent"is still working
simbonIf you don't delete them, minimize the width of your browser window, navigator will be collapsed and you'll see the three lines button
simbonIf you delete them, minimize the width of your browser window, navigator won't be collapsed
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"> <span class="navbar-toggler-icon"></span> </button>
simbonPlease let me save your code in my computer, I will try
simbonCuriously, I replaced your css and js with cdn, it doesn't show the same theme.
simbonI'm sorry about. aria- is only for people with disabilities, data- support the function to collapse.
simbonI confused, very sorry
simbonOtherwise, supporting functions for people with disabilities is also a good behavior
simbonNo, I haven't help you, I'm very sorry about my confusion