7373 < div class ="item-bg bg-warning "> </ div >
7474 < div class ="container d-flex align-items-end h-100 ">
7575 < div class ="position-relative text-dark text-left mb-5 ">
76- < h1 > A better way to Bootstrap 5 </ h1 >
77- < p > The lighter and more compact set of JavaScript components for Bootstrap, sourced with modern ES6+ codebase and strong TypeScript definitions .< br >
78- At about half the size of the original and around < b > 12kb gZipped</ b > , this library does most of Bootstrap & Popper combined.</ p >
76+ < h1 > A What Bootstrap? </ h1 >
77+ < p > The lighter and more compact set of JavaScript components for Bootstrap, sourced with Typescript codebase.< br >
78+ At less than half the size of the original and around < b > 15kb gZipped</ b > , this library does most of Bootstrap & Popper combined.</ p >
7979 < p >
8080 < a class ="btn btn-lg btn-primary me-1 " href ="https://github.com/thednp/bootstrap.native/archive/master.zip "> Download</ a >
8181 < a class ="btn btn-lg btn-secondary " href ="https://www.npmjs.com/package/bootstrap.native "> NPM</ a >
@@ -145,6 +145,7 @@ <h1>What's in it for me?</h1>
145145 < li class ="nav-item "> < a class ="nav-link " href ="#componentTab "> Tab</ a > </ li >
146146 < li class ="nav-item "> < a class ="nav-link " href ="#componentToast "> Toast</ a > </ li >
147147 < li class ="nav-item "> < a class ="nav-link " href ="#componentTooltip "> Tooltip</ a > </ li >
148+ < li class ="nav-item "> < a class ="nav-link " href ="#componentBase "> Base Component</ a > </ li >
148149 </ ul >
149150 </ div >
150151 </ div >
@@ -161,30 +162,6 @@ <h2>Read First</h2>
161162 </ section >
162163 < div class ="row ">
163164 < div class ="col-md-9 " data-bs-spy ="scroll " data-bs-target ="#side-nav ">
164-
165- < section id ="componentBase ">
166- < h2 > BaseComponent</ h2 >
167- < section id ="baseInfo ">
168- < h3 > Info</ h3 >
169- < p > Following the development of the original library, we implemented the same solution to remove most repetitive actions common
170- to all components; the < b > BaseComponent</ b > provides basic functionality generally focused around determining the specific
171- < code > HTMLElement</ code > target or setting instance options.</ p >
172- < p > It also throws an error when no target < code > HTMLElement</ code > is found and removes existing instances which is important
173- to prevent memory overflow or breaking the component functionality.</ p >
174- </ section >
175- < section id ="baseMethods ">
176- < h3 > Base Properties And Methods</ h3 >
177- < p > The < b > BaseComponent</ b > component exposes some getters for all components to use:</ p >
178- < h4 > instance.name</ h4 >
179- < p > Returns the name of the component used to initialize the current instance.</ p >
180- < h4 > instance.defaults</ h4 >
181- < p > Returns the component default options values.</ p >
182- < h4 > instance.version</ h4 >
183- < p > Returns the library version.</ p >
184- < h4 > instance.dispose()</ h4 >
185- < p > Removes the component from target element. Components generally extend this method with additional specific functionality.</ p >
186- </ section >
187- </ section >
188165 < section id ="componentAlert ">
189166 < h2 > Alert</ h2 >
190167 < p > The < b > Alert</ b > component covers the specific original events and public methods, but just like the original plugin, does not provide any
@@ -1125,7 +1102,6 @@ <h2 class="accordion-header" id="headingThree">
11251102 </ section >
11261103 </ section >
11271104
1128-
11291105 < section id ="componentDropdown ">
11301106 < h2 > Dropdown</ h2 >
11311107 < p > The < b > Dropdown</ b > component covers most of the functionality from the original plugin in terms of original events,
@@ -1421,16 +1397,6 @@ <h3>Dropdown Examples</h3>
14211397 < a class ="dropdown-item " href ="# "> Third action</ a >
14221398 </ div >
14231399 </ div >
1424- < div class ="btn-group dropdown ">
1425- < button id ="spanMenu " class ="btn dropdown-toggle " type ="button " data-bs-toggle ="dropdown " aria-expanded ="false ">
1426- < span > span</ span >
1427- </ button >
1428- < div id ="spanDropdown " class ="dropdown-menu " style ="top: 100%; margin: 5px 0px 0px; ">
1429- < a class ="dropdown-item " href ="# "> Action 1</ a >
1430- < a class ="dropdown-item " href ="# "> Action 2</ a >
1431- < a class ="dropdown-item " href ="# "> Action 3</ a >
1432- </ div >
1433- </ div >
14341400 </ div >
14351401
14361402 < p > The original plugin doesn't support nesting nor recommend using it, and due to the implementation of automatic repositioning
@@ -1453,7 +1419,6 @@ <h3>Dropdown Examples</h3>
14531419 </ section >
14541420 </ section >
14551421
1456-
14571422 < section id ="componentModal ">
14581423 < h2 > Modal</ h2 >
14591424 < p > The < b > Modal</ b > component comes with small changes to options, events and public methods when compared to
@@ -1894,7 +1859,6 @@ <h4 class="modal-title" id="myModalJSLabel">Static modal initialized via JavaScr
18941859 </ section >
18951860 </ section >
18961861
1897-
18981862 < section id ="componentOffcanvas ">
18991863 < h2 > Offcanvas</ h2 >
19001864 < p > The < b > Offcanvas</ b > component is our newest addition and comes packed with options, events and public methods.</ p >
@@ -2082,7 +2046,7 @@ <h3>Offcanvas JavaScript API</h3>
20822046 < p > Any element initialized via DATA API or JavaScript, automatically grants access to the component's original events.</ p >
20832047
20842048< pre > < code class ="language-javascript "> // GET THE EVENT TARGET
2085- // when we are certain which modal ID to work with
2049+ // when we are certain which offcanvas ID to work with
20862050var myOffcanvas = document.getElementById('offcanvasID');
20872051
20882052// ATTACH listeners
@@ -2096,7 +2060,7 @@ <h3>Offcanvas JavaScript API</h3>
20962060// shown.bs.offcanvas event
20972061myOffcanvas.addEventListener('shown.bs.offcanvas', function(event){
20982062 // do something when this event triggers
2099- // event.target is the modal referenced in myOffcanvas
2063+ // event.target is the offcanvas referenced in myOffcanvas
21002064 // event.relatedTarget can be the triggering button or NULL
21012065}, false);
21022066
@@ -2265,7 +2229,6 @@ <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdroped with s
22652229 </ div >
22662230 </ section >
22672231 </ section >
2268-
22692232
22702233 < section id ="componentPopover ">
22712234 < h2 > Popover</ h2 >
@@ -2655,7 +2618,6 @@ <h3>Popover Examples</h3>
26552618 </ section >
26562619 </ section >
26572620
2658-
26592621 < section id ="componentScrollspy ">
26602622 < h2 > Scrollspy</ h2 >
26612623 < p > The < b > ScrollSpy</ b > component inherits some of the < a rel ="noreferrer "
@@ -3895,18 +3857,38 @@ <h3>Tooltip Examples</h3>
38953857 </ svg >
38963858 < img class ="position-absolute absolute-img " data-bs-toggle ="tooltip " data-bs-placement ="top " data-bs-title ="<b>Demo Tooltip for </b> <span class='badge bg-info'>IMG</span><br>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. " alt ="Demo Tooltip for IMG " src ="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgODAgNDMiIHdpZHRoPSI4MCIgaGVpZ2h0PSI0MyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICAgICAgICAgICAgICAgIDxyZWN0IGZpbGw9IndoaXRlIiBzdHJva2U9IiNjY2MiIHN0cm9rZS13aWR0aD0iMSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgcng9IjUiPjwvcmVjdD4NCiAgICAgICAgICAgICAgICAgIDx0ZXh0IGRpcmVjdGlvbj0ibHRyIiBmaWxsPSIjMzMzIiB4PSIyNSIgeT0iMjUiIGZvbnQtc2l6ZT0iMTQiPklNRzwvdGV4dD4NCiAgICAgICAgICAgICAgICA8L3N2Zz4= " />
38973859 </ div >
3860+
3861+ < iframe src ="./tooltip-iframe.html " style ="border:none; min-height: 225px; width: 100%; ">
3862+ </ iframe >
3863+ </ section >
3864+ </ section >
3865+
3866+ < section id ="componentBase ">
3867+ < h2 > BaseComponent</ h2 >
3868+ < section id ="baseInfo ">
3869+ < h3 > Info</ h3 >
3870+ < p > Following the development of the original library, we implemented the same solution to remove most repetitive actions common
3871+ to all components; the < b > BaseComponent</ b > provides basic functionality generally focused around determining the specific
3872+ < code > HTMLElement</ code > target or setting instance options.</ p >
3873+ < p > It also throws an error when no target < code > HTMLElement</ code > is found and removes existing instances which is important
3874+ to prevent memory overflow or breaking the component functionality.</ p >
3875+ </ section >
3876+ < section id ="baseMethods ">
3877+ < h3 > Base Properties And Methods</ h3 >
3878+ < p > The < b > BaseComponent</ b > component exposes some getters for all components to use:</ p >
3879+ < h4 > instance.name</ h4 >
3880+ < p > Returns the name of the component used to initialize the current instance.</ p >
3881+ < h4 > instance.defaults</ h4 >
3882+ < p > Returns the component default options values.</ p >
3883+ < h4 > instance.version</ h4 >
3884+ < p > Returns the library version.</ p >
3885+ < h4 > instance.dispose()</ h4 >
3886+ < p > Removes the component from target element. Components generally extend this method with additional specific functionality.</ p >
38983887 </ section >
38993888 </ section >
39003889 </ div >
39013890 < div class ="col-md-3 " id ="side-nav ">
39023891 < ul id ="nav-scrollspy-v5 " class ="nav nav-stacked d-none d-md-flex flex-column ">
3903- < li class ="nav-item ">
3904- < a rel ="nofollow " class ="nav-link " href ="#componentBase "> BaseComponent</ a >
3905- < ul class ="nav ">
3906- < li class ="nav-item "> < a rel ="nofollow " class ="nav-link " href ="#baseInfo "> Info</ a > </ li >
3907- < li class ="nav-item "> < a rel ="nofollow " class ="nav-link " href ="#baseMethods "> Methods</ a > </ li >
3908- </ ul >
3909- </ li >
39103892 < li class ="nav-item ">
39113893 < a rel ="nofollow " class ="nav-link " href ="#componentAlert "> Alert</ a >
39123894 < ul class ="nav ">
@@ -4036,6 +4018,13 @@ <h3>Tooltip Examples</h3>
40364018 < li class ="nav-item "> < a rel ="nofollow " class ="nav-link " href ="#tooltipExamples "> Examples</ a > </ li >
40374019 </ ul >
40384020 </ li >
4021+ < li class ="nav-item ">
4022+ < a rel ="nofollow " class ="nav-link " href ="#componentBase "> BaseComponent</ a >
4023+ < ul class ="nav ">
4024+ < li class ="nav-item "> < a rel ="nofollow " class ="nav-link " href ="#baseInfo "> Info</ a > </ li >
4025+ < li class ="nav-item "> < a rel ="nofollow " class ="nav-link " href ="#baseMethods "> Methods</ a > </ li >
4026+ </ ul >
4027+ </ li >
40394028 </ ul >
40404029 </ div >
40414030 </ div >
@@ -4053,9 +4042,9 @@ <h3>Tooltip Examples</h3>
40534042 import * as BSN from '~/index' ;
40544043 window . BSN = BSN ;
40554044 </ script >
4056- < script defer src ="./assets/js/scripts.js "> </ script >
40574045
4058- < script src ="https://cure53.de/purify.js "> </ script >
4059- < script src ="./assets/js/prism.js "> </ script >
4046+ < script defer src ="https://cure53.de/purify.js "> </ script >
4047+ < script defer src ="./assets/js/scripts.js "> </ script >
4048+ < script defer src ="./assets/js/prism.js "> </ script >
40604049 </ body >
40614050</ html >
0 commit comments