Where should I bootstraperize my web site?

I want my site to be fluid/responsive to whatever device the user has; I reckon more often than not it will be a cell "phone," but I am developing on a laptop, so there's a mismatch between what I see at design time and what most users will see. Of course, I can run emulators/simulators, etc. But my point is that I want the site to automatically adjust to the size/aspect ratio/orientation the device at any given moment. From what I've read, the easiest way to accomplish this is to leverage Twitter Bootstraps capabilities by referencing their CSS file and adding a few class declarations to various tags in my html. I'm wondering just where I need to add these.

I've added the bootstrap css:

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">

My _SiteLayout.cshtml (Razor 2 webiste) file came structured this way (showing just the body, head decapitated):

<body>
    <div id="fb-root"></div>
    <header>
        <div class="content-wrapper">
            <div class="float-left">
                <p class="site-title">
                </p>
            </div>
            <div class="float-right">
            </div>
        </div>
    </header>
    <div id="body" >
        @RenderSection("featured", required: false)
        <section class="content-wrapper main-content clear-fix">
            @RenderBody()
        </section>
    </div>
    <footer>
        <div class="content-wrapper">
            <div class="float-left">
                <p>
                </p>
            </div>
        </div>
    </footer>
</body>

So it uses "content-wrapper" on the outher divs and then floats inner tags left and right. Does this obviate the need for Twitter Bootstrap? Is the same sort of responsive design baked into this Razor 2 structure already?

If not, in which tags should I put the Twitter Bootstrap class declarations?

Should I add class="row-fluid" to some of these tags and, if so, which ones?

The basic fluid grid scaffolding of Twitter Bootstrap is laid out as .container-fluid > .row-fluid > .span#. Spans within .row-fluid use percentage widths conducive of layouts consisting of elements that add up to 12: .span1, .span2, .span3 etc..

Span classes are already set to float:left which can be overridden by adding .pull-right to float:right elements.

So Bootstrap implementation with your layout could look something like:

<body>
    <div id="fb-root"></div>
    <header class="container-fluid">
        <div class="row-fluid content-wrapper">
            <div class="span6">
                <p class="site-title">
                </p>
            </div>
            <div class="span6 pull-right">
            </div>
        </div>
    </header>
    <div class="container-fluid" id="body">
        @RenderSection("featured", required: false)
        <section class="row-fluid content-wrapper main-content clear-fix">
            @RenderBody()
        </section>
    </div>
    <footer class="container-fluid">
        <div class="row-fluid content-wrapper">
            <div class="span12">
                <p>
                </p>
            </div>
        </div>
    </footer>
</body>

Take a look at http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem