Skip to content

Commit

Permalink
5223 added bootstrap 5.3 scrollspy component (#5271)
Browse files Browse the repository at this point in the history
  • Loading branch information
@OleksandrTochonyi
OleksandrTochonyi authored Dec 19, 2023
1 parent d328319 commit 2d1809b
Showing 1 changed file with 268 additions and 1 deletion.
269 changes: 268 additions & 1 deletion bootstrap-5-3-new.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="css/lib/components/datepicker3.css" />
<link rel="stylesheet" href="css/lib/components/jquery.mCustomScrollbar.css" />
<link rel="stylesheet" href="css/lib/components/scrollspy.css" />
<!-- <link rel="stylesheet" href="css/lib/components/scrollspy.css" /> -->
<link rel="stylesheet" href="jquery-ui/css/smoothness/jquery-ui-1.10.4.custom.min.css" />
<link rel="stylesheet" href="css/fix-bootstrap4.3.css" />
<script src="js/lib/jquery-1.11.1.min.js"></script>
Expand Down Expand Up @@ -5359,6 +5359,273 @@ <h4>Disabled elements</h4>
</span>
</div>
</div>
<div class="doc-space line">
<h2 class="block-title">Scrollspy</h2>
<div class="html-center">
<h4>Navbar</h4>
<p>
Bootstrap:
<a
href="https://getbootstrap.com/docs/5.3/components/scrollspy/#navbar"
target="_blank"
>https://getbootstrap.com/docs/5.3/components/scrollspy/#navbar</a
>
</p>
</div>
<div class="html-center mb-3">
<nav id="navbar-example2" class="navbar bg-body-tertiary px-3 mb-3">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading1">First</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading2">Second</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
<li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
</ul>
</li>
</ul>
</nav>
<div data-bs-spy="scroll" id="scrollspy-navbar-example" data-bs-target="#navbar-example2"
data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true"
class="scrollspy-example bg-body-tertiary p-3 rounded-2" tabindex="0">
<h4 id="scrollspyHeading1">First heading</h4>
<p>This is some placeholder content</p>
<h4 id="scrollspyHeading2">Second heading</h4>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate
navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting. the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting.</p>
<h4 id="scrollspyHeading3">Third heading</h4>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate
navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting.</p>
<h4 id="scrollspyHeading4">Fourth heading</h4>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate
navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting.</p>
<h4 id="scrollspyHeading5">Fifth heading</h4>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate
navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting.</p>
</div>
</div>
<hr>
<div class="html-center">
<h4>Nested nav</h4>
<p>
Bootstrap:
<a
href="https://getbootstrap.com/docs/5.3/components/scrollspy/#nested-nav"
target="_blank"
>https://getbootstrap.com/docs/5.3/components/scrollspy/#nested-nav</a
>
</p>
</div>
<div class="html-center mb-3">
<div class="row">
<div class="col-4">
<nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end">
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1">Item 1</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
<a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
</nav>
<a class="nav-link" href="#item-2">Item 2</a>
<a class="nav-link" href="#item-3">Item 3</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
<a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
</nav>
</nav>
</nav>
</div>

<div class="col-8">
<div data-bs-spy="scroll" id="scrollspy-nested-nav-example" data-bs-target="#navbar-example3"
data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0">
<div id="item-1">
<h4>Item 1</h4>
<p></p>
</div>
<div id="item-1-1">
<h5>Item 1-1</h5>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate
navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting. the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting.

</p>
</div>
<div id="item-1-2">
<h5>Item 1-2</h5>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate
navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting. the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting.
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate
navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting. the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting.
.</p>
</div>
<div id="item-2">
<h4>Item 2</h4>
<p>.This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate
navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting. the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting.

..</p>
</div>
<div id="item-3">
<h4>Item 3</h4>
<p>.This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate
navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting. the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting.

..</p>
</div>
<div id="item-3-1">
<h5>Item 3-1</h5>
<p>.This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate
navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting. the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting.

..</p>
</div>
<div id="item-3-2">
<h5>Item 3-2</h5>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate
navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting. the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting.

...</p>
</div>

</div>
</div>
</div>
</div>
<hr>
<div class="html-center">
<h4>List group</h4>
<p>
Bootstrap:
<a
href="https://getbootstrap.com/docs/5.3/components/scrollspy/#list-group"
target="_blank"
>https://getbootstrap.com/docs/5.3/components/scrollspy/#list-group</a
>
</p>
</div>
<div class="html-center mb-3">
<div class="row">
<div class="col-4">
<div id="list-example" class="list-group">
<a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
<a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
<a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
<a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
</div>
</div>
<div class="col-8">
<div data-bs-spy="scroll" id="scrollspy-list-group" data-bs-target="#list-example" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
<h4 id="list-item-1">Item 1</h4>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate
navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting. the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting.</p>
<h4 id="list-item-2">Item 2</h4>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate
navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting. the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting.</p>
<h4 id="list-item-3">Item 3</h4>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate
navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting. the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting.</p>
<h4 id="list-item-4">Item 4</h4>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate
navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting. the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting.</p>
</div>
</div>
</div>
</div>
<hr>
<div class="html-center">
<h4>Simple anchors</h4>
<p>
Bootstrap:
<a
href="https://getbootstrap.com/docs/5.3/components/scrollspy/#simple-anchors"
target="_blank"
>https://getbootstrap.com/docs/5.3/components/scrollspy/#simple-anchors</a
>
</p>
</div>
<div class="html-center mb-3">
<div class="row">
<div class="col-4">
<div id="simple-list-example" class="d-flex flex-column gap-2 simple-list-example-scrollspy text-center">
<a class="p-1 rounded" href="#simple-list-item-1">Item 1</a>
<a class="p-1 rounded" href="#simple-list-item-2">Item 2</a>
<a class="p-1 rounded" href="#simple-list-item-3">Item 3</a>
<a class="p-1 rounded" href="#simple-list-item-4">Item 4</a>
<a class="p-1 rounded" href="#simple-list-item-5">Item 5</a>
</div>
</div>
<div class="col-8">
<div data-bs-spy="scroll" id="scrollspy-simple-anchors" data-bs-target="#simple-list-example" data-bs-offset="0" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
<h4 id="simple-list-item-1">Item 1</h4>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate
navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting. the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting.</p>
<h4 id="simple-list-item-2">Item 2</h4>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate
navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting. the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting.</p>
<h4 id="simple-list-item-3">Item 3</h4>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate
navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting. the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting.</p>
<h4 id="simple-list-item-4">Item 4</h4>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate
navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting. the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting.</p>
<h4 id="simple-list-item-5">Item 5</h4>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate
navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting. the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting.</p>
</div>
</div>
</div>
</div>



</div>



</div>
</div>
Expand Down

0 comments on commit 2d1809b

Please sign in to comment.