Bootstrap前端开发框架【使用教程】
Bootstrap 来自 Twitter(推特),是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS 和 JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。
中文官网:http://www.bootcss.com/
官网:http://getbootstrap.com/
推荐使用:http://bootstrap.css88.com/
框架:顾名思义就是一套架构,它有一套比较完整的网页功能解决方案,而且控制权在框架本身,有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。
Bootstrap框架优点:
标准化的html+css编码规范
提供了一套简洁、直观、强悍的组件
有自己的生态圈,不断的更新迭代
让开发更简单,提高了开发的效率
Bootstrap自出现至今一共有3个类型的版本,使用最多最稳定的是3.x.x的版本。
2.x.x:停止维护,兼容性好,代码不够简洁,功能不够完善。
3.x.x:目前使用最多,稳定,但是放弃了 IE6-IE7。对 IE8 支持但是界面效果不好,偏向用于开发响应式布局、移动设备优先的 WEB 项目。
4.x.x :最新版,目前还不是很流行
Bootstrap 使用四步曲: 1. 创建文件夹结构 2. 创建 html 骨架结构 3. 引入相关样式文件 4. 书写内容
1.创建文件夹结构
2.创建html骨架结构
<!--要求当前网页使用IE浏览器最高版本的内核来渲染-->
<meta content="IE=edge" http-equiv="X-UA-Compatible"><!--视口的设置:视口的宽度和设备一致,默认的缩放比例和PC端一致,用户不能自行缩放--><meta content="width=device-width, initial-scale=1, user-scalable=0" name="viewport">
<!--[if lt IE 9]><!--解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题--><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><!--解决ie9以下浏览器对 css3 Media Query 的不识别 --><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
3. 引入相关样式文件
<!-- Bootstrap 核心样式-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
4. 书写内容
直接拿Bootstrap 预先定义好的样式来使用
修改Bootstrap 原来的样式,注意权重问题
学好Bootstrap 的关键在于知道它定义了哪些样式,以及这些样式能实现什么样的效果
布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器,它提供了两个作此用处的类。
1. container 类
● 响应式布局的容器 固定宽度
● 大屏(>=1200px) 宽度定为1170px
● 中屏(>=992px)宽度定为970px
● 小屏(>=768px) 宽度定为750px
● 超小屏 (100%)
2. container-fluid 类
● 流式布局容器 百分百宽度
● 占据全部视口(viewport)的容器
● 适合于单独做移动端开发
Bootstrap前端开发框架【使用教程】相关推荐
- 移动布局之rem适配布局、Bootstrap前端开发框架
欢迎加入前端技术营!如果你也是前端学习者或者对前端有学习的想法,那就跟着我一起从零开始进击前端. 致力于尽可能详细且简洁的介绍前端知识.自己的捷径,也是学习路上的记录.欢迎探讨 目录 一.L ...
- 根据黑马pink老师讲的bootstrap而做的笔记(不过多赘述,简洁高效)第二章 第二节 bootstrap前端开发框架以按钮为例(引用网站上已经设置的布局和样式)
咱们大部分围绕着两个问题来叙述 是什么? 怎么做? 一.目录(总体,这门课要学的目录)(现在是第二章,bootstrap前端开发框架) 1.响应式开发 2.bootstrap前端开发框架 3.boot ...
- Bootstrap前端开发框架
1. Bootstrap前端开发框架 2.1 Bootstrap简介 Bootstrap来自Twitter (推特) ,是目前最受欢迎的前端框架.Bootstrap 是基于HTML.CSS 和JAVA ...
- Bootstrap(前端开发框架一)
目录 一.什么是WWW? 1.What:Bootstrap是什么 2.Why:为什么学Bootstrap? 3.Where:什么时候用Bootstrap? 二.Bootstrap的环境安装 1.下载B ...
- 简洁、直观、强悍的Bootstrap前端开发框架
简洁.直观.强悍的Bootstrap前端开发框架 简洁.直观.强悍的Bootstrap前端开发框架,让我们的web开发变得更迅速.简单. 在我们学习Bootstrap前端开发框架之前,我们先来了解一个 ...
- Bootstrap(前端开发框架)
目录 前端框架的理解 一.3个WWW 1.what?是什么 2.why?为什么使用 3.where?使用领域 二.环境安装 1.下载Bootstrap库 2.页面中引入库 三.案例 以网上书城为例 案 ...
- Bootstrap前端开发框架03(完结)
案例1:实现搜索书籍页面 组件:媒体对象-Media object <!DOCTYPE html> <html><head><meta charset=&qu ...
- Bootstrap简洁、直观、强悍的前端开发框架
Bootstrap简洁.直观.强悍的前端开发框架,让web开发更迅速.简单. Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.简洁 ...
- html5前端开发框架模板,HTML5中50个免费的Bootstrap前端框架模板
原标题:HTML5中50个免费的Bootstrap前端框架模板 毫无疑问,Bootstrap模板的受欢迎程度依然如雨后春笋般迅速增长,这股力量就在不久前还被低估了呢,Bootstrap前端框架基于最新 ...
最新文章
- 【转载】基于AFNetWorking3.0的图片缓存分析
- Docker - 实战TLS加密通讯
- 入门 | 使用 SQL 构建一个关系数据库比你想的更容易
- mysql 分区 导出_mysql普通表变成分区表导入导出
- 【转】VS2013动态库文件的创建及其使用详解
- iOS-UIScrollView以及代理
- 电子元器件选型——二极管
- 【Code】numpy、pytorch实现全连接神经网络
- 【工作规划】未来自我学习计划及发展注意事项
- Spring Cloud踩坑指南
- “科林明伦杯”哈尔滨理工大学第十届程序设计竞赛——C.面积【签到题】
- python 方差齐性检验_已知F和sig值_方差齐性 sig_如何判断方差齐性_怎么判断方差齐不齐...
- 学校计算机报损报废申请表,学校财产登记报损上报制度
- 排序---希尔排序实现和性能分析
- 百度2015校园招聘面试题回忆录(成功拿到offer)
- 树莓派python控制gpio_树莓派的GPIO控制
- 高频放大器等效电路分析
- 6种让机器人实现避障的方法
- 1117. 单词接龙
- java的字节码文件是什么后缀_【Java虚拟机1】Java字节码文件格式入门
热门文章
- 华氏摄氏温度转换程序
- bootstrap checks failed [1]: the default discovery settings are unsuitable for production use; at l
- 【基础教程】基于Matlab画花式箱体图
- 华为云挂载盘配置挂载
- nc提示java过期_用友NC系统使用过程中常见问题和解决方法!财会必看!
- uniapp微信小程序获取当前位置信息、经纬度转换、导航地图实现
- 2020-10-2 大二2020下训练三
- 怎么把云服务器的文件拷出来,怎么把云服务器的文件拷出来
- word文件限制编辑密码如果找回
- 报错:Expected comma jsonc(514)