您的位置：首页 > Web前端 > BootStrap

Bootstrap(1)

2015-06-16 22:23 573 查看

Bootstrap

Bootstrap:简洁、直观、强悍、移动设备优先的前端开发框架，让web开发更加迅速、简单。

Bootstrap设置了全局样式，有显示，排版和链接。

用.container包裹页面上的内容即可实现居中对齐。在不同的媒体查询阈值范围内都为container设置了

max-width

，用以匹配栅格系统。

例如：<div class=”container”>

………

<div>

栅格系统

栅格系统是bootstrap内置的一套响应式布局的系统。它可以随着设备屏幕的大小变化而变化，它包含了易于使用的预定义classe，还有强大的mixin用于生成更好的语义布局。

栅格系统可以通过.row（行）和coiumn（列）的组合来对页面进行布局，

row行必须写在有.container的元素中，这可以使这一行有合适的排列和内补。

使用行在水平方向创建一组列。

你的内容应当放置于列内，而且只有列可以作为行的直接子元素、

类似Predefined gnd classes like .row and.col-xs-4 这些预定义的栅格class可以用来快速建立栅格系统的布局。Bootstrap源码中国定义的mixin也可以用来创建语义化布局。

通过设置padding从而创建列之间的间隔，然后通过为第一和最后一样设置负值的margin从而可以抵消掉padding的影响。

栅格系统中的列是通过制定1到12的数值来表示其所要占取的范围。

超小屏幕设备（手机）：小于768px。最大在.container的宽度是100%自动变化。Class前缀为.col-xs-。列数为12。

小屏幕设备（平板）：大于768px，小于992px。最大在.container的宽度是750px。Class前缀为.col-sm-。列数为12。

中等屏幕设备（电脑桌面）：大于992px，小于1200px。最大在.container的宽度是970px。Class前缀为.col-md-。列数为12。

大屏幕设备（电脑桌面）：大于1200px。最大在.container的宽度是1170px。Class前缀为.col-lg-。列数为12。

列偏移

通过编写.col-md-offset-可以将列偏移到右侧。这些class通过使用*选择器将所有列增加了列的左侧margin。例如：.col-md-offset-5将该元素享有移动4个列的宽度。

<div class="row">

　　<div class="col-md-4">第一部分</div>

　　<div class="col-md-4 col-md-offset-4">第二部分</div>

</div>

第一部分占前四格。第二部分占四格。但运用了.col-md-offset-4，向右移动四个，所以第一部分在最左边的4格。第二部分在最右边的4格。

嵌套

为了更方便布局，可以在栅格系统中将内容嵌套。方法便是通过在嵌套元素上添加新的.row和乙烯利的.col-md-列到已经存在的.col-md列内就能实现你自己想要的布局效果.新添加的row也包含了12个列。且能自行选择数值。

例如：

<div class=”row”>

<div class=”col-md-9”>

haha

<div class=”row”>

<div class=”col-md-9”>

Hehe

</div>

</div>

</div>

</div>

含有“haha”的文本占9个栅格。在这个文本将其分为12列，hehe占其中的9个栅格。

排列序

可以通过使用.col-md-push和.col-md-pull来改变序列的顺序位置。

<div class="row">

　　<div class="col-md-9 col-md-push-3">

　　呵呵

　　</div>

　　<div class="col-md-3 col-md-pull-9">

　　哈哈

　　</div>

</div>

包含“呵呵”的文本占9个栅格。偏向左移动3个栅格的位置，同理。包含“哈哈”的文本占3个栅格。占取前3个栅格的位置。

排版

标题：在HTML中的所有标题标签都可以使用<h1>到<h6>的标签，除此之外，其还提供了<h1>到<h6>的标签的class样式。

主题页面：bootstrap内置将包含在内所有文字的大小默认设置为了14px。行高为1.428，这些属性直接赋给了<body>元素。<p>元素还被谁知了1/2的行高的底部外边局为10px。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航