我应该在哪里bootstraperize我的网站？ [英] Where should I bootstraperize my web site?
问题描述
我希望我的网站是液体/响应的任何设备的用户;我比不了这将是一个小区往往估计的电话，但我在笔记本上开发，所以有什么之间我在设计时所看到的与大多数用户将看到一个不匹配。当然，我可以运行仿真器/模拟器等，但我的观点是，我希望网站在任何特定时刻自动调整大小/宽高比/定位设备。从我读过的东西，做到这一点最简单的方法是通过引用它们的CSS文件，并在我的HTML添加一些类声明的各种标签利用Twitter的白手起家的能力。我不知道只是我需要添加这些。
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.
我已经添加了引导CSS：
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">
我_SiteLayout.cshtml（剃刀2网站）文件来了这种方式构造（只显示了身体，头部被斩首）：
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>
所以它使用的outher申报单内容包装，然后彩车内标签左右。这是否消除对Twitter的引导的必要性？是一样的那种响应式设计的烤成这个剃刀2结构了吗？
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?
如果不是，在标签，我应该把Twitter的引导类声明？
If not, in which tags should I put the Twitter Bootstrap class declarations?
我应该CLASS =排液添加到其中的一些标签，如果有，是哪些？
Should I add class="row-fluid" to some of these tags and, if so, which ones?
推荐答案
Twitter的引导的基本流体网格脚手架布局为 .container流体＆GT; .row流体＆GT; .span＃。在跨越.row流体使用有利于组成，加起来就是12种元素的布局百分比宽度： .span1 ， .span2 ， .span3 等
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..
跨度类已经被设置为浮动：左这可以通过增加覆盖 .pull右到浮动：权元素
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>
看看 http://twitter.github.io/bootstrap/scaffolding。 HTML＃fluidGridSystem
这篇关于我应该在哪里bootstraperize我的网站？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
