Bootstrap

Bootstrap必须在HTML5中使用
Bootstrap对标题进行了优化部署

标题

h1~h3的margin为20px；h4-h6的margin为10px
定义了6个类名。h1 h2 h3 h4 h5 h6
大小：h1为36px，依次减6

副标题的使用

副标题

1、行高都是1，而且font-weight设置了normal变成了常规效果（不加粗），同时颜色被设置为灰色（#999）。
2、由于内的文本字体在h1_{h3内，其大小都设置为当前字号的65%；而在h4}h6内的字号都设置为当前字号的75%；

段落可以通过“.lead”突出文本
强调相关的类

.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）

强调文本类

text-justify是两端对齐
“.list-unstyled”去除无序列表前面的点，同时去除边距

去点列表
内联列表 “.list-inline”,将垂直列表换成水平列表，用于制作导航栏
水平定义列表通过“.dl-horizontal”实现，但只有屏幕大与768px的时候才有效果
代码的显示

1、使用来显示单行内联代码
2、使用
来显示多行块代码
3、使用来显示用户输入代码

通过在pre标签添上类名".pre.scrollable"使代码区域最高为340px，超出这个高度时出现滚动条
table

☑ .table：基础表格
☑ .table-striped：斑马线表格
☑ .table-bordered：带边框的表格
☑ .table-hover：鼠标悬停高亮的表格
☑ .table-condensed：紧凑型表格
☑ .table-responsive：响应式表格

Bootstrap的表单默认是垂直的，要使用水平的表单需要添加“.form-horizontal”

.form-horizontal
".form-inlline"将表单元素设置成内联元素，在一行显示
关于表单输入框，要使输入框不出错，需要添加类名“.form-control”
-单选复选按钮想要水平显示，添加类名“.checkbox-inline”,".radio-inline"
button

button
表单控制大小

可以通过设置控件的height，line-height，padding和font-size等属性来实现控件的高度设置
1、input-sm:让控件比正常大小更小
2、input-lg:让控件比正常大小更大
这两个类适用于表单中的input，textarea和select控件

设置焦点状态
焦点状态是通过伪类“:focus”来实现。Bootstrap框架中表单控件的焦点状态删除了outline的默认样式，重新添加阴影效果
要让控件在焦点状态下有下面样式效果，需要给控件添加类名“.form-control”

右为焦点状态
表单禁用状态
Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的，在相应的表单控件上添加属性“disabled”。和其他表单的禁用状态不同的是，Bootstrap框架做了一些样式风格的处理
示例:在需要禁用的表单控件上加上“disabled”即可

对于整个禁用的域中，如果legend中有输入框的话，这个输入框是无法被禁用的

…

表单验证
在制作表单时，不免要做表单验证。同样也需要提供验证状态样式，在Bootstrap框架中同样提供这几种效果。
1、.has-warning:警告状态（黄色）
2、.has-error：错误状态（红色）
3、.has-success：成功状态（绿色）
使用的时候只需要在form-group容器上对应添加状态类名。
按钮大小
.btn-lg 变大
.btn-sm 变小
.btn-xs 超小
使用.btn-block使得按钮宽度充满整个容器
图像在网页制作中也是常要用到的元素，在Bootstrap框架中对于图像的样式风格提供以下几种风格：

1、img-responsive：响应式图片，主要针对于响应式设计
2、img-rounded：圆角图片
3、img-circle：圆形图片
4、img-thumbnail：缩略图片

图标定制网站
网格系统
列偏移 col-md-offset-* col-xs-不支持列偏移
列排序 col-md-pull-
列嵌套

-下拉菜单必须引入1.90版本以上的jQuery和bootstrap.js才能使用
添加分割线

菜单头

菜单头

按钮组的写法

使用"btn-group-vertical"使按钮组垂直排列
使用“btn-group-justified”使按钮等分父容器

导航条

基础导航条


  　
  　    慕课网
  　
    
        网站首页
      
        系列教程
        
            CSS3
            JavaScript
            PHP
        
     
      名师介绍
      成功案例
      关于我们

基础导航条

添加二级菜单和状态与上面相同
添加表单

固定导航条

.navbar-fixed-top：导航条固定在浏览器窗口顶部
.navbar-fixed-bottom：导航条固定在浏览器窗口底部

响应式导航条
反色导向条，外部div添加类".navbar-inverse"

反色导向条
分页导航


  «第一页
  11
  12
  13
  14
  15
  最后一页»

可通过类“.pagination-lg”和类“.pagination-sm”来控制按键的大小

分页导航

翻页



  «上一页
  下一页»
 


  «上一页
  下一页»
 


  «上一页
  下一页»

翻页

标签

默认标签
主要标签
成功标签
信息标签
警告标签
错误标签

标签

徽章

靠右对齐

徽章

其他控件

缩略图

警示框
默认

恭喜您操作成功！
请输入正确的密码
您已操作失败两次，还有最后一次机会
对不起，您输入的密码有误

默认

可关闭的警示框


    
    恭喜您操作成功！

可关闭

带链接的警示框


    Well done! 
    You successfully read 
    this important alert message

带链接

进度条

基本进度条

     
    
 
彩色进度条

    
 
条纹进度条

    

动态条纹进度条

    
 
带Label的进度条
进度条1

    20%  
  
进度条2 

  0%

进度条

带数字进度条

媒体对象
列表组
面板
(见示例代码)

Bootstrap

导航

导航条

其他控件

基本进度条

彩色进度条

条纹进度条

动态条纹进度条

带Label的进度条

进度条1

进度条2

你可能感兴趣的:(Bootstrap)