mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-28 07:39:57 +02:00
Code Issues Releases Wiki Activity

v4 beta 3 docs

Browse Source
This commit is contained in:
Mark Otto
2017-12-28 09:55:44 -08:00
parent ed05e78a9b
commit b01323ae05
150 changed files with 12613 additions and 25343 deletions
Download Patch File Download Diff File Expand all files Collapse all files

462
docs/4.0/components/collapse/index.html
View File

@@ -3,18 +3,20 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<meta name="description" content="Toggle the visibility of content across your project with a few classes and our JavaScript plugins.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.6.2">
<title>Collapse &middot; Bootstrap</title>
<title>Collapse · Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="/assets/css/docs.min.css" rel="stylesheet">
@@ -29,28 +31,19 @@
<meta name="theme-color" content="#563d7c">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Collapse">
<meta name="twitter:description" content="Toggle the visibility of content across your project with a few classes and our JavaScript plugins.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<meta name="twitter:title" content="Collapse">
<meta name="twitter:description" content="Toggle the visibility of content across your project with a few classes and our JavaScript plugins.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/collapse/">
<meta property="og:title" content="Collapse">
<meta property="og:description" content="Toggle the visibility of content across your project with a few classes and our JavaScript plugins.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/collapse/">
<meta property="og:title" content="Collapse">
<meta property="og:description" content="Toggle the visibility of content across your project with a few classes and our JavaScript plugins.">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
@@ -76,10 +69,8 @@
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
</a>
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
</a>
<div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row">
@@ -121,26 +112,20 @@
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
</a>
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
</a>
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
</a>
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
</a>
</li>
</ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
</header>
@@ -149,10 +134,8 @@
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
</button>
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
</button>
</form>
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
@@ -163,58 +146,31 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/getting-started/introduction/">
Introduction
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/download/">
Download
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/contents/">
Contents
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/javascript/">
JavaScript
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/theming/">
Theming
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/build-tools/">
Build tools
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/webpack/">
Webpack
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/accessibility/">
Accessibility
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Layout
@@ -223,28 +179,16 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/layout/overview/">
Overview
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/layout/grid/">
Grid
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/layout/media-object/">
Media object
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Content
@@ -253,40 +197,22 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/content/reboot/">
Reboot
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/typography/">
Typography
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/code/">
Code
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/images/">
Images
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/tables/">
Tables
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/figures/">
Figures
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item active">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Components
@@ -295,130 +221,67 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/components/alerts/">
Alerts
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/badge/">
Badge
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/breadcrumb/">
Breadcrumb
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/buttons/">
Buttons
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/button-group/">
Button group
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/card/">
Card
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/carousel/">
Carousel
</a>
</li><li class="active bd-sidenav-active">
</a></li><li class="active bd-sidenav-active">
<a href="/docs/4.0/components/collapse/">
Collapse
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/dropdowns/">
Dropdowns
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/forms/">
Forms
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/input-group/">
Input group
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/jumbotron/">
Jumbotron
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/list-group/">
List group
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/modal/">
Modal
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/navs/">
Navs
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/navbar/">
Navbar
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/pagination/">
Pagination
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/popovers/">
Popovers
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/progress/">
Progress
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/scrollspy/">
Scrollspy
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/tooltips/">
Tooltips
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Utilities
@@ -427,100 +290,52 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/utilities/borders/">
Borders
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/clearfix/">
Clearfix
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/close-icon/">
Close icon
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/colors/">
Colors
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/display/">
Display
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/embed/">
Embed
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/flex/">
Flex
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/float/">
Float
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/image-replacement/">
Image replacement
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/position/">
Position
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/screenreaders/">
Screenreaders
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/sizing/">
Sizing
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/spacing/">
Spacing
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/text/">
Text
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/vertical-align/">
Vertical align
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/visibility/">
Visibility
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Extend
@@ -529,10 +344,7 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/extend/icons/">
Icons
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/migration/">
Migration
@@ -540,41 +352,23 @@
<ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/about/history/">
<a class="bd-toc-link" href="/docs/4.0/about/overview/">
About
</a>
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/about/history/">
History
</a>
</li><li>
<a href="/docs/4.0/about/team/">
Team
</a>
</li><li>
<a href="/docs/4.0/about/overview/">
Overview
</a></li><li>
<a href="/docs/4.0/about/brand/">
Brand
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/about/license/">
License
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/about/translations/">
Translations
</a>
</li></ul>
</a></li></ul>
</div></nav>
</div>
@@ -584,25 +378,7 @@
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#example">Example</a></li>
<li class="toc-entry toc-h2"><a href="#multiple-targets">Multiple targets</a></li>
<li class="toc-entry toc-h2"><a href="#accordion-example">Accordion example</a>
<ul>
<li class="toc-entry toc-h5"><a href="#------------------collapsible-group-item-1--------------">
Collapsible Group Item #1
</a></li>
<li class="toc-entry toc-h5"><a href="#------------------collapsible-group-item-2--------------">
Collapsible Group Item #2
</a></li>
<li class="toc-entry toc-h5"><a href="#------------------collapsible-group-item-3--------------">
Collapsible Group Item #3
</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#accordion-example">Accordion example</a></li>
<li class="toc-entry toc-h2"><a href="#accessibility">Accessibility</a></li>
<li class="toc-entry toc-h2"><a href="#usage">Usage</a>
<ul>
@@ -616,9 +392,9 @@
<li class="toc-entry toc-h4"><a href="#collapsetoggle">.collapse('toggle')</a></li>
<li class="toc-entry toc-h4"><a href="#collapseshow">.collapse('show')</a></li>
<li class="toc-entry toc-h4"><a href="#collapsehide">.collapse('hide')</a></li>
<li class="toc-entry toc-h4"><a href="#collapsedispose">.collapse('dispose')</a></li>
</ul>
</li>
<li class="toc-entry toc-h3"><a href="#collapsedispose">.collapse('dispose')</a></li>
<li class="toc-entry toc-h3"><a href="#events">Events</a></li>
</ul>
</li>
@@ -645,7 +421,7 @@
<div class="bd-example">
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
@@ -659,7 +435,7 @@
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;p&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">href=</span><span class="s">"#collapseExample"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseExample"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">href=</span><span class="s">"#collapseExample"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseExample"</span><span class="nt">&gt;</span>
Link with href
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#collapseExample"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseExample"</span><span class="nt">&gt;</span>
@@ -679,7 +455,7 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
<div class="bd-example">
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
@@ -701,7 +477,7 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;p&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">href=</span><span class="s">"#multiCollapseExample1"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"multiCollapseExample1"</span><span class="nt">&gt;</span>Toggle first element<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">href=</span><span class="s">"#multiCollapseExample1"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"multiCollapseExample1"</span><span class="nt">&gt;</span>Toggle first element<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#multiCollapseExample2"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"multiCollapseExample2"</span><span class="nt">&gt;</span>Toggle second element<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">".multi-collapse"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"multiCollapseExample1 multiCollapseExample2"</span><span class="nt">&gt;</span>Toggle both elements<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/p&gt;</span>
@@ -731,7 +507,7 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
<a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<a data-toggle="collapse" href="#collapseOne" role="button" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</h5>
@@ -746,7 +522,7 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<a class="collapsed" data-toggle="collapse" href="#collapseTwo" role="button" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
</h5>
@@ -760,7 +536,7 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
<div class="card">
<div class="card-header" role="tab" id="headingThree">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<a class="collapsed" data-toggle="collapse" href="#collapseThree" role="button" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</a>
</h5>
@@ -777,7 +553,7 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">id=</span><span class="s">"headingOne"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">href=</span><span class="s">"#collapseOne"</span> <span class="na">aria-expanded=</span><span class="s">"true"</span> <span class="na">aria-controls=</span><span class="s">"collapseOne"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">href=</span><span class="s">"#collapseOne"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-expanded=</span><span class="s">"true"</span> <span class="na">aria-controls=</span><span class="s">"collapseOne"</span><span class="nt">&gt;</span>
Collapsible Group Item #1
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/h5&gt;</span>
@@ -792,7 +568,7 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">id=</span><span class="s">"headingTwo"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"collapsed"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">href=</span><span class="s">"#collapseTwo"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseTwo"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"collapsed"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">href=</span><span class="s">"#collapseTwo"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseTwo"</span><span class="nt">&gt;</span>
Collapsible Group Item #2
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/h5&gt;</span>
@@ -806,7 +582,7 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">id=</span><span class="s">"headingThree"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"collapsed"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">href=</span><span class="s">"#collapseThree"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseThree"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"collapsed"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">href=</span><span class="s">"#collapseThree"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseThree"</span><span class="nt">&gt;</span>
Collapsible Group Item #3
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/h5&gt;</span>
@@ -824,7 +600,7 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
<div class="bd-example">
<div id="exampleAccordion" data-children=".item">
<div class="item">
<a data-toggle="collapse" data-parent="#exampleAccordion" href="#exampleAccordion1" aria-expanded="true" aria-controls="exampleAccordion1">
<a data-toggle="collapse" data-parent="#exampleAccordion" href="#exampleAccordion1" role="button" aria-expanded="true" aria-controls="exampleAccordion1">
Toggle item
</a>
<div id="exampleAccordion1" class="collapse show" role="tabpanel">
@@ -834,7 +610,7 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
</div>
</div>
<div class="item">
<a data-toggle="collapse" data-parent="#exampleAccordion" href="#exampleAccordion2" aria-expanded="false" aria-controls="exampleAccordion2">
<a data-toggle="collapse" data-parent="#exampleAccordion" href="#exampleAccordion2" role="button" aria-expanded="false" aria-controls="exampleAccordion2">
Toggle item 2
</a>
<div id="exampleAccordion2" class="collapse" role="tabpanel">
@@ -847,7 +623,7 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"exampleAccordion"</span> <span class="na">data-children=</span><span class="s">".item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-parent=</span><span class="s">"#exampleAccordion"</span> <span class="na">href=</span><span class="s">"#exampleAccordion1"</span> <span class="na">aria-expanded=</span><span class="s">"true"</span> <span class="na">aria-controls=</span><span class="s">"exampleAccordion1"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-parent=</span><span class="s">"#exampleAccordion"</span> <span class="na">href=</span><span class="s">"#exampleAccordion1"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-expanded=</span><span class="s">"true"</span> <span class="na">aria-controls=</span><span class="s">"exampleAccordion1"</span><span class="nt">&gt;</span>
Toggle item
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"exampleAccordion1"</span> <span class="na">class=</span><span class="s">"collapse show"</span> <span class="na">role=</span><span class="s">"tabpanel"</span><span class="nt">&gt;</span>
@@ -857,7 +633,7 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-parent=</span><span class="s">"#exampleAccordion"</span> <span class="na">href=</span><span class="s">"#exampleAccordion2"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"exampleAccordion2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-parent=</span><span class="s">"#exampleAccordion"</span> <span class="na">href=</span><span class="s">"#exampleAccordion2"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"exampleAccordion2"</span><span class="nt">&gt;</span>
Toggle item 2
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"exampleAccordion2"</span> <span class="na">class=</span><span class="s">"collapse"</span> <span class="na">role=</span><span class="s">"tabpanel"</span><span class="nt">&gt;</span>
@@ -870,7 +646,7 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
<h2 id="accessibility">Accessibility</h2>
<p>Be sure to add <code class="highlighter-rouge">aria-expanded</code> to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. If the collapsible element is closed by default, the attribute on the control element should have a value of <code class="highlighter-rouge">aria-expanded="false"</code>. If you’ve set the collapsible element to be open by default using the <code class="highlighter-rouge">show</code> class, set <code class="highlighter-rouge">aria-expanded="true"</code> on the control instead. The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed (via JavaScript, or because the user triggered another control element also tied to the same collapsbile element).</p>
<p>Be sure to add <code class="highlighter-rouge">aria-expanded</code> to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. If the collapsible element is closed by default, the attribute on the control element should have a value of <code class="highlighter-rouge">aria-expanded="false"</code>. If you’ve set the collapsible element to be open by default using the <code class="highlighter-rouge">show</code> class, set <code class="highlighter-rouge">aria-expanded="true"</code> on the control instead. The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed (via JavaScript, or because the user triggered another control element also tied to the same collapsbile element). If the control element’s HTML element is not a button (e.g., an <code class="highlighter-rouge">&lt;a&gt;</code> or <code class="highlighter-rouge">&lt;div&gt;</code>), the attribute <code class="highlighter-rouge">role="button"</code> should be added to the element.</p>
<p>Additionally, if your control element is targeting a single collapsible element – i.e. the <code class="highlighter-rouge">data-target</code> attribute is pointing to an <code class="highlighter-rouge">id</code> selector – you may add an additional <code class="highlighter-rouge">aria-controls</code> attribute to the control element, containing the <code class="highlighter-rouge">id</code> of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.</p>
@@ -902,7 +678,7 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="highlighter-rouge">data-</code>, as in <code class="highlighter-rouge">data-parent=""</code>.</p>
<table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 100px;">Name</th>
@@ -957,7 +733,7 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
<p>Hides a collapsible element. <strong>Returns to the caller before the collapsible element has actually been hidden</strong> (i.e. before the <code class="highlighter-rouge">hidden.bs.collapse</code> event occurs).</p>
<h3 id="collapsedispose"><code class="highlighter-rouge">.collapse('dispose')</code></h3>
<h4 id="collapsedispose"><code class="highlighter-rouge">.collapse('dispose')</code></h4>
<p>Destroys an element’s collapse.</p>
@@ -965,7 +741,7 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
<p>Bootstrap’s collapse class exposes a few events for hooking into collapse functionality.</p>
<table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event Type</th>
@@ -1004,20 +780,7 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script>
docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
@@ -1037,10 +800,7 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
},
debug: false // Set debug to true if you want to inspect the dropdown
});
</script>
<script>
</script><script>
Holder.addTheme('gray', {
bg: '#777',
fg: 'rgba(255,255,255,.75)',