【bootstrap】前端框架bootstrap的学习(1)

Bootstrap 网格系统 

默认最大为12格 你希望你的东西占多宽就给多少格 如过希望占1/3 就如下

<div class="col-xs-4"></div>

 这种就是根据不同的情况给不同的宽度 小的时候占1/3 大了占1/2

<div class="col-xs-4 col-md-6"></div>

网格系统参考表格 

	超小设备手机（<768px）	小型设备平板电脑（≥768px）	中型设备台式电脑（≥992px）	大型设备台式电脑（≥1200px）
网格行为	一直是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的
最大容器宽度	None (auto)	750px	970px	1170px
Class 前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列数量和	12	12	12	12
最大列宽	Auto	60px	78px	95px
间隙宽度	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）
可嵌套	Yes	Yes	Yes	Yes
偏移量	Yes	Yes	Yes	Yes
列排序	Yes	Yes	Yes	Yes

 

更多排版类

下表提供了 Bootstrap 排版类的实例：

类	描述
.lead	使段落突出显示
.small	设定小文本 (设置为父文本的 85% 大小)
.text-left	设定文本左对齐
.text-center	设定文本居中对齐
.text-right	设定文本右对齐
.text-justify	设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap	段落中超出屏幕部分不换行
.text-lowercase	设定文本小写
.text-uppercase	设定文本大写
.text-capitalize	设定单词首字母大写
.initialism	显示在 <abbr> 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母
.blockquote-reverse	设定引用右对齐
.list-unstyled	移除默认的列表样式，列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)
.list-inline	将所有列表项放置同一行
.dl-horizontal	该类设置了浮动和偏移，应用于 <dl> 元素和 <dt> 元素中，具体实现可以查看实例
.pre-scrollable	使 <pre> 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条

 

 

 

 显示代码的两种方式   pre 和 code

pre不改变括号内的空格和换行等内容 code会给括号内加个红底

元素/类	描述
<var>	变量赋值: x = ab + y
<kbd>	按键提示： CTRL + P
<pre>	多行代码
<pre class="pre-scrollable">	多行代码带有滚动条
<samp>	电脑程序输出: Sample output
<code>	同一行代码片段: span, div

 

表格类

下表样式可用于表格中：

类	描述
.table	为任意 <table> 添加基本样式 (只有横向分隔线)
.table-striped	在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered	为所有表格的单元格添加边框
.table-hover	在 <tbody> 内的任一行启用鼠标悬停状态
.table-condensed	让表格更加紧凑

 

img-responsive 使图片自适应

<img src="img/c-2.png" class="img-responsive" alt="响应式图像">