前端基础06Bootstrap框架
Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。
创新互联10多年成都定制网站服务;为您提供网站建设,网站制作,网页设计及高端网站定制服务,成都定制网站及推广,对成都石凉亭等多个方面拥有丰富的网站制作经验的网站建设公司。
Bootstrap下载
官方地址:https://getbootstrap.com
中文地址:http://www.bootcss.com/
Bootstrap环境搭建
bootstrap-3.3.7-dist/
├── css // CSS文件
│ ├── bootstrap-theme.css // Bootstrap主题样式文件
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css // 主题相关样式压缩文件
│ ├── bootstrap-theme.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css // 核心CSS样式压缩文件
│ └── bootstrap.min.css.map
├── fonts // 字体文件
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.svg
│ ├── glyphicons-halflings-regular.ttf
│ ├── glyphicons-halflings-regular.woff
│ └── glyphicons-halflings-regular.woff2
└── js // JS文件
├── bootstrap.js
├── bootstrap.min.js // 核心JS压缩文件
└── npm.js
由于Bootstrap的某些组件依赖于jQuery,所以请确保下载对应版本的jQuery文件,来保证Bootstrap相关组件运行正常。
概览
设置全局CSS样式;基本的HTML元素均可以通过class设置样式并得到增强效果;还有先进的栅格系统。
移动设备优先
Bootstrap 是移动设备优先的
为了确保适当的绘制和触屏缩放,需要在
Normalize.css
为了增强跨浏览器表现的一致性,我们使用了 Normalize.css
不再需要手动指定margin: 0之类的
下载地址:https://www.bootcdn.cn/normalize/
布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器
.container 类用于固定宽度并支持响应式布局的容器。
...
栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。
简介
栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。
如果多于12列,那么一行放不下,会放到第二行
图例:
图例代码:
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
栅格参数
中等屏幕 桌面显示器 (≥992px)
.col-md-
列偏移
使用 .col-md-offset- 类可以将列向右侧偏移。这些类实际是通过使用 选择器为当前元素增加了左侧的边距(margin)。例如,.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列(column)的宽度。
示例图:
示例代码:
.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
列排序
通过使用 .col-md-push- 和 .col-md-pull- 类就可以很容易的改变列(column)的顺序。
示例图:
示例代码:
.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
使用备注
快速浮动
...
...
网页标题:前端基础06Bootstrap框架
新闻来源:http://scyanting.com/article/jjsieo.html