首页 > web前端 > html教程 > bootstrap学习笔记(5)_html/css_WEB-ITnose

bootstrap学习笔记(5)_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 11:19:26
原创
978 人浏览过

Bootstrap输入框组

主要记住一个原则

创建输入框的步骤

  • 把前缀或后缀元素放在一个带有 class .input-group 的
    中。
  • 接着,在相同的
    内,在 class 为 .input-group-addon 的 内放置额外的内容。
  • 把该 放置在 元素的前面或者后面。
  • 面包屑导航:

         面包屑导航主要的属性就是在ul或者li加上breadcrumb属性。

    分页和翻页:

         以下是制作分页和翻页的小例子:

    <!DOCTYPE html><html><head>   <title>Bootstrap 实例 - 下拉菜单(Dropdowns)</title>   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script></head><body>  <div>  <ul class="pager" style="display:inline;float: left">    <li><a href="#">Previous</a></li>  </ul><ul class="pagination" style="display:inline;float: left">  <li><a href="#">&laquo</a></li> <li class="active"><a href="#">1</a></li>  <li class="disabled"><a href="#">2</a></li>   <li><a href="#">3</a></li>  <li><a href="#">4</a></li>   <li><a href="#">5</a></li>  <li><a href="#">&raquo</a></li></ul><ul class="pager" style="display:inline;float: left">    <li><a href="#">Next</a></li>  </ul>  </div></body></html>
    登录后复制

     

     

     

     

      

    相关标签:
    来源:php.cn
    上一篇:如何用原生javascript实现放大镜效果_html/css_WEB-ITnose 下一篇:CSS定位问题(1):盒模型、浮动、BFC_html/css_WEB-ITnose
    本站声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    作者最新文章
    最新问题
    相关专题
    更多>
    热门推荐
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板