8.9 bootstrap学习

bootstrap知识整理

布局容器
类用于固定宽度并支持响应式布局的容器: .container

<div class="container">
  ...
</div>

流式布局容器
类用于 100% 宽度,占据全部视口(viewport)的容器: .container-fluid

<div class="container-fluid">
...
</div>

栅格系统

栅格参数

类前缀    .container 最大宽度  最大列(column)宽
.col-xs-,       自动,               自动,
.col-sm-,       750px,              ~62px ,
.col-md-,       970px,              ~81px ,
.col-lg-,       1170px,             ~97px,

可以创建一个基本的栅格系统: .col-md-*
所有“列(column)必须放在 ” .row 内

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

偏移:.col-md-offset-*
右移:.col-md-push-*
左移:.col-md-pull-*


排版

代码

表格

表单

按钮

图片

辅助类

响应式工具

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值