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.