Bootstrap表单与导航汇总

2019-04-17 本文已影响0人 Leophen

一、Bootstrap表单

1、表单类 - 水平效果

.form-horizontal：添加在<form>中（需配合Bootstrap框架的网格系统）

2、表单类 - 内联

.form-inline：添加在<form>中（为了让控件在各种表单风格中样式不出错，需要添加类名form-control）

3、表单类 - 多行下拉选择框

multiple：直接添加在<select>中
示例：
<select multiple class="form-control"> 
 <option>1</option> 
 <option>2</option> 
 <option>3</option> 
 <option>4</option> 
</select>
multiple.jpg
（textarea元素中添加form-control类名，则无需设置cols属性，因为Bootstrap框架中的form-control样式的表单控件宽度为100%或auto）

4、表单类 - 复选框和单选框

不管是checkbox还是radio都使用label包起来了

checkbox连同label标签放置在一个名为“.checkbox”的容器内
（如果checkbox需要水平排列，只需要在label标签上添加类名checkbox-inline）

radio连同label标签放置在一个名为“.radio”的容器内
（如果radio需要水平排列，只需要在label标签上添加类名radio-inline）

5、表单类 - 按钮风格

btn.jpg

6、表单类 - 按钮大小

.btn-lg：大按钮

.btn-sm：小按钮

.btn-xs：超小按钮

7、表单类 - 块状按钮（充满整个父容器：width:100%）

.btn-block

8、表单类 - 按钮活动状态

悬浮状态 :hover

点击状态 :active

焦点状态 :focus

9、表单类 - 按钮禁用状态

方法1：在标签中添加disabled属性

方法2：在元素标签中添加类名“disabled”
区别：
“.disabled”样式不会禁止按钮的默认行为，比如说提交和重置行为等。如果想要让这样的禁用按钮也能禁止>按钮的默认行为，则需要通过JavaScript这样的语言来处理。对于<a>标签也存在类似问题，如果通过类名“.disable”来禁用按钮，其链接行为是无法禁止。而在元素标签中添加“disabled”属性的方法是可以禁止元素>的默认行为的。

10、表单类 - 表单控件高度

.input-sm：使控件变小

.input-lg：使控件变大

11、表单类 - 表单控件宽度

.col-xs-数字：在input的父div添加以控制表单宽度

12、表单类 - 控件验证状态样式

.has-warning：警告状态（黄色）

.has-error：错误状态（红色）

.has-success：成功状态（绿色）
（显示尾部icon可加上.has-feedback）
示例：
<div class="form-group has-error has-feedback">
 <label class="control-label" for="inputError1">错误状态</label>
 <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
 <span class="glyphicon glyphicon-remove form-control-feedback"></span>         //尾部的icon
</div>
error.jpg

13、表单类 - 控件提示信息

.help-block：在input后加上带此类的span，可通过“.col-xs-数字”控制提示是否在同一行
<span class="help-block">输入正确</span>

14、图像类

.img-responsive：响应式图片，主要针对于响应式设计

.img-rounded：圆角图片

.img-circle：圆形图片

.img-thumbnail：缩略图片

15、Bootstrap自带图标

icon.jpg

<span class="glyphicon glyphicon-search"></span>

二、Bootstrap网格系统

列偏移

有的时候，我们不希望相邻的两个列紧靠在一起，但又不想使用margin或者其他的技术手段来。这个时候就>可以使用列偏移（offset）功能来实现。使用列偏移也非常简单，只需要在列元素上添加类名“col-md-offset->*”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。
<h4>列向右移动四列的间距</h4>
 <div class="row">
   <div class="col-md-4">.col-md-4</div>
   <div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
   <div class="col-md-2">.col-md-3</div>
 </div>
 <div class="row">
   <div class="col-md-4">.col-md-4</div>
   <div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div>
 </div>
col-md-offset-x.jpg

三、Bootstrap菜单、按钮及导航

1、下拉菜单类（基本用法）

使用一个名为“dropdown”的容器（div）包裹了整个下拉菜单元素

使用一个<button>按钮做为父菜单，并且定义类名“dropdown-toggle”和自定义“data-toggle”属性，且值必须和最外容器类名一致

下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu”
代码示例：
<div class="dropdown">
 <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
   下拉菜单<span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
   <li role="presentation"><a role="menuitem" tabindex="-1" href="#">选项1</a></li>
   <li role="presentation"><a role="menuitem" tabindex="-1" href="#">选项2</a></li>
   <li role="presentation"><a role="menuitem" tabindex="-1" href="#">选项3</a></li>
 </ul>
</div>
/*role：值（自定义，但需一致）*/

