看的有关视频做的笔记,对bootstrap中涉及的知识点做了一定的解析,很有用哦!(新手上路,有不合适的地方可以指出哦!)
下面进入正题:
Bootstrap是当下最流行的前端框架(界面工具集)
特点就是灵活简介,代码优雅,美观大方
其目的就是为了让web开发更敏捷
是Twitter公司的两名前端工程师Mark Otto和Jacob Thornton在2011年发起的,并利用课余时间完成第一个版本的开发。
框架:库 lib library
jQuery作为一个框架来讲,提供了一套比较便捷的操作DOM的方式
把大家都需要的功能预先写好的一些文件,这就是一个框架
为什么使用Bootstrap?
生态圈火,不断地更新迭代
提供一套美观大方的界面组件
提供一套优雅的html+css编码规范
简单的说:
Bootstrap让我们的web开发更简单,更快捷
注意:使用bootstrap并不代表不用写css样式,而是不用写 绝大多数大家都会用到的样式
了解:
视口的作用:在移动浏览器中,当页面宽度超出设备的宽度,浏览器内部虚拟了一个页面容器缩放到设备这么大,然后展示。
目前大多数手机浏览器的视口(承载页面的容器)宽度都是980;
视口的宽度是可以通过meta标签设置。
视口的宽度
initial-scale:初始化缩放
user-scalable:是否允许用户自行缩放(yes/no,1/0)
minimum-scale:最小缩放,一般设置了用户不允许缩放就没必要设置最小最大缩放了
maxmum-scale:最大缩放
meta:vp 是下面这一行的快捷写法
<meta name="viewport" content="width=device-width, initial-scale=1.0">
条件注释:
<!--条件注释的作用就是当判断条件满足时,就会执行注释中的HTML代码
不满足时会当做注释忽略掉-->
一般来说第三方引入的库我们放在上面,自己写的定义在下面
原因:容易覆盖
/*媒体查询 当使用min-width作为判断条件一定要从小到大 其原因是css从上往下执行*/
可以写两个判断条件
@media (min-768px) and (max-992px){
/*这里的代码只有当条件满足时才会执行*/
.container{
750px;
}
}
建议以后在HTML中将脚本的引入放到页面最底下
container类
用于定义一个固定宽度且居中的版心
字体图标格式:
eot:embedded-opentype
svg:svg
ttf:truetype
woff:woff
+号选择器就是说我找满足这个条件他后面的兄弟元素
bbg网站可以自己制作按钮然后生成的代码做bootstrap扩展代码
下面这是电脑自带的字体,就不用@font-face
Icommon.io
上这个网站可以将自己制作的图标导入转换
设置图片的名字、前缀
download下载下来
第三方依赖
jQuery
bootstrap框架中的所有js组件都依赖于jQuery实现
html5shiv
让低版本的浏览器可以识别HTML5的新标签,如header、footer、section等
respond
让低版本得浏览器可以支持CSS媒体查询功能
<!--[if lt IE 9]>
<script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/respond/respond.min.js"></script>
<![endif]-->
基础css这块只是将我们以前常用的界面元素做了样式美化,如果需要使用,找到相应类名加到元素上
就是将我们日常使用的一些功能块例如下拉菜单提前写好,我们使用时直接找到对应的demo,作相应调整。
制表符,这是在写项目时所需要的
例:
约定编码规范:
html约定:
在head中引入必要的css文件,优先使用第三方的css,方便我们自己的样式覆盖
在body末尾引入必要的js文件,优先引用第三方的js,注意js文件之间的依赖关系,比如bootstrap.js依赖jQuery,那就应该先引用jQuery.js然后引用bootstrap.js
css约定:
除了公共级别样式,其余样式全部由 模块前缀
尽量使用 直接子代选择器,少用间接子代,避免猎杀
favicon站点图标
<link rel=”shortcut icon” type=”image/x-icon” href=”favicon.ico”>
html中插入图表链接,可以通过emmet link:favicon插入
在我们默认的样式表中将默认字体设置为:
构建页面结构:
Ctrl+f查找搜索
Font-family:后面写字体的时候什么时候用引号什么时候不用引号?
当后面有空格的时候用引号,没有空格的时候可以不用引号
hover图片展示:
例:
.mobile-link:hover>img{
Display:block;
}
按钮样式生成:在线生成按钮网站推荐:http://blog.koalite.com/bbg/
小屏幕隐藏:
visible-xx-xx:最后一个xx是决定显示时的display到底是啥
行内元素,行内块级元素,块级元素
Bootstrap扩展
通过bootstrap文档对导航条样式的设置发现,其实本身是有一个类似于主题的概念
navbar-default:默认的外观
navbar-inverse:暗色背景的样式
所以我们希望可以通过自定义一套完整的风格
例:
navbar-itcast
.navbar-itcast{
……
}
具体代码参考navbar-default实现即可
小技巧:谷歌浏览器开发工具保存修改
步骤:
在source中,
左边右键点击会出现一行字,然后点击
点击允许
然后在下面index.html上点击,其中有一行 map to file ……
点一下会自动出现一个选项
点击,只要这两个文件一匹配,其他的结构会自动匹配
这样就可以实现在浏览器下面修改源码了
在一个较小屏幕下展示一个超宽的图片,想让图片居中显示
有两种方法:
1. 背景图
2. position-absolute-left 50% margin-left=-width/2
background的使用:
background-size:cover;铺满,是按照较小的边缩放到目标大小为止
background-size:contain;铺满,是按照较大的边缩放到目标大小为止
background-size:length;就是一个具体的值 如:100px 一般来说设置两个,一个横向的一个纵向的
background-size:percentage;百分比 如90% 90%
图片响应式:
目的:
各种终端都需要正常显示图片
移动端应该使用更小(体积)的图片
Ctrl+/是快速注释
pull-right可以让元素浮动到右边
当图标显示的是框框时说明,字体不对,选择的字体里面没有这个字符
解决方法:1.加icon
2.在他的css样式下加font-family
strong标签是字体加大加粗,从含义上讲要强调这个文字
sub标签是下标 pub是上标
role属性 aria-xxxxx(aria-controls)属性 只是跟语义有关系 ,跟功能没有任何的关系
由于轮播图片超宽造成的影响:
美工为了在不同屏幕下更好地展示将图片两边做的非常宽,但是我们大多数情况的页面宽度都无法满足这样的图片宽度
而且bootstrap的样式中默认将图片的max-width设置为100%
造成界面图片缩放
想在一个较小的屏幕下显示一个超宽的图片,并让图片居中显示
两种办法:
换用背景图的方式,background-positon:center center,
使用img元素绝对定位,left:50%,margin-left:-width/2
background使用:
将容器的高度固定(410px)
将轮播图改为背景显示
由于可能图片的高度不一定是410px
所以需要设置css3中的background-size
background-size:
length
如background-size:100px 100px 将背景图固定到多大尺寸
percentage
如background-size:90% 90% ,以百分比的形式设置背景大小
cover
1. 背景图片等比例缩放
2. 让背景图相对较小边放大到目标容器大小结束
如:一张100*200的背景图放到一个300*400的盒子中,最终背景图片的大小是300*600
因为背景图的最小边为100,将100放大到目标容器300的宽度,放大了3倍,最终结果300*600
contain
1. 背景图片等比例缩放
2. 让背景图片相对较大边放大到目标容器大小结束
如:一张100*200的背景图放到一个300*400的盒子中,最终背景图片的大小是200*400
因为背景图的较大边为200,将200放大到目标容器400的高度,放大了2倍,最终结果200*400
图片响应式:
目的
各种终端都需要正常显示图片
移动端应该使用更小(体积)的图片
实现方式
将元素中直接设置的背景图片删除,换成两个data-属性(如:data-img-sm=
“小图路径”,data-img-lg=“大图路径”)
通过js的方式获取屏幕的宽度
判断屏幕宽度是否小于一定的值(如:768)
根据判断情况决定使用具体的大图还是小图
window resize事件
由于上一步我们实现的过程是指在页面加载完成判断一次
当用户手动调整页面宽度过后没有及时发生变化
所以我们可以通过window的resize事件中重新完成以上操作来解决这个问题
小图片不需要使用背景的方式
小图如果还是使用背景的样式,当屏幕特别小时,效果很差
所以当时用小图时,改用img的方式
按照目前的情况,如果是小图展示则不需要给容器加上410px的固定高度
所以我们可以通过css媒体查询的方式解决
网格(栅格)系统
该板块当屏幕为中等尺寸时分为3列,较小屏幕是分为2列
所以使用网格系统划分
<div class=”col-sm-6 col-md-4”>
<!--....-->
</div>
<!--.....-->
媒体对象样式
每一个小块的样式可以通过bootstrap中的媒体对象样式实现
响应式辅助类型
整个板块在超小屏幕下是隐藏起来的
只需要给当前板块加上hidden-xs的class
pull-left左边文字段落
pull-right右边文字段落
写fade的时候,有active的要加上in----- fade in active
吸顶效果:
data-spy=”affix”
data-offset-top=”什么位置出现”
data-offset-bottom=”什么位置消失”
less语法介绍:
Sass styuls
一款比较流行的预处理CSS,支持变量、混合、函数、嵌套、循环等特点
http://www.w3cplus.com/css/less
什么是预处理css
css语言的超集,比css更丰满
Less支持完全标准的css语法,可以在里面原封不动的css代码
快速入门:
Less是一门预处理语言,他扩展了css语言,增加了变量,Mixmin,函数等特性,
使css更易维护和扩展。Less可以运行在node或浏览器端。
语法:
注释://模板注释,这里的注释转换为css后将会删除
/*css注释语法 转换为css后仍然保留*/
定义变量:
将需要重复使用或经常修改的值定义为变量,需要使用的地方引用
例:定义一个变量
@maincolor:#e92322
main.less怎样转换为main.css?
先把在电脑中的地址复制下来
打开cmd命令
cd 右键编辑粘贴
lessc main.less(文件名字) > main.css
嵌套:
如果你在css中经常使用子代选择器,那less的嵌套语法使用起来非常happy
Mixmin:
定义一个代码段,()里的内容是参数,参数中:后的内容是参数的默认值(没有传参数)
定义一个类
Import:
我们可以在开发阶段将样式放到多个文件中,最后通过@import的方式合并
这个_p.less是提前写好的
@import url(‘_p.less’);
或者:
在文件里这样写
另一个文件里写 @h=100px;
这样在命令行那里面依旧能查得到
函数:
内置函数
lighten:将一个颜色变亮
lighten(#000,10%);//#1a1a1a
darken,将一个颜色变暗
dark(#000,10%);//#e6e6e6
在bootstrap4中是全面使用rem的,下面是
px
em
rem
之间的区别与介绍