01.Bootstrap入门、CSS样式【栅格系统】
目录
1. WWW:What、Why、Where 2
1. 响应式设计(Bootstrap的响应式CSS能够自适应台式机、平板电脑和手机) 2
2. 移动设备有限 2
3. 浏览器支持 2
4. 容易上手 2
1. 企业网站、博客、网站后台之类的网站 2
2. 注意:非电商(电商网站分类很多) 2
2. 环境安装 2
3. Bootstrap CSS 3
3.1. 概览 3
3.1.1. H5文档类型 3
3.1.2. 移动设备优先 3
3.1.3. 布局容器 3
3.2. 栅格系统(Grid System) 4
3.2.1. 概念 4
3.2.2. 案例:演示Bootstrap网格系统 4
3.2.3. 案例:演示列偏移offset。 5
3.2.4. 案例:演示栅格系统嵌套(某列中嵌套栅格) 5
3.2.5. 交换位置:右移动:push 左移动:pull 6
1.WWW:What、Why、Where
What:Bootstrap是一个前端开发框架。简单点说就是别人写好的效果封装起来。
- Bootstrap是2011年Twitter团队为了方便维护PC端和手机端二研发的一个响应式前端框架。
- 用于快速开发Web应用程序和网站的前端框架
- Bootstrap是基于HTML、CSS、JS的,简介灵活,使Web开发更加快捷
- 总结:Bootstrap是一个建立在一个页面,可以在三个中断(PC、平板、手机)上完美战士的响应式前端框架
Why:
- 企业网站、博客、网站后台之类的网站
- 注意:非电商(电商网站分类很多)
- 环境安装
- 到Bootstrap官网下载Bootstrap库。官网:Bootstrap中文网
- 页面中引入库:
- bootstrap.min.css:在Bootstrap中有很多CSS样式。所以要有CSS文件
- bootstrap.min.js:严格意义上来说,Bootstrap是基于jQuery的一个库,jQuery又是javaScript的一个库。所以又要引入一个bootstrap.min.js库
- 案例:在页面上创建一个Button,观察原生态的button和Bootstrap的button区别
原生button:
<button>原生button</button>
只有一个普通的按钮
Bootstrap的button:
<button class="btn">Bootstrap的button</button>
我们来刷新页面看一下效果对比,Bootstrap的按钮很明显 样式不一样,加了背景色,加了按钮边框的样式
我们再来看一个效果:
<button class="btn btn-default">Bootstrap的button</button>
现在我们再来看效果,边框,背景色,而且还加了鼠标移动上来,和鼠标离开的样式。如果我们用js来写。想想是不是要复杂很多。现在这些效果全都封装在Bootstrap中。是不是很爽。
我们再来个更爽的:
<button class="btn btn-success">未读69条</button>
<button class="btn btn-success">未读<span class="badge">69条</span></button>
再来看这个效果,是不是很舒适
注意:这里class属性中的值 格式一定要按要求来写
- Bootstrap CSS
- 概览
- H5文档类型
Bootstrap必须是基于H5的,我们来看一下网页的首行代码 <!DOCTYPE html>这个就是H5的
- 移动设备优先
现在我们在页面F12看效果,选中手机模式,我们可以看到效果很模糊,看不清楚。现在页面不支持手机端。我们还需要在网页head标签中添加一句代码:
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
刷新页面,是不是页面美观多了
- 布局容器
- 固体容器【class=”container”】
示例代码:
<div class="container">
<button>原生button</button>
<button class="btn btn-default">Bootstrap的button</button>
<button class="btn btn-success">未读69条</button>
<button class="btn btn-success">未读<span class="badge">69条 </span></button>
</div>
我们给div加上背景色样式 再来看一下效果
<style type="text/css">
.container{
background-color: pink;
}
</style>
Div自动居中了
固体布局就是页面两边后自动留白,div自动居中
- 流体容器【class=”container-fluid”】
示例代码:
<div class="container-fluid">
<button>原生button</button>
<button class="btn btn-default">Bootstrap的button</button>
<button class="btn btn-success">未读69条</button>
<button class="btn btn-success">未读<span class="badge">69条</span></button>
</div>
流体布局就是自动铺满,永远是占满整行
- 栅格系统(Grid System)
- 概念
栅格系统,可以理解为就是网格,格子
每行最多12个格子,如果想要再多可以使用栅格嵌套实现
1.案例:演示Bootstrap网格系统
<h1>栅格系统</h1>
<div class="row">
<div class="col-lg-1 b">1</div>
<div class="col-lg-1 b">2</div>
<div class="col-lg-1 b">3</div>
<div class="col-lg-1 b">4</div>
<div class="col-lg-1 b">5</div>
<div class="col-lg-1 b">6</div>
<div class="col-lg-1 b">7</div>
<div class="col-lg-1 b">8</div>
<div class="col-lg-1 b">9</div>
<div class="col-lg-1 b">10</div>
<div class="col-lg-1 b">11</div>
<div class="col-lg-1 b">12</div>
</div>
现在是一行12个格子,注意:格子的排列会受到页面的分辨率影响排位一列
如果再多一个格子就会自动换行
如果我们把第一个格子的col-lg-1写成:<div class="col-lg-3 b">1</div>
就表示第一个格子占12个格子中的三格格子
col:表示列,lg:大屏幕,3:表示占的格子数量
我们在看一个例子:
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 b">1</div>
<div class="col-lg-3 col-md-4 col-sm-6 b">2</div>
<div class="col-lg-3 col-md-4 col-sm-6 b">3</div>
<div class="col-lg-3 col-md-4 col-sm-6 b">4</div>
</div>
默认一行四列,根据页面的缩小会变为一行3,剩下的自动到第二行。页面再缩小就会变为一行2个格子。继续缩小就会变为一行一个格子
如果我们想一行最少两个格子,只需要在加上:col-xs-6
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 b">1</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 b">2</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 b">3</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 b">4</div>
</div>
xs表示最小
- 案例:演示列偏移offset。
示例代码:
<div class="row">
<div class="col-lg-4 col-lg-offset-4 b">1</div>
</div>
现在一行有一个盒子,这个盒子占了4个格子。如果我们想让这个盒子居中,占在第5个格子开始。就是以上代码
col-lg-offset-4
表示偏移格子,4表示偏移四个格子
<div class="row">
div class="col-lg-4 col-lg-offset-5 b">1</div>
<div class="col-lg-4 col b">2</div>
</div>
如果像这种有两个盒子,第一个盒子偏移就会把第二个盒子往后面挤
- 案例:演示栅格系统嵌套(某列中嵌套栅格)
以上面的代码为例,现在需要再第二个盒子内再添加三个盒子,每个盒子占4个该怎么写?这种情况我们就需要用到嵌套,在盒子内嵌套格子
<div class="row">
<div class="col-lg-4 col-lg-offset-4 b">1</div>
<div class="col-lg-4 col b">
<div class="row">
<div class="col-lg-4 b">1</div>
<div class="col-lg-4 b">2</div>
<div class="col-lg-4 b">3</div>
</div>
</div>
</div>
第二个盒子里面嵌套了三个盒子,每个盒子占了四个格子
- 交换位置:右移动:push 左移动:pull
列交换位置:
<div class="row">
<div class="col-lg-4 col-lg-push-8 b">1</div>
<div class="col-lg-4 b">2</div>
<div class="col-lg-4 col-lg-pull-8 b">3</div>
</div>
把第一个盒子和第三个盒子交换位置,首先每个盒子占了四个格子,第一个盒子要往右移动8个格子,第三个盒子要往左移动8个格子
注意:交换位置的移动不会把其它的格子挤走,会重叠。
01.Bootstrap入门、CSS样式【栅格系统】相关推荐
- bootstrap 一排5个_BootStrap从基础到项目实战_第1季_03章_02_CSS样式栅格系统实例
目标 目标一.理解什么是栅格布局 目标二.掌握栅格布局具体应用 目标三.掌握BootStrap通用CSS样式(排版.代码.代码.表单.按钮.图片.辅助类.响应式工具) 内容 一.BootStrap全局 ...
- bootstrap课程4 bootstrap的css样式有哪些内容需要注意
bootstrap课程4 bootstrap的css样式有哪些内容需要注意 一.总结 一句话总结: 1.如何选择产品(框架)的版本? 大版本下的最后一个版本,但是同时又要选择稳定的版本,也就是如果做产 ...
- bootstrap 全局 CSS 样式
http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...
- Bootstrap全局CSS样式之表单
.form-control--将单独的表单控件赋予一些全局样式,如默认宽度width:100%. .form-group--包裹表单控件,获得最好的排列: .form-inline--将表单设置为内联 ...
- bootstrap 学习 ---css样式学习
bootstrap 适用于响应式布局,移动设备优先的web项目 1.学习bootstrap需要引入bootstrap的css,jquery,bootstrap的js,注意:jquery文件必须在boo ...
- Bootstrap全局css样式的使用
教程目录 0x00 教程内容 0x01 准备环境 1. 新建HTML文件 2. 用浏览器打开 0x02 Bootstrap全局样式的使用 1. 引入Bootstrap样式资源 2. 修改css样式 3 ...
- bootstrap全局css样式
一.富文本编辑器 富文本编辑器,RichTextEditor,简称RTE,是一种可内嵌于浏览器,所见即所得的文本编辑器.它提供类似于比如谷歌.火狐效果都非常不错, 在功能的丰富性来说,还是IE强些(但 ...
- Bootstrap全局css样式_按钮
链接被作为按钮使用时的注意事项 如果 <a> 元素被作为按钮使用 -- 并用于在当前页面触发某些功能 -- 而不是用于链接其他页面或链接 当前页面中的其他部分,那么,务必为其设置 role ...
- Bootstrap全局css样式_表格
条纹状表格 通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式.<!DOCTYPE html> <html lang=" ...
最新文章
- mysql类exadata功能_几类关系型数据库的数据解决方案
- .net lucene 实战搜索(二)----- 基本之索引
- golang channel 管道 通道 信道 使用总结
- python好用-Python里三个好用的调试神器
- Grails with ATS Transformation tutorial with a demo example
- Java 网络IO编程总结(BIO、NIO、AIO均含完整实例代码)
- 浅谈关于nil和 null区别及相关问题
- 编写junit 测试_使用JUnit和Repeat注​​释编写有效的负载测试
- linux iso合并,把RedHat Linux 5.0的CD ISO合并成DVD的脚本
- python3字符串转数字_Python3基础语法和基本数据类型
- 38 WM配置-作业-定义库存转储和补充控制
- 鸿蒙车载智慧屏评测,华为智慧屏S Pro体验:告诉你鸿蒙OS有多优秀?
- 红米note3支持html,红米note3如何检测硬件信息?指令代码说明
- 什么是python基础教程-python基础教程之python是什么?概念解析
- 无法打开文件“libboost_system-vc110-mt-gd-x32-1_68.lib”
- linux孤儿进程组深入理解,unix基础---有关于孤儿进程组和终端会话的理解-------值得一看!!!...
- Linux下MongoDB服务安装
- Java开发工程师项目经验以及个人介绍实例
- AD20软件安装详细教程
- 笔记本 续航测试软件,续航能力横评测试
热门文章
- Got a packet bigger than ‘max_allowed_packet’ bytes?问题解决
- Wdcdn缓存加速系统1.0发布
- Google Inception Net介绍
- 怎样更改IE临时文件夹路径
- bzoj 1056 [HAOI2008]排名系统(1862 [Zjoi2006]GameZ游戏排名系统)
- linux请求超时 ping_网站 ping 超时
- Linux安全基线配置全解析
- 那天,我们笑着说再见,却深知再见遥遥无期
- 黄山“景区旅游电子商务网”初步运营稳定了
- 奥斯特洛夫斯基谈“幸福”