2、下拉菜单（下拉分隔线）

.divider：添加在<li>中，使之变为分割线

示例： divider.PNG

3、下拉菜单（菜单标题）

.dropdown-header：添加在<li>中，使之变为下拉选项的小标题

示例： dropdown-header.PNG

4、下拉菜单（对齐方式）

.pull-right：添加在<ul>中，使之相对于父容器右对齐

.dropdown-menu-right：同上

示例： pull-right和dropdown-menu-right.PNG

.pull-left：添加在<ul>中，使之相对于父容器左对齐

.dropdown-menu-left：同上

示例： pull-left和dropdown-menu-left.PNG

5、下拉菜单（菜单项状态）

.active：添加在<li>中，使之呈现当前状态

示例： active.PNG

.disabled：添加在<li>中，使之呈现禁用状态

示例： 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标签中添加<span class="caret"></span>

示例： caret.PNG
（在button中添加dropup控制三角向上+弹起）

9、导航（标签形tab导航）

.nav-tabs：在<ul>中“nav”上追加一个“nav-tabs”类名

示例： nav-tab.png

10、导航（胶囊形(pills)导航）

.nav-pills：在<ul>中“nav”上追加一个“nav-pills”类名

示例： nav-pills.png

11、导航（垂直堆叠的导航）

.nav-stacked：在<ul>中“nav”上追加一个“nav-stacked”类名

示例： nav-stacked.png

12、导航（自适应导航）

.nav-justified：在<ul>中“nav”上追加一个“nav-justified”类名

示例1： nav-justified.png
示例2： nav-justified2.png

13、导航（下拉菜单二级导航）

在<li>中加上“dropdown”类名

给<li>中<a>加“dropdown-toggle”类名

二级<ul>加“dropdown-menu”类名
代码示例：
<li class="dropdown">
       <a href="##" class="dropdown-toggle" data-toggle="dropdown">菜单项<span class="caret"></span>></a>
       <ul class="dropdown-menu">
           <li><a href="##">二级菜单1</a></li>
           …
      </ul>
</li>
示例： dropdown.png

14、导航（面包屑式导航）

.breadcrumb：在<ol>中加上此类名

示例： breadcrumb.png

四、Bootstrap导航条、分页导航

1、导航条（基础导航条）

首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav”，同时在列表外部添加一个带类名“navbar”和“navbar-default”的容器（div）
代码示例：
<div class="navbar navbar-default" role="navigation">
    <ul class="nav navbar-nav">
       <li><a href="##">导航1</a></li>
       <li><a href="##">导航2</a></li>
       <li><a href="##">导航3</a></li>
       <li><a href="##">导航4</a></li>
       <li><a href="##">导航5</a></li>
   </ul>
</div>
示例： navbar-nav.png

2、导航条（标题）

首先在制作导航的列表前添加带类名“navbar-brand”的<a>

在<a>外部添加一个带类名“navbar-header”的容器（div）
代码示例：
<div class="navbar navbar-default" role="navigation">
 　<div class="navbar-header">
 　    <a href="##" class="navbar-brand">导航条标题</a>
 　</div>
   <ul class="nav navbar-nav">
      <li><a href="##">导航1</a></li>
      <li><a href="##">导航2</a></li>
      <li><a href="##">导航3</a></li>
      <li><a href="##">导航4</a></li>
      <li><a href="##">导航5</a></li>
   </ul>
</div>
示例： navbar-header.png

3、导航条（二级菜单）

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

4、导航条（表单）

.navbar-form：在navbar容器中放置一个带有此类名的表单
代码示例：

<form action="##" class="navbar-form navbar-left" rol="search">
   <div class="form-group">
       <input type="text" class="form-control" placeholder="请输入关键词" />
   </div>
   <button type="submit" class="btn btn-default">搜索</button>
</form>

示例：

navbar-form.png

导航条（按钮、文本和链接）

.navbar-btn：导航条中的按钮

.navbar-text：导航条中的文本

.navbar-link：导航条中的普通链接
（三者都需要和navbar-brand、navbar-nav配合起来使用。而且对数量也有一定的限制，一般只使用一到两个）
<div class="navbar navbar-default" role="navigation">
 　<div class="navbar-header">
 　    <a href="##" class="navbar-brand">导航条标题</a>
 　</div>
   <div class="nav navbar-nav">
      <a href="##" class="navbar-btn">选项1</a>
      <a href="##" class="navbar-text">选项2</a>
      <a href="##" class="navbar-link">选项3</a>
   </div>
</div>
示例： navbar-btn-text-link.png

导航条（固定导航条）

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

