bootstrap框架的基本使用
bootstrap框架
Bootstrap ,来自 Twitter,是目前很受欢迎的前端框架,主要应用于响应式开发。
特点:
- 组件简洁大方、代码规范精简、界面自定义性强。
- Bootstrap是基于HTML5和CSS3开发的, js功能效果依赖于 jQuery
- Bootstrap中包含了丰富的Web组件,根据这些组件,可以快速的搭建一个漂亮、功能完备的网站。
版本:
-
2.x.x 停止维护
优点:兼容性好
-
缺点:代码不够简洁、功能不够完善
因为需要做兼容性处理,需要多写很多代码
3.x.x 目前使用最多
-
优点:稳定,偏向于开发响应式布局,移动设备优先的WEB项目
4.x.x 阶段 不太稳定
简单使用
说白了,bootstrap框架就是别人写好的代码,需要使用别人写好的css文件,只需要直接引入即可
-
引入文件:
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
-
bootstrap样式文件中有一些简单的样式初始化,所以引入之后不用再引入
base.css
文件但是bootstrap并没有将所有样式都重置,所有之后还需要自己手动写代码重置
-
学习bootstrap框架说白了就是学习类(学习每一个类的含义)
比如:pull-left——》左浮动、pull-right——》右浮动、clearfix——》清除浮动
bootstrap的布局容器
响应式布局容器(.container)
-
设置了该类的盒子,在不同屏幕下有不同的版心,到了移动端宽度为100%
底层原理:就是媒体查询
点击了解媒体查询原理 -
设置了该类的盒子,左右有默认15px的padding
写框架的作者觉得内容直接贴两边不好看,就设置了左右15px的padding
流式布局容器(.container-fluid)点击了解流式布局套路
- 设置了该类的盒子,宽度永远是100%
- 设置了该类的盒子,左右也有默认15px的padding
抵消父元素padding的类(.row)
-
设置了该类的子盒子,会抵消父元素左右15px的padding
底层原理:通过margin为负值实现
基本模板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- 引入bootstrap的样式文件 --> <link rel="stylesheet" href="./bootstrap/css/bootstrap.css"> </head> <body> <!-- bootstrap依赖于jquery,要先引入jquery --> <script src="./jquery/jquery-1.12.4.js"></script> <script src="./bootstrap/js/bootstrap.js"></script></body> </html>
栅格系统的介绍(重点)
bootstrap中将一行分成了12份(12份更容易分配盒子的空间)
底层原理: 浮动(一行中显示) + 百分比(宽度均分) + 媒体查询(不同屏幕时才生效)
比如:
.col-lg-6表示在大屏及以上屏幕生效,盒子宽度为一行的6/12——》50%;浮动在一行中显示
语法:
.col-取值1-取值2
取值1 | 效果 |
---|---|
lg | 大屏及以上屏幕时生效 |
md | 中屏及以上屏幕时生效 |
sm | 小屏及以上屏幕时生效 |
xs | 超小屏及以上屏幕生效(所有屏幕生效) |
取值2: 份数(0~12)
表示在一行中的宽度占几份
举个例子:
如果是大屏幕设备, 每行放 6 个 div, 共两行
如果是中屏设备, 每行放 4 个 div, 共三行
如果是小屏设备, 每行放 3 个 div, 共四行
如果是超小屏设备, 每行放 2 个 div, 共六行
<div class="container"> <div class="item col-lg-2 col-md-3 col-sm-4 col-xs-6"></div> <div class="item col-lg-2 col-md-3 col-sm-4 col-xs-6"></div> <div class="item col-lg-2 col-md-3 col-sm-4 col-xs-6"></div> <div class="item col-lg-2 col-md-3 col-sm-4 col-xs-6"></div> <div class="item col-lg-2 col-md-3 col-sm-4 col-xs-6"></div> <div class="item col-lg-2 col-md-3 col-sm-4 col-xs-6"></div> <div class="item col-lg-2 col-md-3 col-sm-4 col-xs-6"></div> <div class="item col-lg-2 col-md-3 col-sm-4 col-xs-6"></div> <div class="item col-lg-2 col-md-3 col-sm-4 col-xs-6"></div> <div class="item col-lg-2 col-md-3 col-sm-4 col-xs-6"></div> <div class="item col-lg-2 col-md-3 col-sm-4 col-xs-6"></div> <div class="item col-lg-2 col-md-3 col-sm-4 col-xs-6"></div> </div>
栅格系统的列偏移
-
让子盒子往右平移设置margin-left即可,但是要求在不同屏幕下才会生效。需要配合媒体查询
-
通过栅格系统中的列偏移类也可以完成。
底层原理:也是设置百分比margin-left,并且配合媒体查询实现不同屏幕大小生效。
语法:
.col-取值1-offset-取值2
取值1 | 效果 |
---|---|
lg | 大屏及以上屏幕时生效 |
md | 中屏及以上屏幕时生效 |
sm | 小屏及以上屏幕时生效 |
xs | 超小屏及以上屏幕生效(所有屏幕生效) |
取值2: 份数(0~12)
表示该盒子往右偏移的份数
bootstrap全局样式阅读
排版:对齐
底层原理:就是一个text-align:left/center/right
类名 | |
---|---|
.text-left | 文本左对齐 |
.text-center | 文本居中对齐 |
.text-right | 文本右对齐 |
表格:基本
类名 | 效果 |
---|---|
.table | 表格的基本样式(配合thead和tbody使用) |
.table-striped | 隔行变色 |
.table-bordered | 边框 |
.table-hover | 悬停变色 |
按钮:颜色
按钮需要加上基本类
.btn
类名 | 效果 |
---|---|
.btn-danger | 红色按钮 |
.btn-success | 绿色按钮 |
.btn-primary | 深蓝按钮 |
.btn-default | 白色按钮 |
.btn-info | 浅蓝按钮 |
.btn-warning | 黄色按钮 |
.btn-link | 链接按钮 |
按钮:尺寸
按钮默认是中按钮
类名 | 效果 |
---|---|
.btn-lg | 大按钮 |
.btn-sm | 小按钮 |
.btn-xs | 超小按钮 |
响应式工具介绍
在响应式布局中,有时候会设置不同屏幕下元素的显示或者隐藏
- 使用bootstrap中预定的.hidden相关类实现
bootstrap中预定了一些类,可以控制盒子的显示或者隐藏
类名 | 效果 |
---|---|
.hidden | 所有屏幕都隐藏 |
.hidden-xs | 只在超小屏隐藏 |
.hidden-sm | 只在小屏隐藏 |
.hidden-md | 只在中屏隐藏 |
.hidden-lg | 只在大屏隐藏 |
组件介绍
组件比全局样式会多出一些功能出来,但是注意这些功能需要配合js文件一起使用
组件:字体图标
在bootstrap内部,内置了字体图标,只需要直接复制粘贴类名即可
比如:
<span class="glyphicon glyphicon-heart"></span>
具体需要什么组件可以去官网找,基本都能找到
如果需要导航条,bootstrap中已经写好导航条的代码,使用的时候直接复制粘贴即可
注意点:
- 如果需要实现组件中如导航条的功能,需要引入bootstrap中的js文件才行
- bootstrap中的js需要依赖与jquery这个js文件的,所以需要一起引入jquery这个js文件才能生效!
- js文件通过script的src属性引入
<script src="./jquery/jquery-1.12.4.js"></script> <script src="./bootstrap/js/bootstrap.js"></script>
- bootstrap前端框架的简单基本使用
- 【Android】在Android上使用OrmLite数据库框架 之 基本用法
- play! 框架的搭建与基本使用方法
- Java基础知识强化之集合框架笔记31:集合之泛型类的概述和基本使用
- 使用DXUT建立基本框架
- Play框架的基本使用
- SQLite3第三方框架——FMDB的基本使用
- MultipeerConnectivity框架,近场通信的基本使用
- Struts2 验证框架使用基本步骤
- 配置yii框架环境和bootstrap扩展,使用代码生成器。
- 使用EasySYS搭建驱动开发基本框架
- DWZ框架的基本使用
- Android Volley网络框架的基本使用
- [置顶] XUtils3框架的基本使用方法(二)
- XUtils===XUtils3框架的基本使用方法(一)
- Flask学习笔记-在Bootstrap框架下Web表单WTF的使用
- android orm映射框架(类似hibernate)基本使用
- Android-query框架的基本使用(一)
- 探讨要不要使用bootstrap foundation等开源框架
- 使用Bootstrap框架时,PC端测试小屏效果正常,移动端失效