Bootstrap入门【人类的天堂】
1.WWW:What、Why、Where
What:Bootstrap是一个前端开发框架。简单点说就是别人写好的效果封装起来。
- Bootstrap是2011年Twitter团队为了方便维护PC端和手机端二研发的一个响应式前端框架。
- 用于快速开发Web应用程序和网站的前端框架
- Bootstrap是基于HTML、CSS、JS的,简介灵活,使Web开发更加快捷
- 总结:Bootstrap是一个建立在一个页面,可以在三个中断(PC、平板、手机)上完美战士的响应式前端框架
Why:
- 响应式设计(Bootstrap的响应式CSS能够自适应台式机、平板电脑和手机)
- 移动设备有限
- 浏览器支持
- 容易上手
Where:
- 企业网站、博客、网站后台之类的网站
- 注意:非电商(电商网站分类很多2.
2.环境安装
- 到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属性中的值 格式一定要按要求来写
- 固体容器【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个格子,如果想要再多可以使用栅格嵌套实现
案例:演示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个格子
注意:交换位置的移动不会把其它的格子挤走,会重叠。
Bootstrap入门【人类的天堂】相关推荐
- Bootstrap入门(十三)组件7:导航条
Bootstrap入门(十三)组件7:导航条 1.默认样式的导航条 2.嵌入表单和按钮 3.嵌入文本和非导航的链接 4.组件排列和下拉菜单 5.固定在顶部/底部 6.反色的导航条 7.路径导航 首先先 ...
- Bootstrap入门(三十)JS插件7:警告框
Bootstrap入门(三十)JS插件7:警告框 通过这个插件可以为警告信息添加点击以及消失的功能. 当使用一个.close按钮,它必须是第一个子元素.alert-dismissible,并没有文字内 ...
- Bootstrap入门(二十一)组件15:警告框
Bootstrap入门(二十一)组件15:警告框 通过这些简单.灵活的进度条,为当前工作流程或动作提供实时反馈. 进度条组件使用了 CSS3 的 transition 和 animation 属性来完 ...
- Bootstrap入门(二十九)JS插件6:弹出框
Bootstrap入门(二十九)JS插件6:弹出框 加入小覆盖的内容,像在iPad上,用于存放非主要信息 弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的 首先我们引入 ...
- Bootstrap入门(八)组件2:下拉菜单
Bootstrap入门(八)组件2:下拉菜单 先引入本地的CSS文件和JS文件(注:1.bootstrap是需要jQuery支持的.2.需要在<body>当中添加) <link hr ...
- bootstrap入门步骤
bootstrap入门 bootstrap其实是一个项目 或者叫做框架 是能制作自适应平台 一个页面可以自动根据显示设备的分辨率 调整显示方式 1.超大分辨率显示器1920 2.普通1024–1920 ...
- Bootstrap入门与简述
Bootstrap入门 一.概述 1.Bootstrap简介 Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML.CSS.JavaScr ...
- 前端学习之Bootstrap入门 网格系统
vscode前端常用插件推荐 https://www.cnblogs.com/karthuslorin/p/8577224.html VS code Debug for Chrome项目文件 http ...
- Bootstrap入门需掌握的知识点(一)
转载请务必注明出处: Bootstrap入门需掌握的知识点(一) Bootstrap Bootstrap中文网:http://www.bootcss.com/ 1.什么是 Bootstrap ? 官方 ...
- Bootstrap入门——情景文本颜色及背景颜色
Bootstrap入门打卡1天:学习网址https://v3.bootcss.com/ [全局CSS样式]-[辅助类]关于情景文本颜色和背景颜色的设置 其中,情景文本颜色可以分为六种 -- 1.文本颜 ...
最新文章
- 基于Spring可扩展Schema提供自定义配置支持
- 我脑中飘来飘去的css魔幻属性
- 今天终于把ati集成显卡的linux驱动装好了,看我的3D桌面!哈哈!(博客搬家 2007-07-28 15:56)
- Matlab——GUI程序操作说明
- 如何用 Nacos 构建服务网格生态?
- 【LeetCode】36. Valid Sudoku
- hash函数查找和ASL计算
- 10_python基础—数据序列(推导式)
- Java本质论之关于Java栈与堆的思考
- 图像匹配所用方法总结
- easyUI的iconCls
- Flink SQL Client初探
- 如何在linux系统上添加网口打印机
- 2022年施工员-土建方向-岗位技能(施工员)考题模拟考试平台操作
- usercity 小程序_微信小程序API 用户信息 wx.getUserInfo(OBJECT)
- 严格模式和标准模式的区别(附严格模式实战实例)
- Ubuntu 20.04 LTS 关闭 Swap 分区
- 记录一下,转换树结构数据
- 【并查集】【模拟】家谱
- docker搭建grafana+loki+promtail日志收集系统