看了三天的bootstrap知识,感觉这些css实在太多太复杂了,样式的世界太过多姿多彩,还是留给美工妹子们把,只做一些基本的了解与简单的使用即可。
本文根据csdn免费视频学习后,整理的知识点大纲,细学记得到学院去看:
url:http://edu.csdn.net/course/detail/2740
1、文本情景
text-success、text-muted、info、text-danger、text-waring、text-primary、
这几个单词会经常用到,其实也就是不同的颜色背景或者不同的文本样式来对应不同的提示情况。
各种文本对齐方式:text-left、right、center、justify
2、列表
ul 与 ol 标签
list-unstyled去点
<dl><dt>自定义标签<dt><dl>
3、<pre>
相信这个编辑器就使用了这个标签,就是让代码可以原样输出。
pre-scrollable 滚动条。大于340px后会自动出现
<code>标签 强调代码样式
4、表格
最常用的就是她了
各种样式:
table-borderd边框
table-striped 斑马线
table-condensed 缩小
table-responsive响应式的 这个加到div上,高大上的东西
5、栅格系统
重量级最爱来了,将宽度等分成了12份,col-md-12,各种好用,可以使用<div class="col-md-offset-2">来偏移
<div class="container">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
</div>
<div class="col-md-offset-2">就是左偏二列
<div class="col-md-pull-3">就是右拉三列
<div class="col-md-push-4">就是左拉四列
如果需要嵌套,那么继续套就可以。
6、按钮
这个样式也有很多,和文本情景一样,也有很多定义好的样式。
7、图片
img-rounded圆角
img-circle 圆形
img-thumbnail缩略图
img-reponsive响应式
说到响应式,根据分辨率大小,分别为:
col-md=3、col-sm-3、col-xs-3、还有个最大是啥来着,忘了。。。
8、字体图标
很好的东西,这个有已经定义好的各种图片,比如glyphicon-ok就是对号等等。
9、表单
又是常用的好东西。
form-control表单控件
form-group分组
form-inline 内联表单
form-horizontal 水平表单
select标签还可以多选:multiple属性
表单也和文本情形一样,支持那几个状态:has-success、、、
10、下拉菜单
dropdown:dropdown-toggle+dropdown-menu
还是百度个代码吧:
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorials<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li class="divider"></li>
<li><a href="#">JavaScript</a>
</ul>
</li>
这个divider是分割线,菜单分段是dropdown-header
菜单的右对齐方式:dropdown-menu-reght
11、按钮组
btn-group 行块除间隙的
btn-group-vertical垂直分组
btn-group-justified等分
dropdown/dropup向上向下
nav-pills 胶囊菜单
nav-pills+nav-stacked垂直菜单,和胶囊菜单配合使用
nav nav-tabs nav-justified响应式菜单
ur>li标签 breadcrumb 面包屑菜单
12、导航条
navbar-default基础导航条
主要就是来看她的
最左边一般来个logo:
navbar-header+navbar-brand
导航条上加表单:可以将表单按钮做到最右边输入框内
navbar-form
navbar-inverse反色导航条,一般用在黑白样式上
pagination 分页导航条:-lg/xs/sm
pager:previous/next上一页/下一页«/»