bootstrap学习笔记

bootsrap的两种使用方式:
1)、官网下载bootsrap压缩包:http://v3.bootcss.com/getting-started/,然后复制到项目中,引入bootsrap包的路径即可使用
2)、使用 BootCDN 提供的免费 CDN 加速服务(即不用下载bootsrap包,直接在页面导入以下CDN路径即可)


()




(注:bootsrap中所有js插件都依赖于jQuery,因此jQuery要在boostrap之前引用)

BootStrap全局css样式

一、HTML5 文档类型







二、布局容器
.container 80%
.container-fluid 100%


...

三、栅格系统 .col-md-*
1.“行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中
2.所有“列(column)必须放在 ” .row 内


.col-md-4

.col-md-4

.col-md-4


3.列偏移 .col-md-offset-*
使用 .col-md-offset-* 类可以将列向右侧偏移

.col-md-4

向右偏移4个单位

四、排版
1.标题

...


2.副标题

标题副标题


3.高亮显示
4.文本对齐类

文本左对齐


文本居中


文本右对齐


5.列表
1)无序列表 ul

  • ...


2)有序列表 ol

  1. ...


3)无样式列表 list-unstyled

  • ...


4)内联列表 class="list-inline" 所有元素放置于同一行

  • ...

五、表格 .table
1.基本样式


...

2.条纹状表格 class="table table-striped"
3.带边框的表格 class="table table-bordered"
4.鼠标悬停 class="table table-hover"
5.紧缩表格 class="table table-condensed"
6状态类 设置颜色
...
...
...
...
...

六、表单
1.所有设置了.form-control类的 默认宽度为100%
2.带标签的输入框 label 设置 .sr-only 类可以将标签隐藏







3.内联表单 左对齐 排列一行











4.水平排列的表单 .form-horizontal 标签和输入框排列一行








5.表单控件
1)输入框
2)文本域
3)多选和单选 class="checkbox" class="radio"
4)内联单选和多选框 class="checkbox-inline" class="radio-inline"
5)下拉列表
6)静态控件 将标签和纯文本放置于同一行 为

元素添加 .form-control-static 类即可


7)禁用状态 disabled

8)只读状态 readonly

9)小图标




(success)

10)输入框组 .input-group







七、按钮
1.元素
Link



2.按钮样式
class="btn btn-default" primary success info warning danger link
3.块级元素按钮 .btn-block

4.按钮禁用状态

八、图片
1.响应式图片 图片水平居中 .center-block



2.图片形状




九、辅助类
1.关闭按钮

2.三角符号

3.让内容块居中

...

BootStrap组件

一、下拉菜单 .dropdown

二、按钮组





三、导航 .nav

四、导航条
http://v3.bootcss.com/components/
固定在顶部


反色的导航条 .navbar-inverse
路径导航

五、分页
1.基本样式


2.翻页

六、标签
Default
Primary
Success
Info
Warning
Danger

七、徽章(未读消息提示功能)
Inbox 42

八、巨幕


Hello, world!


...


Learn more


九、可关闭的警告框

十、媒体对象(评论)




Middle aligned media


...

十一、带标题的面版


Panel heading without title


Panel content

你可能感兴趣的:(bootstrap学习笔记)