Bootstrap基础学习-1_html/css_WEB-ITnose
闲言碎语不多讲,开始总结自己这段时间BS笔记!
1.在结构内容方面,BS对结构内容的控制基本是有类来控制,比如对结构的控制就是
这一块div的类名中,是由col-md-4,col-xs-6这两个类名来控制他的框架宽度;其中col代表是栅格,md代表客户端显示器的宽度为pc中屏,同样的xs则代表客户端显示器为超小屏,也就是手机屏;4,6就代表了栅格的长度,意思就是在中屏显示器下宽度为4个栅格,在手机端宽度为6个栅格 ,一般情况下把把一整块div最多可以划成12个栅格,所以他的兄弟div在中屏下则是8个栅格!
2.结构上面说完了,那就说说页面中具体的一些组件,先说说导航吧,原先我们自己制作导航是由一个基本的内联ul组成(以下css在BS中可以实现),
- W3cplus
- Blog
- CSS3
- jQuery
- PHP
但在BS中,则有nav这个类来实现,但是nav这个类需要和其他类合用才能让页面效果发挥出来,譬如说nav-pills和nav-tabs,如果是垂直导航的话则在类名中加入nav-stacked
3.说完导航条再来说说下拉菜单,BS中的下拉菜单得依靠它自带的一个js文件来实现,而它本身的js还依靠了JQuery,所以这两个文件是必备的。值得说明的是关于这个下拉菜单代码方面有点复杂,button中的data-toggle="dropdown"必须和外层的div类名相同。
4.貌似该说说表单了,在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名“form-control”,将会实现一些设计上的定制效果。
上一篇: 浅谈Ajax请求与浏览器缓存
下一篇: 逻辑或 题一个!解决方案
推荐阅读
-
Bootstrap3.0学习(一)_html/css_WEB-ITnose
-
页面可视化编辑ckeditor(web基础学习笔记十五)_html/css_WEB-ITnose
-
java学习篇之-css基础知识(一)_html/css_WEB-ITnose
-
Bootstrap定制(二)less基础语法_html/css_WEB-ITnose
-
2015年9月28日html基础了解学习_html/css_WEB-ITnose
-
2015年9月28日html基础了解学习_html/css_WEB-ITnose
-
2015年9月29日html基础加强学习笔记_html/css_WEB-ITnose
-
Bootstrap 学习(1)_html/css_WEB-ITnose
-
2015年9月29日html基础加强学习笔记_html/css_WEB-ITnose
-
《HTML5与CSS3基础教程》学习笔记 --Three Day_html/css_WEB-ITnose