欢迎访问移动开发之家(rcyd.net),关注移动开发教程。移动开发之家  移动开发问答|  每日更新
页面位置 : > > > 内容正文

bootstrap学习笔记

来源: 开发者 投稿于  被查看 48889 次 评论:135

bootstrap学习笔记


响应式导航栏
1、保证在窄屏时需要折叠的内容必须包裹在带一个div内,并且为这个div加入collapse、navbar-collapse两个类名。最后为这个div添加一个class类名或者id名。
2、保证在窄屏时要显示的图标样式(固定写法):
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#example">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
3、并为button添加data-target=".类名/#id名",究竞是类名还是id名呢?由需要折叠的div来决定。如需要折叠的div代码段:
<div class="collapse navbar-collapse" id="example">
<ul class="nav navbar-nav">

</ul>
</div>
窄屏时显示的图标代码段:
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#example">
...
</button>

反色导航条
navbar-default类名换成navbar-inverse
分页导航条
Bootstrap框架中使用的是ul>li>a这样的结构,在ul标签上加入类名pagination的方法 。通过“pagination-lg”让分页导航变大;通过“pagination-sm”让分页导航变小:
翻页导航
分页导航是看不到具体的页码,只会提供一个“上一页”和“下一页”的按钮。ul中加入pager类。li中previous:让“上一步”按钮居左 next:让“下一步”按钮居右

标签label样式也提供了多种颜色:
☑ label-deafult:默认标签,深灰色
☑ label-primary:主要标签,深蓝色
☑ label-success:成功标签,绿色
☑ label-info:信息标签,浅蓝色
☑ label-warning:警告标签,橙色
☑ label-danger:错误标签,红色
徽章:
像标签一样,使用span标签来制作,然后为他加入badge类:
缩略图
通过“thumbnail”样式配合bootstrap的网格系统来实现。
还可以让缩略图配合标题、描述内容,按钮等。缩略图下方div采用caption类
警示框
alert类名:再加上alert-success alert-info alert-warning alert-danger代表不同的警示效果
alert-dismissable 代表警示框可以关闭。在button标签中加入class="close"类,实现警示框关闭按钮的样式。
<div class="alert alert-success alert-dismissable" role="alert">
<button class="close" type="button" data-dismiss="alert">×</button>
恭喜您操作成功!
</div>
alert-link 警示框链接 <a>标签中
进度条
两个容器,外容器使用“progress”样式,子容器使用“progress-bar”样式。设置自容器的style=“width=*%”即可。
progress-bar-info:表示信息进度条,进度条颜色为蓝色
☑ progress-bar-success:表示成功进度条,进度条颜色为绿色
☑ progress-bar-warning:表示警告进度条,进度条颜色为黄色
☑ progress-bar-danger:表示错误进度条,进度条颜色为红色
条纹进度条只需要在进度条的容器“progress”基础上增加类名“progress-striped”
动态进度条在进度条“progress progress-striped”两个类的基础上再加入“active”类名就能让进度条动起来。
层叠进度条:多个子容器且和不超过100% progress-bar-striped设置单个子容器是否有条纹
带Label的进度条:只需要在进度条中添加你需要的值eg:20%
媒体对象:
媒体对像的容器:常使用“media”类名表示,用来容纳媒体对象的所有内容
媒体对像的对象:常使用“media-object”表示,就是媒体对象中的对象,常常是图片
媒体对象的主体:常使用“media-body”表示,就是媒体对像中的主体内容,可以是任何元素,常常是图片侧边内容
媒体对象的标题:常使用“media-heading”表示,就是用来描述对象的一个标题,此部分可选。
常常使用“pull-left”。“pull-right”来控制媒体对象中的对象浮动方式。
嵌套媒体对象
媒体对象列表: ul/li
ul的类名写为:media-list
li是一个个单独的media
列表组(active和disabled代表状态)
基础列表组主要包括两个部分:
☑ list-group:列表组容器,常用的是ul元素,当然也可以是ol或者div元素
☑ list-group-item:列表项,常用的是li元素,当然也可以是div元素
带徽章的列表组
徽章组件和基础列表组结合在一起。需要在“list-group-item”中添加徽章组件“badge”。
带链接的列表组
.1 在“list-group-item”中添加链接a标签
不足之处,就是链接的点击区域只在文本上有效.希望在列表项的任何区域都具备可点击。这个时候就需要在链接标签上增加额外的样式:“display:block”;
.2 将ul.list-group使用div.list-group来替换,而li.list-group-item直接用a.list-group-item来替换
Bootstrap框加在链接列表组的基础上新增了两个样式(a标签中):
☑ list-group-item-heading:用来定义列表项头部样式
☑ list-group-item-text:用来定义列表项主要内容
列表项li或a中
☑ list-group-item-success:成功,背景色绿色
☑ list-group-item-info:信息,背景色蓝色
☑ list-group-item-warning:警告,背景色为黄色
☑ list-group-item-danger:错误,背景色为红色
面板
div容器运用了“panel”样式,产生一个具有边框的文本显示块。由于“panel”不控制主题颜色,所以在“panel”的基础上增加一个控制颜色的主题“panel-default”。panel-primary:重点蓝 panel-success:成功绿
panel-info:信息蓝 panel-warning:警告黄 panel-danger:危险红
另外在里面添加了一个“div.panel-body”来放置面板主体内容。 panel-heading:用来设置面板头部样式。panel-footer:用来设置面板尾部样式
面板中嵌套表格:在panel-body中添加表格的写法
面板中嵌套列表组:在panel-body中添加列表组的写法

用户评论