zoukankan      html  css  js  c++  java
  • Bootstrap学习笔记(5)

    Bootstrap输入框组

    主要记住一个原则
    创建输入框的步骤
    • 把前缀或后缀元素放在一个带有 class .input-group 的 <div> 中。
    • 接着,在相同的 <div> 内,在 class 为 .input-group-addon 的 <span> 内放置额外的内容。
    • 把该 <span> 放置在 <input> 元素的前面或者后面。

    面包屑导航:

         面包屑导航主要的属性就是在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>
     
     
     
      
  • 相关阅读:
    尾递归
    博客搬家 --- CSDN
    sublime text 插件集锦
    chrome 常用插件集锦
    IntelliJ Idea 2017 免费激活方法
    Mac下Java JNI 调C
    webgl学习笔记五-纹理
    webgl学习笔记四-动画
    webgl学习笔记三-平移旋转缩放
    webgl学习笔记二-绘图多点
  • 原文地址:https://www.cnblogs.com/cby-love/p/5447180.html
Copyright © 2011-2022 走看看