全能网站建设完全自学,网站开发排期表,数据中心网络架构,十大现货交易平台排名Bootstrap框架
Bootstrap框架 为什么要学Bootstrap框架 Bootstrap框架: 为我们提供了用来实现响应式开发的公共资源
总结: Bootstrap框架用来实现响应式布局Bootstrap框架中重点学什么 Bootstrap框架提供了很多丰富的网页开发资源,代码有上万行代码.1. 重点学习框架中提供的基…Bootstrap框架
Bootstrap框架 为什么要学Bootstrap框架 Bootstrap框架: 为我们提供了用来实现响应式开发的公共资源
总结: Bootstrap框架用来实现响应式布局Bootstrap框架中重点学什么 Bootstrap框架提供了很多丰富的网页开发资源,代码有上万行代码.1. 重点学习框架中提供的基础样式
2. 重点学习框架中提供的栅格系统(用来实现响应式布局)Bootstrap框架使用 下载 bootstrap.css 生产环境: 该框架代码是经过压缩后的代码,文件的命名是以 .min命名的源码: 将框架的源代码,没有经过压缩的代码使用Sass: 与less一样,也是用来写CSS代码的另外一种工具 使用 网页中必须引用bootstrap.css文件或者对应的bootstrap.min.css bootstrap.css : 没有压缩的
bootstrap.min.css : 压缩过后的文件知识点-Bootstrap-全局样式介绍 排版样式 用来表示网页标题的可以通过 到 表示 还可以通过 ‘.h1’ - .h6’表示标题 在网页中表示副标题通过 标签 或者 ‘.small’ 对齐方式: .text-left 左对齐
.text-center 居中对齐
.text-right 右对齐修改字母大小写转化 .text-lowercase 将字母转为小写字母
.text-uppercase 将字母转化为大写字母
.text-capitalize 将首字母转为大写为什么通过设置类名可以实现字母大小写转化?
本质上就是使用了: text-transform属性实现的列表 .list-unstyled ---- 去掉列表的默认样式
.list-inline ---- 实现列表项一行显示表格 .table --- 设置表格基础样式
.table-bordered ---- 设置带有边框的表格
.table-hover ---设置鼠标悬停表格时候的样式图标字体使用 1. 要引用 bootstrap.css
2. 直接在标签上使用对应的类名就可以了例如:
span classglyphicon glyphicon-hand-right/span知识点-Bootstrap-栅格系统介绍 Bootstrap-栅格系统作用 Bootstrap-栅格系统作用: 就是用来实现响应式布局Bootstrap-栅格系统使用 1. 准备一个父容器,父容器的类名必须叫: container 或 container-fluidcontainer: 表示的是当前父容器是一个居中的盒子 (固定宽度)container-fluid : 表示的是父容器是一个通栏的盒子 (100%)2. 通过栅格参数实现响应式布局[必须要记住的].col-md-值 : 当前盒子在PC端所占的比例(份数, 宽度).col-sm-值 : 当前盒子在ipad端所占的比例(份数, 宽度).col-xs-值 : 当前盒子在移动端所占的比例(份数,宽度).col-lg-值: 当前盒子在超大设备中占的比例栅格系统使用 1. 栅格参数后面的值只能在 1 - 12 之间取值
2. 不管在什么设备下,栅格系统最多将设备分为12列(12等份)注意:1. 如果栅格参数的值相加大于12,那么多余的元素会自动换行阿里百秀案例-Bootstrap
案例底部结构 放一个整体的一个大盒子 div classfooterdiv classwdiv classtop/divdiv classmiddle/divdiv classbot/div/div
/div在ip端只要修改版心的宽度为100% 在移动端只需要将版心宽度为100% 在移动端中,先将ul的宽度改大(自定义一个值),目的为了保证li一行显示 由于ul的宽度超出了其父元素的宽度,所以给其父元素设置滚动条 overflow: scroll | auto知识总结 行高只能实现单行文字垂直居中 设置鼠标样式 cursor: help | pointer | move响应式布局
