Bootstrap 组件

Bootstrap 组件

 

1.字体图标

Bootstrap3Bootstrap2的最大差异在于使用了font文件来替代图片,用于显示图标,这些font图片称为Glyphicons--象形文字图标。

可以使用<i><span>标签来配合使用,具体如下:

//使用小图标

<i class="glyphicon glyphicon-star"></i>

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

//也可以结合按钮

<button class="btn btn-default btn-lg">

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

</button>

注:可以对字体图标设置字体尺寸font-size、颜色color和应用文本阴影text-shadow

 

2.按钮组 

按钮组就是多个按钮集成在一个容器里形成独有的效果。

//基本格式

<div class="btn-group">

  <button type="button"class="btn btn-default"></button>

  <button type="button"class="btn btn-default"></button>

  <button type="button"class="btn btn-default"></button>

</div>

//将多个按钮组整合起来便于管理

<div class="btn-toolbar">

  <div class="btn-group">

    <button type="button"class="btn btn-default"></button>

    <button type="button"class="btn btn-default"></button>

    <button type="button"class="btn btn-default"></button>

  </div>

  <div class="btn-group">

    <button type="button"class="btn btn-default">1</button>

    <button type="button"class="btn btn-default">2</button>

    <button type="button"class="btn btn-default">3</button>

  </div>

 </div>

//设置按钮组大小                          

<div class="btn-group btn-group-lg">

<div class="btn-group>

<div class="btn-group btn-group-sm">

<div class="btn-group btn-group-xs">

 

 

3.下拉菜单

.dropdown {  position:relatie;  }

.dropdown-menu {  position:absolute; top:100%;  ... }

.dropdown-toggle 出现点击效果

data-toggle="dropdown"  JS选择器用

使用:保证下拉菜单与触发(buttonnav)在同一父元素下。

3.1按钮的下拉菜单

<div class="dropdown">

  <button class="btn btn-default dropdown-toggle"data-toggle="dropdown">

    下拉菜单<span class="caret"></span>

  </button>

  <ul class="dropdown-menu">

    <li><a href="#">首页</a></li>

    <li><a href="#">资讯</a></li>

    <li><a href="#">产品</a></li>

    <li><a href="#">关于</a></li>

  </ul>

</div>

//设置向上触发

<div class="dropup">

//菜单项居右对齐,默认值是dropdown-menu-left

<ul class="dropdown-menu dropdown-menu-right">

//设置菜单的标题,不要加超链接

<li class="dropdown-header">网站导航</li>

//设置菜单的分割线

<li class="divider"></li>

//设置菜单的禁用项

<li class="disabled"><a href="#">产品</a></li>

//让菜单默认显示

<div class="dropdown open">

 

3.2按钮组的下拉菜单

<div class="btn-group">

  <button type="button"class="btn btn-default"></button>

  <button type="button"class="btn btn-default"></button>

  <button type="button"class="btn btn-default"></button>

  <button class="btn btn-default dropdown-toggle"data-toggle="dropdown">

    下拉菜单<span class="caret"></span>

  </button>

  <ul class="dropdown-menu">

    <li><a href="#">首页</a></li>

    <li><a href="#">资讯</a></li>

    <li><a href="#">产品</a></li>

  </ul>

</div>

注:没有class="dropdown",因为.btn-group有定位{  position:relatie;  }

//分裂式按钮下拉菜单

<div class="btn-group">

  <button type="button"class="btn btn-default">下拉菜单</button>

  <button class="btn btn-default dropdown-toggle"data-toggle="dropdown">

    <span class="caret"></span>

  </button>

  <ul class="dropdown-menu">

    <li><a href="#">首页</a></li>

    <li><a href="#">资讯</a></li>

    <li><a href="#">产品</a></li>

  </ul>

</div>

 

3.3导航栏的下拉菜单

<ul class="nav nav-tabs">

  <li class="active"><a href="#">Home</a></li>

  <li><a href="#">iOS</a></li>

  <li class="dropdown">

    <a class="dropdown-toggle" data-toggle="dropdown" href="#">

      Java <span class="caret"></span>

    </a>

    <ul class="dropdown-menu">

      <li><a href="#">Swing</a></li>

      <li><a href="#">jMeter</a></li>

    </ul>

  </li>

  <li><a href="#">PHP</a></li>

</ul>

 

4.输入框

·向 <form> 元素添加 role="form"

·把标签和控件放在一个带有 class .form-group <div> 中。这是获取最佳间距所必需的。

·向所有的文本元素 <input><textarea><select>添加 class ="form-control" (焦点事件)

·<div class="input-group-addon"></div><span class="input-group-addon"></span>放置额外内容,二者是完全等效的。

 

4.1input输入框添加文本或单复选框

//添加文本

<div class="input-group">  //input添加边距

<span class="input-group-addon"></span>

<input type="text" class="form-control">

</div>

//添加复选框

<div class="input-group">

<span class="input-group-addon">

<input type="checkbox">

</span>

<input type="text" class="form-control">

</div>

 

 

4.2input输入框添加按钮与下拉菜单

 .input-group-btn代替 .input-group-addon

//添加按钮

<div class="input-group">

<span class="input-group-btn">

<button class="btn btn-default" type="button">Go!</button>

</span>

<input type="text" class="form-control">

</div>

//添加下拉菜单

<div class="input-group">

<input type="text" class="form-control">

<span class="input-group-btn">

        <button type="button" class="btn btn-default dropdown-toggle"data-toggle="dropdown">下拉菜单<span class="caret"></span></button>

        <ul class="dropdown-menu pull-right">

            <li> <a href="#">功能</a> </li>

            <li> <a href="#">另一个功能</a> </li>

        </ul>

</span>

</div>

 

 

4.3输入框组的大小

您可以通过向 .input-group 添加相对表单大小的class(比如 .input-group-lginput-group-sm)来改变输入框组的大小。输入框中的内容会自动调整大小。

 

5.导航元素

5.1基本

ul添加.nav .nav-tabs.nav-pills

//标签式的导航菜单

<ul class="nav nav-tabs">

  <li class="active"><a href="#"

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值