码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap 输入框和导航组件(六)

时间:2017-03-27 17:05:17      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:efault   tabs   下拉列表   ide   实现   bootstrap   文本   背景   ack   

一、输入框组件

<div class="input-group input-group-lg">
      <span class="input-group-addon">$</span>
      <input type="text" class="form-control">
      <span class="input-group-addon"></span>
</div> 

<div class="input-group">
      <span class="input-group-addon"><input type="checkbox"></span>
      <input type="text" class="form-control">
      <span class="input-group-addon"><input type="radio"></span>
</div>

<div class="input-group">
     <input type="text" class="form-control">
     <div class="input-group-btn">
       <button class="btn btn-default">提交</button>
     </div>
</div>

1、在 .input-group 框里 可分别左右两侧添加文字, <input>.form-control 添加样式。

2、文字元素用 span.inpt-group-addon

3、尺寸大小(从大到小): input-group-lg 、默认 、xs 、sm

4、使用复选框和单选框,也放入 .input-group-addon 中 。

5、使用按钮,把 div.btn-group 换成 .input-group-btn 。

6、使用下拉菜单或分列式,把 div.btn-group 换成 .input-group-btn ,分列式就是两个button。

<div class="input-group">
     <input type="text" class="form-control">
     <div class="input-group-btn">
       <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          下拉菜单
          <span class="caret"></span>
       </button>
       <ul class="dropdown-menu">
         <li class="dropdown-header">导航</li>
         <li><a href="#">首页</a></li>
         <li><a href="#">资讯</a></li>
         <li class="divider"></li>
         <li class="disabled"><a href="#">产品</a></li>
       </ul>
     </div>
</div>

 

二、导航组件

<ul class="nav nav-tabs">
    <li class="active"><a href="#">首页</a></li>
    <li><a href="#">资讯</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于</a></li>
</ul>

.nav   //  定义是一个导航类

.nav-tabs   //   实现便签页导航样式

.active   //   当前项

 

<ul class="nav nav-pills">

.nav-pills   //  胶囊式导航

 

<ul class="nav nav-pills nav-stacked">

.nav-stacked   //   垂直胶囊式导航

 

<ul class="nav nav-tabs nav-justified">

.nav-justified   //   导航两端对齐,均分100%

 

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

.disabled   //   禁用项

 

带有下拉菜单的导航:

<ul class="nav nav-tabs nav-justified">
    <li class="active"><a href="#">首页</a></li>
    <li><a href="#">资讯</a></li>
    <li><a href="#">产品</a></li>
    <li class="dropdown">
        <a href="#" data-toggle="dropdown">
          下拉菜单
          <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">导航一</a></li>
          <li><a href="#">导航二</a></li>
        </ul>
    </li>
    <li><a href="#">关于</a></li>
</ul>

.dropdown 定义在 li 上,按钮处需要添加 data-toggle="dropdown" , ul.dropdown-menu 定义下拉列表项

 

三、导航条组件

<nav class="navbar navbar-default">
    <div class="container">
      <div class="navbar-header">
         <a href="#" class="navbar-brand">标题</a>
      </div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">首页</a></li>
        <li><a href="#">资讯</a></li>
        <li class="disabled"><a href="#">产品</a></li>
        <li><a href="#">关于</a></li>
      </ul>
      
      <form action="" class="navbar-form navbar-right">
        <div class="input-group">
          <input type="text" class="form-control">
          <div class="input-group-btn">
            <button class="btn btn-default">提交</button>
          </div>
        </div>
      </form>  

      <button class="btn btn-default navbar-btn navbar-left">按钮</button>
      
      <p class="navbar-text">我是一段文本 <a href="#" class="navbar-link">链接</a></p>

    </div>
 </nav>

.navbar    //   定义表示是一个导航条

.navbar-default    //   导航条基本默认样式  

.navbar-inverse    //   导航条反色调,深色背景

.container    //   把导航条固定在某一个区域

.navbar-brand    //   导航条标题或者LOGO, 自带左浮动

.navbar-header    //   标题内容多可放入该区域中,只有一个时可直接使用 .navbar-brand 自带左浮动

.navbar-nav    //   导航条中的导航

.navbar-form    //   导航中使用表单

.navbar-left       //   导航中使用的对齐方式:居左

.navbar-right    //   导航中使用的对齐方式:居右

.navbar-btn    //   导航中使用按钮

.navbar-text    //   导航中使用一段文字

.navbar-link    //   非导航链接,一般需要置入文本区域内 ,属于内联,只改变样式与导航样式同步

.navbar-fixed-top    //   导航固定在顶部

.navbar-fixed-bottom    //   导航固定在底部

.navbar-static-top    //   静态导航,和页面等宽,两端对齐,宽度100%,并去掉了圆角

 

Bootstrap 输入框和导航组件(六)

标签:efault   tabs   下拉列表   ide   实现   bootstrap   文本   背景   ack   

原文地址:http://www.cnblogs.com/rainy0496/p/6627583.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!