How navbar-toggle, collapse, navbar-collapse classes work together?
1. Nature of connection between button and navbar:
Through collapse.js. From the v3 documentation,
buttons show and hide another element via class changes:
.collapse hides content
Use a button with the data-target attribute and the data-toggle="collapse".
so in your code, data-target=".top-nav"
The classes collapse
and navbar-collapse
are significant for the CSS.
Both are needed to allow more specific selectors in the CSS.
2. The navbar collapses using javascript: https://github.com/twbs/bootstrap/blob/v4-dev/js/src/collapse.js
3. The attributes data-toggle and data-target are used throughout bootstrap for things like toggling visibility as discussed, but also in the carousel or to launch modals.