快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

前端基础06Bootstrap框架-创新互联

Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。

成都创新互联专注于札达企业网站建设,响应式网站,商城网站建设。札达网站建设公司,为札达等地区提供建站服务。全流程按需求定制制作,专业设计,全程项目跟踪,成都创新互联专业和态度为您提供的服务

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 是移动设备优先的
为了确保适当的绘制和触屏缩放,需要在 之中添加 viewport 元数据标签。

Normalize.css

为了增强跨浏览器表现的一致性,我们使用了 Normalize.css
不再需要手动指定margin: 0之类的
下载地址:https://www.bootcdn.cn/normalize/

布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器
.container 类用于固定宽度并支持响应式布局的容器。

...

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。

简介

栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。
如果多于12列,那么一行放不下,会放到第二行

图例:
前端基础06 Bootstrap框架

图例代码:

.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)的宽度。
示例图:
前端基础06 Bootstrap框架
示例代码:

.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)的顺序。
示例图:
前端基础06 Bootstrap框架
示例代码:

.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9

使用备注

快速浮动

...
...

另外有需要云服务器可以了解下创新互联cdcxhl.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网页题目:前端基础06Bootstrap框架-创新互联
链接分享:http://6mz.cn/article/dhcphc.html

其他资讯