bootstrap( 二 ) _样式

用bootstrap怎么实现添加列表：

文章插图
工具/原料
使用bootstrap的框架, v3以上版本, 还需要用到ul, li, 包括定义的一些样式.
bootstrap列表组的使用
bootstrap中的列表组, 是通过样式.list-group 来定义的.然后列表组中的项是用样式: .list-group-item在html中, 列表也是使用ul标签, 这里也是默认使用ul标签, 举例说明.这个是一个默认的基本的例子. 使用的是ul>li的标签. 然后加上样式. 最后出现一个列表的内容.可以修改li中的内容. 增加一个测试的页面.
从上面的例子当中我们可以看出来, 这个列表几乎是万能的列表.上面的方式. 还有另外一种实现方式, 使用div和a链接, 就是要做一个带有a链接的样式. 使用a链接之后, 鼠标移上去的时候, 会有一个浅灰色的背景. 你可以看一下效果图的第五条信息.
有时候, 文章是有了, 但是想显示有多少人浏览,又想有个标识在列表上. 这里的话, bootstrap有一个实现的效果, 如果不是你想要的, 可以根据自己的需求来定义这个. 这个样式, 叫做徽章, 也就是在列表上显示一个数.使用样式.badge来实现效果.看代码和效果.
有时候, 我们也可以把列表组, 当作是一个分类, 或者叫做导航, 只要控制好宽度. 然后当作导航的时候, 需要有一个选中的状态, 这里我们就是使用, bootstrap中通用的选中状态, 样式.active. 看一下上面的案例如果使用了状态是什么样子的.
当然, 除了状态之外还有另外的一些改变背景颜色的样式. 在.list-group-item中使用.list-group-item-*(不同的显示状态.). 现在有以下4中, 如果没有你想要的. 通过自定义来进行增加你自己的背景颜色的样式.
1.list-group-item-success成功
2.list-group-item-info信息
3.list-group-item-warning警告
4.list-group-item-danger失败(危险)
需要注意的是: 该属性只在最新版本3.2.0中, 3.2以下版本没有该样式.
除了简单的列表组以外, 还有一些带有标题的和内容的列表组.
在样式.list-group-item中添加.list-group-item-heading(代表着头部也就是标题部分. )
在样式.list-group-item中添加.list-group-item-text(代表的是内容部分.)
在这个样式中, 一样可以加入徽章, 和只要.list-group-item-heading样式. 或者只要.list-group-item-text样式. 而且一样可以加入.active. 下面演示的没有内容的标题, 而且还加上了.active状态, 然后在最后一个列表中, 加入了徽章.
自己按照第6步骤, 来做一个, 带有.list-group-item-info的带有标题的内容. 这里给出效果. 自己动手做一下吧. 只有自己动手了, 才能明白里面的东西, 看是看不会的.
bootstrap怎么用？：

文章插图
只要您具备HTML和CSS的基础知识，您就可以开始学习 Bootstrap 。

学习Bootstrap：bootstrap环境搭建
1、首先你确定要保证你所需要的引用你都有, 还要保证运行的最小点. 需要3个外部文件, A, B, C, 如果是你找到的一段代码, 要确保能够运行, 一般情况下, 一个框架都会给你一个最基本的例子, bootstrap也给出了一个简单的例子. 全部放在上面, 然后把js. 都放在页面的最下面, 这样能够更好的加载页面渲染. 建议你使用最基本的页面去修改你需要的页面, 而且要做到按照自己的需求来写代码. 不要复制, 粘贴。
2、Bootstrap中内置了一套响应式的, 移动优先的流式栅格系统, 随着不同的设备, 不同的平台. 或者窗口大小(viewport), 根据他们的不同系统会自动的分成12份. 也就是说, 栅格系统是通过一系列的行和列来组成我们需要的页面, 然后把你需要的内容放在这些的布局中。
3、在table上, 填写一个class为.table的样式即可生成一个很好很实用的表格. 其实, 这些都是别人提前建立好的页面显示效果, 就是不用自己再去写一些简单的css效果. 多练. 多使用它就属于你。
如何学习bootstrap框架：

文章插图
【bootstrap】全局样式
1
Bootstrap 中用到一些 HTML元素和CSS属性需要将页面设置为 HTML5 文档类型，即在页面顶部添加“<!DOCTYPE html>”
2
布局容器：Bootstrap 需要为页面内容和栅格系统包裹一个 .container或container-fluid容器。
3
栅格系统，Bootstrap 提供了一套最多12列的流式栅格系统，通过 .row表示行和 .col-xs-4 这种表示宽度的列快速创建栅格布局。
4
Bootstrap 排版、链接样式设置了基本的全局样式。