发表于： 2019-01-21 20:50:08
1 961
今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）
bootstrap有哪些常用组件？
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。
什么是组件
组件:一般是指软件系统的一部分，承担了特定的职责，可以独立于整个系统进行开发和测试， 一个良好设计的组件应该可以在不同的软件系统中被使用(可复用)。
1.轮播图
2.下拉菜单
3.响应式导航栏
如需使用下拉菜单，首先要引入bootstrap文件，一般都是引入网上别人提供的cdn，当然，自己可以引入自己定制好的bootstrap文件。 然后只需要在 class .dropdown 内加上下拉菜单即可。
给下拉按钮添加dropdown-toggle类和指向性用id，如id="menu1",data-toggle用来控制弹出框元素
给菜单列表添加dropdown-menu类和aria-labelledby="menu1"用来表示指向哪个菜单
响应式导航条
1.向nav标签添加 class .navbar、.navbar-default。
2.向上面的元素添加 navbar-header，navbar-header
3.给navbar-header的button添加data-toggle="collapse" data-target="#example-navbar-collapse"。
4.给下面的div添加class="collapse navbar-collapse" id="example-navbar-collapse"
.navbar-toggle样式是控制3根斑马线的。
.navbar-collapse 样式使导航链接可以在小屏幕状态下收纳到一个菜单按钮中
.collapsed是为了响应折叠插件的
.data-toggle=“collapse”表明这个button是一个折叠控件，其折叠的内容指向data-target="#navbar"，即是id为navbar的内容
明天计划的事情：（一定要写非常细致的内容）
继续完成任务八
遇到的问题：（遇到什么困难，怎么解决的）
屏幕分辨率导致任务八进度过慢，做出来的效果与psd图不相符，前期一直没找到问题所在，
收获：（通过今天的学习，学到了什么知识）
同今天完成的事情
返回列表
评论