Bootstrap表单与导航汇总

一、Bootstrap表单

1、表单类 - 水平效果
  • .form-horizontal:添加在
    中(需配合Bootstrap框架的网格系统)
2、表单类 - 内联
  • .form-inline:添加在中(为了让控件在各种表单风格中样式不出错,需要添加类名form-control
3、表单类 - 多行下拉选择框
  • multiple:直接添加在

    multiple.jpg

    (textarea元素中添加 form-control类名,则无需设置cols属性,因为Bootstrap框架中的 form-control样式的表单控件宽度为100%或auto)

4、表单类 - 复选框和单选框
  1. 不管是checkbox还是radio都使用label包起来了
  2. checkbox连同label标签放置在一个名为“.checkbox”的容器内
    (如果checkbox需要水平排列,只需要在label标签上添加类名checkbox-inline
  3. radio连同label标签放置在一个名为“.radio”的容器内
    (如果radio需要水平排列,只需要在label标签上添加类名radio-inline
5、表单类 - 按钮风格
Bootstrap表单与导航汇总_第1张图片
btn.jpg
6、表单类 - 按钮大小
  • .btn-lg:大按钮
  • .btn-sm:小按钮
  • .btn-xs:超小按钮
7、表单类 - 块状按钮(充满整个父容器:width:100%)
  • .btn-block
8、表单类 - 按钮活动状态
  • 悬浮状态 :hover
  • 点击状态 :active
  • 焦点状态 :focus
9、表单类 - 按钮禁用状态
10、表单类 - 表单控件高度
  • .input-sm:使控件变小
  • .input-lg:使控件变大
11、表单类 - 表单控件宽度
  • .col-xs-数字:在input的父div添加以控制表单宽度
12、表单类 - 控件验证状态样式
  • .has-warning:警告状态(黄色)
  • .has-error:错误状态(红色)
  • .has-success:成功状态(绿色)
    (显示尾部icon可加上.has-feedback)
    示例:
//尾部的icon
error.jpg
13、表单类 - 控件提示信息
  • .help-block:在input后加上带此类的span,可通过“.col-xs-数字”控制提示是否在同一行
输入正确
14、图像类
  • .img-responsive:响应式图片,主要针对于响应式设计
  • .img-rounded:圆角图片
  • .img-circle:圆形图片
  • .img-thumbnail:缩略图片
15、Bootstrap自带图标
Bootstrap表单与导航汇总_第2张图片
icon.jpg

二、Bootstrap网格系统

列偏移

有的时候,我们不希望相邻的两个列紧靠在一起,但又不想使用margin或者其他的技术手段来。这个时候就>可以使用列偏移(offset)功能来实现。使用列偏移也非常简单,只需要在列元素上添加类名“col-md-offset->*”(其中星号代表要偏移的列组合数),那么具有这个类名的列就会向右偏移。

列向右移动四列的间距

.col-md-4
列向右移动四列的间距
.col-md-3
.col-md-4
列向右移动四列的间距
col-md-offset-x.jpg

三、Bootstrap菜单、按钮及导航

1、下拉菜单类(基本用法)
  1. 使用一个名为“dropdown”的容器(div)包裹了整个下拉菜单元素
  2. 使用一个
  3. 下拉菜单项使用一个ul列表,并且定义一个类名为“dropdown-menu”
    代码示例:

/*role:值(自定义,但需一致)*/
2、下拉菜单(下拉分隔线)
  • .divider:添加在

  • 中,使之变为分割线

    示例:
    Bootstrap表单与导航汇总_第3张图片
    divider.PNG
3、下拉菜单(菜单标题)
  • .dropdown-header:添加在

  • 中,使之变为下拉选项的小标题

    示例:
    Bootstrap表单与导航汇总_第4张图片
    dropdown-header.PNG
4、下拉菜单(对齐方式)
  • .pull-right:添加在
      中,使之相对于父容器右对齐
    • .dropdown-menu-right:同上

      示例:
      Bootstrap表单与导航汇总_第5张图片
      pull-right和dropdown-menu-right.PNG
    • .pull-left:添加在
        中,使之相对于父容器左对齐
      • .dropdown-menu-left:同上

        示例:
        Bootstrap表单与导航汇总_第6张图片
        pull-left和dropdown-menu-left.PNG
5、下拉菜单(菜单项状态)
  • .active:添加在

  • 中,使之呈现当前状态

    示例:
    Bootstrap表单与导航汇总_第7张图片
    active.PNG
  • .disabled:添加在

  • 中,使之呈现禁用状态

    示例:
    Bootstrap表单与导航汇总_第8张图片
    disabled.PNG
6、按钮(垂直分组)
  • .btn-group-vertical:将button的父div水平分组的“btn-group”类名换成“btn-group-vertical”

    示例:
    btn-group-vertical.PNG
7、按钮(等分按钮)
  • .btn-group-justified:在按钮组“btn-group”上追加一个“btn-group-justified”类名

    示例:
    btn-group-justified.PNG
8、按钮(末尾的上/下三角形)
  • 在button标签中添加

    示例:
    caret.PNG

    (在button中添加dropup控制三角向上+弹起)
9、导航(标签形tab导航)
  • .nav-tabs:在

      中“nav”上追加一个“nav-tabs”类名

      示例:
      nav-tab.png
10、导航(胶囊形(pills)导航)
  • .nav-pills:在

      中“nav”上追加一个“nav-pills”类名

      示例:
      nav-pills.png
11、导航(垂直堆叠的导航)
  • .nav-stacked:在

      中“nav”上追加一个“nav-stacked”类名

      示例:
      nav-stacked.png
12、导航(自适应导航)
  • .nav-justified:在

      中“nav”上追加一个“nav-justified”类名

      示例1:
      nav-justified.png

      示例2:
      Bootstrap表单与导航汇总_第9张图片
      nav-justified2.png
13、导航(下拉菜单二级导航)
  1. 中加上“dropdown”类名
  2. 加“dropdown-toggle”类名
  3. 二级
      加“dropdown-menu”类名
      代码示例:

示例:
Bootstrap表单与导航汇总_第10张图片
dropdown.png
14、导航(面包屑式导航)
  • .breadcrumb:在

      中加上此类名

      示例:
      breadcrumb.png

四、Bootstrap导航条、分页导航

1、导航条(基础导航条)

首先在制作导航的列表(

    )基础上添加类名“navbar-nav”,同时在列表外部添加一个带类名“navbar”和“navbar-default”的容器(div)
    代码示例:

    
    

    示例:
    navbar-nav.png
2、导航条(标题)
  1. 首先在制作导航的列表前添加带类名“navbar-brand”的
  2. 外部添加一个带类名“navbar-header”的容器(div)
    代码示例:

示例:
navbar-header.png
3、导航条(二级菜单)

语法与下拉菜单二级导航同

4、导航条(表单)
  • .navbar-form:在navbar容器中放置一个带有此类名的表单
    代码示例:

   

示例:
navbar-form.png
导航条(按钮、文本和链接)
  • .navbar-btn:导航条中的按钮
  • .navbar-text:导航条中的文本
  • .navbar-link:导航条中的普通链接
    (三者都需要和navbar-brand、navbar-nav配合起来使用。而且对数量也有一定的限制,一般只使用一到两个)

示例:
navbar-btn-text-link.png
导航条(固定导航条)
  • .navbar-fixed-top:导航条固定在浏览器窗口顶部
  • .navbar-fixed-bottom:导航条固定在浏览器窗口底部

示例:
Bootstrap表单与导航汇总_第11张图片
navbar-fixed-top.gif
导航条(响应式导航条)
  1. 首先将窄屏时需要折叠的内容放在一个带collapse和navbar-collapse类名的div内,再添加一个class类名或者id名
  2. 添加在窄屏时要显示的图标样式(固定写法):
  3. 为button添加data-target=".类名/#id名",由需要折叠的div来决定
    代码示例:

示例:
宽屏.png

Bootstrap表单与导航汇总_第12张图片
窄屏.png
导航条(反色导航条)
  • .navbar-inverse:将导航div的navbar-deafult类名换成navbar-inverse

示例:
Bootstrap表单与导航汇总_第13张图片
navbar-inverse.png
导航条(带页码的分页导航)
导航条(翻页分页导航)
导航条(标签)
  • .label-deafult:默认标签,深灰色
  • .label-primary:主要标签,深蓝色
  • .label-success:成功标签,绿色
  • .label-info:信息标签,浅蓝色
  • .label-warning:警告标签,橙色
  • .label-danger:错误标签,红色
默认标签
主要标签
成功标签
信息标签
警告标签
错误标签 

示例:
label-XX.png
导航条(标记徽章)
  • .badge:在上添加badge类名
  • Messages 3
  • 示例:
    badge.png

    你可能感兴趣的:(Bootstrap表单与导航汇总)