.navbar-fixed-bottom：导航条固定在浏览器窗口底部
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
 　<div class="navbar-header">
 　    <a href="##" class="navbar-brand">导航条标题</a>
 　</div>
   <div class="nav navbar-nav">
      <a href="##" class="navbar-btn">选项1</a>
   </div>
</div>
示例： navbar-fixed-top.gif

导航条（响应式导航条）

首先将窄屏时需要折叠的内容放在一个带collapse和navbar-collapse类名的div内，再添加一个class类名或者id名

添加在窄屏时要显示的图标样式（固定写法）：
<button class="navbar-toggle" type="button" data-toggle="collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

为button添加data-target=".类名/#id名"，由需要折叠的div来决定
代码示例：
<div class="navbar navbar-default" role="navigation">
 <div class="navbar-header">
    　
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      
      <a href="##" class="navbar-brand">标题</a>
 </div>
 
 <div class="collapse navbar-collapse navbar-responsive-collapse">
      <ul class="nav navbar-nav">
          <li class="active"><a href="##">选项1</a></li>
          <li><a href="##">选项2</a></li>
          <li><a href="##">选项3</a></li>
      </ul>
 </div>
</div>
示例：宽屏.png
窄屏.png

导航条（反色导航条）

.navbar-inverse：将导航div的navbar-deafult类名换成navbar-inverse
<div class="navbar navbar-inverse" role="navigation">
 <div class="navbar-header">
    <a href="##" class="navbar-brand">标题</a>
 </div>
 <ul class="nav navbar-nav">
   <li class="active"><a href="">选项1</a></li>
   <li><a href="">选项2</a></li>
 </ul>
</div>
示例： navbar-inverse.png

导航条（带页码的分页导航）

.pagination：在<ul>上添加pagination类名

<ul class="pagination pagination-lg">
 <li><a href="#">&laquo;第一页</a></li>
 <li><a href="#">11</a></li>
 <li><a href="#">12</a></li>
 <li><a href="#">13</a></li>
 <li><a href="#">14</a></li>
 <li><a href="#">15</a></li>
 <li><a href="#">最后一页&raquo;</a></li>
</ul>

示例：

pagination.png

导航条（翻页分页导航）

.pager：在<ul>上添加pager类名
<ul class="pager">
 <li><a href="#">&laquo;上一页</a></li>
 <li><a href="#">下一页&raquo;</a></li>
</ul> 
示例： pager.png

导航条（标签）

.label-deafult：默认标签，深灰色

.label-primary：主要标签，深蓝色

.label-success：成功标签，绿色

.label-info：信息标签，浅蓝色

.label-warning：警告标签，橙色

.label-danger：错误标签，红色
<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">错误标签</span> 
示例： label-XX.png

导航条（标记徽章）

.badge：在<span>上添加badge类名
<li><a href="#">Messages <span class="badge">3</span></a></li>
示例： badge.png

Bootstrap表单与导航汇总

一、Bootstrap表单

1、表单类 - 水平效果

2、表单类 - 内联

3、表单类 - 多行下拉选择框

4、表单类 - 复选框和单选框

5、表单类 - 按钮风格

6、表单类 - 按钮大小

7、表单类 - 块状按钮（充满整个父容器：width:100%）

8、表单类 - 按钮活动状态

9、表单类 - 按钮禁用状态

10、表单类 - 表单控件高度

11、表单类 - 表单控件宽度

12、表单类 - 控件验证状态样式

13、表单类 - 控件提示信息

14、图像类

15、Bootstrap自带图标

二、Bootstrap网格系统

列偏移

三、Bootstrap菜单、按钮及导航

1、下拉菜单类（基本用法）

2、下拉菜单（下拉分隔线）

3、下拉菜单（菜单标题）

4、下拉菜单（对齐方式）

5、下拉菜单（菜单项状态）

6、按钮（垂直分组）

7、按钮（等分按钮）

8、按钮（末尾的上/下三角形）

9、导航（标签形tab导航）

10、导航（胶囊形(pills)导航）

11、导航（垂直堆叠的导航）

12、导航（自适应导航）

13、导航（下拉菜单二级导航）

14、导航（面包屑式导航）

四、Bootstrap导航条、分页导航

1、导航条（基础导航条）

2、导航条（标题）

3、导航条（二级菜单）

4、导航条（表单）

导航条（按钮、文本和链接）

导航条（固定导航条）

导航条（响应式导航条）

导航条（反色导航条）

导航条（带页码的分页导航）

导航条（翻页分页导航）

导航条（标签）

导航条（标记徽章）

猜你喜欢

热点阅读