发表于: 2018-05-24 23:57:24

3 439


今天完成的事情:初步学习了bootstrap,利用Bootstrap 勉强实现了任务6 
明天计划的事情:继续学习Bootstrap
遇到的问题:

1.为什么加入字体时必须要用伪元素,两个冒号的伪元素,和一个冒号的有什么不同(伪元素和伪元素对象什么区别)

2.用Bootstrap上的字体图标不需要引入字体文件

-->引入bootstrap之后,直接给一个空元素添加自己想要的图标类名,就直接显示了,甚至不需要下载字体库到本地

3.样式与bootstrap冲突

-->设置id的样式层叠掉Bootstrap的样式

4.渐变的border只有放大有显示,百分之百时无法显示

/*  设置border的渐变效果无作用,放大却有 

border-left:1px solid;

border-image: -webkit-linear-gradient(#fff,#e2e6e7,#fff) 30 30;

border-image: -moz-linear-gradient(#fff,#e2e6e7,#fff) 30 30;

border-image: linear-gradient(#fff,#e2e6e7,#fff) 30 30;

*/ 

-->只好用图片代替了

5.这个案例使用bootstrap 真的是很费劲!!!!!!

收获:

Bootstrap官网 getbootstrap.com
中文网站 v3.bootcss.com 

为什么要使用
  1. 生态圈火,不断地更新迭代
  2. HTML+CSS编码很规范
  3. 让web开发更加便捷
 
为了不影响Bootstrap的使用 要在head中设置相应的meta
设置HTML文件的字符编码
<meta charset="UTF-8">
设置浏览器的兼容模式版本
<meta http-equiv="X-UA-Compatible" content="IE=edge">
声明当前网页在移动浏览器中的相关设置
<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewport视口
视口的作用:在移动浏览器中,当页面宽度超出设备,浏览器内部虚拟的一个页面,将页面容器缩放到设备大小,然后展示
目前大多数手机浏览器的视口的宽度都是980
<meta name="viewport" content="width=device-width//视口的宽度, initial-scale=1.0//初始化缩放,user-scalable=no//禁止用户手动缩放,minimum-scale,maxmum-scale//最小最大缩放">
引入Bootstrap
  1. 如同引入CSS文件一样
  2. 添加条件注释,使ie9以下浏览器可以使用html5的新标签,和响应式
<!--[if lt IE 9]>
        //引入html5shiv文件
        //引入respond文件
<![endif]-->




返回列表 返回列表
评论

    分享到