How navbar-toggle, collapse, navbar-collapse classes work together?

I am new to the world of CSS and Bootstrap 3.0. Below is code which I can find at many places and now I can write it without any problem. But I really don't know how things are working behind the scenes.

<div class="navbar navbar-static-top navbar-inverse" role="navigation">
        <a class="navbar-brand">Company</a>
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".top-nav">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse top-nav">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>

Above code will provide me a dynamic UI. Can someone answer my below queries

1. How connection is established between button and navbar. Ans: In this case I know class named 'top-nave' connect these two components. But then what is significance of other classes ( collapse navbar-collapse ). I have learned that we need to have both the classes i.e. collapse and navbar-collapse. Dont know why?
2. Is all magic done by CSS or we do have some javascript code that is manipulating code? ( I guess yes since there exists data- attribute)
3. Can anyone suggest other usage of data-toggle and data-target attribute in bootstrap 3 to understand concept clearly?

Regards, Hemant