Bootstrap入门全局CSS之概览栅格系统
- WWW
- What?
- ①.诞生于2011年,来自Twitter公司,是目前最受欢迎的前端框架
- ②.是一个用于快速开发Web应用程序和网站的前端框架
- ③.Bootstrap是基于HTML、CSS、JS的,简洁灵活,使得Web开发更加快捷
- 概述:Bootstrap是一个建立一个页面,就可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架
- Why?
- ①.响应式设计(Bootstrap的响应式CSS能够自适应台式机、平板电脑和手机)
- ②.移动设备优先
- ③.浏览器支持
- ④.容易上手
- Where?
- 企业网站、博客、网站后台之类的网站
- 电商(电商网站分类太多)
- What?
- 环境安装
- ①.下载Bootstrap库
- http://www.bootcss.com/
- ②.页面中引入库
- bootstrap.min.css:Bootstrap核心样式【添加到head标签中】
- jquery-3.3.1.js:jQuery库【注意:必须在Bootstrap核心库引入之前引入jQuery库】
- bootstrap.min.js:Bootstrap核心库
- 案例1:对比原生态的button和Bootstrap的button区别【徽章效果:class="badge"】
- ①.下载Bootstrap库
- Bootstrap CSS
- 概览
- ①.H5文档类型:<!DOCTYPE html>
- ②.移动设备优先,在head中添加: <meta name="viewport" content="width=device-width,initial-scale=1.0">
- width=device-width:呈现在不同设备上
- initial-scale=1.0:以1:1比例呈现,不会有任何缩放
- user-scalable=no:禁用网页缩放功能
- maximum-scale=1.0:页面放大程序,1.0将禁止用户放大实际尺寸
- 案例2:演示Bootstrap页面在手机浏览器中展示效果
- ③.布局容器
- 固定容器【class="container"】
- 大屏幕(大桌面显示器,大于等于 1200px)
- @media (min-width: @screen-lg-min) { ... }
- 中等屏幕(桌面显示器,大于等于 992px)
- @media (min-width: @screen-md-min) { ... }
- 小屏幕(平板,大于等于 768px)
- @media (min-width: @screen-sm-min) { ... }
- 超小屏幕(手机,小于 768px)
- xs
- 大屏幕(大桌面显示器,大于等于 1200px)
- 流体容器【class="container-fluid"】
- 案例3:演示两种容器区别
- 固定容器【class="container"】
- 栅格系统(Grid System)
- 概念:Bootstrap提供了一套响应式、移动设备优先的流式网格系统 特点:会随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列
- 网格系统策略图
- 案例4:演示Bootstrap网格系统(大PC1行4列,中PC1行3列,平板1行2列,手机1行1列)
- 列偏移:class="col-lg-offset-1"
- 案例5:演示列偏移
- 嵌套:栅格系统可以嵌套
- 案例6:演示栅格系统嵌套(某列中嵌套栅格)
- 交换位置
- 右移动【推】:push
- 左移动【拉】:pull
- 案例7:综合演示栅格系统(包含交换位置)
- 概览
Bootstrap入门全局CSS之概览栅格系统相关推荐
- Bootstrap入门、CSS样式【栅格系统】
1.WWW:What.Why.Where What:Bootstrap是一个前端开发框架.简单点说就是别人写好的效果封装起来. Bootstrap是2011年Twitter团队为了方便维护PC端和手机 ...
- 01.Bootstrap入门、CSS样式【栅格系统】
目录 1. WWW:What.Why.Where 2 1. 响应式设计(Bootstrap的响应式CSS能够自适应台式机.平板电脑和手机) 2 2. 移动设备有限 2 3. 浏览器支持 2 4. 容易 ...
- bootstrap起步 全局css样式概览 全局css样式_栅格 全局css样式_排版
http://www.bootcss.com/基本模板 https://v3.bootcss.com/getting-started/#template bootstrap起步 <!DOCTYP ...
- 前端基础之《Bootstrap(2)—全局CSS样式_栅格系统》
一.Bootstrap要点 1.bootstrap全局CSS样式 2.bootstrap CSS组件 3.bootstrap javascript插件 其实就是官网上的这三个. 二.项目引入Boots ...
- Bootstrap之移动设备优先、栅格系统、媒体查询,响应式式布局
1. html5中head标签里引入 meta Bootstrap 实行移动端优先原则 响应式布局 <meta name="viewport" content="w ...
- Bootstrap的全局css样式部分
Bootstrap的栅格系统: 1. 为了合适的排列与内补,行(row)写在.container或者.container-fluid中: 在手机上(超小屏幕<768px):总是水平排列的, .c ...
- html页面栅格系统,详解CSS中的栅格系统
说到栅格系统(grid system),你也许见过这样的概念: 像这样,通过固定的格子结构,来进行布局设计.这是一种设计风格,而且一直以来很广泛地应用于网页设计领域.这样的风格清晰.工整,可以让网页具 ...
- CSS基础知识——栅格系统
栅格系统 如何设置栅格容器 如何绘制栅格 固定绘制栅格结构 重复绘制栅格结构 自动填充与按比例划分栅格 如何在栅格中放置元素 根据栅格编号放置元素 栅格固定命名放置元素 重复栅格的命名技巧 根据偏移量 ...
- 四十四、栅格系统实现(JavaScript原生脚本、媒体查询)
前言:我们在学习bootstrap前端框架技术的时候,会学到全局css样式:栅格系统.今天,我就用两种方式实现栅格系统,方式一:使用原生JavaScript脚本:方式二:媒体查询 bootstrap栅 ...
最新文章
- 【OkHttp】OkHttp Get 和 Post 请求 ( 同步 Get 请求 | 异步 Get 请求 | 同步 Post 请求 | 异步 Post 请求 )
- 究竟是“二O一六年”还是“二零一六年”?嘴上会说可你会写吗?
- storm的并行度的解释--- ( 看完就能理解 )
- 将JSON对象带有格式的写出到文件中
- 【A】超全!深度学习在计算机视觉领域的应用一览
- SQL Server 2012 管理新特性:AlwaysOn
- spring boot2 坑 - 解决cros跨域问题
- paip.python错误解决19
- 使用GoKart对Go代码进行静态安全分析
- LearnGL - 06.2 - Matrix - 矩阵03 - 逆矩阵、行列式、伴随矩阵、余子式、代数余子式、练习
- 计算机导论第二版清华大学答案,计算机导论(第2版)课后习题答案【清华大学出版社】(13页)-原创力文档...
- 用计算机问你叫什么名字,计算器功能有哪些呢
- 联想微型计算机不支持xp,联想台式机不能装xp怎么办
- python中dispatch_在django,dispatch的用途是什么?
- Ubuntu 无法解析域名
- mysql出现core dumped_mysql 段错误 (core dumped)
- linux ppm转jpg_python将.ppm格式图片转换成.jpg格式文件的方法
- 雪亮工程 视频分类总结
- 槟城usm大学计算机专业怎么样,马来西亚理科大学USM比你想的好太多了!
- android launcher 调用 widget,Launcher3添加桌面appWidget
热门文章
- QQ空间的没落,代表一个时代的结束
- AWS案例研究:海康威视
- 计算机磁盘图标变成软件的了,win7本地磁盘图标变成未知格式怎么恢复正常?...
- epson机器人编程 范例_案例研究
- 人工智能如何改变半导体的分层技术
- centos开机自启动脚本死循环无法开机解决
- Ceres库,从入门到放弃
- 企业信息安全的重点防护应该放在哪个方面?
- 智慧职教平台怎么注册?智慧职教平台注册账号操作方法?以云存储产品配置与应用课程为例,加入学习吧。
- android8 休眠,Android 8.1 平台去屏保 不休眠