笔记：Bootstrap框架

发表于 |

Bootstrap响应框架

最大的用处是根据屏幕大小调整html元素

首先里面放上：

1
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

给元素指定class可以自动完成一些内容：

对于图片： class=“img-responsive” 可以自动调节大小适应环境

对于文字： class=“text-center”可以居中

对于按钮： class=“btn” bootstrap风格的按钮

btn-block 使按钮成为块级元素 btn-primary/info/danger依次是深蓝 浅蓝 红色 img

12列网格布局

bootstrap的重点就是这个吧

img

使用举例：将要使用网格布局的部分放在class为“row”的div中，之后每列按所需大小依次放入class为“col-md-数字”的div中（Col-md-数字中md表示medium，数字是所占列宽；Col-xs-数字可以应用于较小的屏幕 extra small）

1
2
3
4
<div class=”row”>
	<div class=”col-xs-6”> <p></p> </div>
	<div class=”col-xs-6”> <p></p> </div>
</div>

FontAwesome矢量图标库

FontAwesome最初就是为Bootsrap框架设计的

在html头部加入：

1
2
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">