bootstrap简洁、直观、强悍的前端开发框架,让Web开发更迅速,简单(背的东西较多)
例1
缩放倍率,为1表示不缩放。
例2
表示在手机上能用手撑开放大用,值可以为yes,no,0,1。
例3
让字体在不同的设备上显示的正常一些。
例4
例5:媒体查询(两种用法)
法一
法二也可以在css文件中操作,如下所示
渲染模式
Ie=edge表示采用最新的渲染模式
怪异盒子模型
此时显示div的宽高是200,200,不加边框
Boot模版—–index4 在网站上可以下载这些.css和.js文件
Bootstrap的模版—index5
因为bootstrap是依赖于jq的,所以要引入jquery-1.11.3.js和bootstrap.min.js,而且要放在后面。
Container容器,文本内容会根据浏览器宽度随之移动—–index5
Container-fluid容器,文本内容宽度占满全屏 不会随之移动
按钮index6.html
按钮以默认的形式显示
Btn按钮的属性可以运用在a标签和input控件上
按钮也分大小
按钮也能占满一行
注:一般抒写时都会用container容器包着
关于列表—–index7.html
去掉默认的样式
List-inline是水平
dl-horizontal让dt,dd水平的意思
关于图片—-index8.html
图片会跟着父容器的大小随之改变,填充整个屏幕
可以把图片调成圆形,倒圆角,加白边等
关于表格—-index9.html
三者的差别在于第二个在table中添加class=”table”,
第三个在table中添加class=”table table-hover”,鼠标移入就变色
给表格加边框
隔行变色
table-responsive 随着父容器大小的变化而变化
关于文本颜色—-index10.html
有五种颜色属性text-success,text-info,text-danger,text-warning,text-primary
可加背景颜色
第一个大写,第二个小写,第三个首字母大写
text-justify让文本看起来更好看,换行时适当的调整间隔
对齐方式Text-left,text-right,text-center
栅格系统—-index11.html(重点)
栅格系统将一行分成12列
数字代表文字占几份 如上图李照占5份,也可以如下设置
下面的设置,当小于md时,李照1和李照就不再同一行了,因为李照已失效,但是div是块级元素。
文本内容往右移3份,自己占两份
当达到一定条件时,文本“张海涛”消失。
注意:如果不加row,则相当于是浮动,p标签则不是独占一行
如果给p标签加颜色红色,则整行都是红色
Bootstrapdemo小例子—-index12.html(不太理解)
上午bootstrap
例一—-index.html
两个字重叠
表单—-index2.html(常用)
1、普通表单
2、行内表单
3、水平表单
内容比如用户名,后面的框在同一行
下拉(上拉)菜单—–index3.html(常用)
把总体的class改成dropup
Dropdown。Dropup有相对定位的效果,ul有绝对定位的效果。
导航—–index4.html
页签式导航
胶囊式导航
两端对齐的胶囊式导航
竖着的胶囊式导航
字体图标—–index5.html去中文网找组件。象形文字图标(记得引入fonts文件夹)
可以修改图标的颜色
可以设置字体,要引入字体包,即让div的字体设置为汉仪行楷简字体。可以百度搜索下载
图标可以写在button内,但必须写在一个空标签里。
按钮组—–index6.html
让按钮竖起来
两端对齐
警告框—–index7.html
代表X号。
面包屑导航—–index7.html
分页条—-index7.html
此条不居中
分页器
此条居中
标签—index7.html
巨幕—index7.html
页头—index7.html
下面会有一条横线
水井—index7.html
进度条—index7.html
动态的进度条
进度条、斑马紋、动态、颜色、进度条的宽度、显示宽度
缩略图—index7.html
- 列表内容
媒体对象—index7.html
media-middle垂直居中
三种样式,左图右字,左字右图,左右图中间字。
列表组—index7.html
面版—index7.html(较常用)
在最外面div加panel-danger,则只会改变面版头部的颜色。
导航条—index8.html
导航条、默认颜色、定位在上面、容器水平居中、导航、胶囊式导航、导航条里的导航使文字垂直对齐与之前颜色相反的颜色、默认选中、成为一个选项、导航条颜色改成与之前相反的颜色
可以修改颜色
导航条里的表单,如下所示
Right则表单靠最右边
可以让文本对齐
可以让按钮对齐
注意—–
在导航条后面写文字时,要注意以下情况。
下午
JS Plugin插件—index2.html
1、下拉菜单的显示
2、加载loading
3、重置reset
点击第二个按钮,将第一个按钮的值重置
4、工具提示—–index3.html
默认方向是上 这个设置的是右
5、弹出框—-index4.html
也可以加方向
6、标签页用法—-index5.html–(常用)
点击不同的导航显示不同的内容
7、模态框—-index6.html–
8、折叠—-index7.html–![这里写图片描述](https://img-blog.csdn.net/20170818102942939?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaXRzenQ4ODg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
加in默认是打开的,不自动收回 ,不加in,则打开后自动收回。
只改变第一行的颜色
手风琴效果
9、轮播—-index8.html–![这里写图片描述](https://img-blog.csdn.net/20170818103113684?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaXRzenQ4ODg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
data-interval用来设置轮播时间