菜单

【细解】如何根据bootstrap创建一个响应式的领航修

2018年11月15日 - Bootstrap

图片 1

一. bootstrap-组件-响应式导航条

  1. 特征
    1)在PC和平板中默认要展示所有的始末。
    2)在大哥大被导航条默认只显示logo,以及一个“菜单折叠展开按钮”,只发点击按钮后才显示有的小菜单项。
  2. bootstrap中导航条的核心构造

  1. 基础class-navbar
  2. 以岗位分别

  3. 交部导航条和底部导航条
    3)按颜色区分

  4. 浅色底深色的字 – navbar-default
  5. 深色的浅色的字 – navbar-inverse
    4)按一定法划分
  6. 静态定位 – 默认值
  7. 固态定位 – nav-fixed-top/bottom

  8. html结构

  <div class="navbar 颜色 定位">
    <div class="container">
      导航条的头部-商标加按钮
      <div class="navbar-header">
        <a class="navbar-brand">
          <button class="navbar-toggle">
      </div>
      导航条的折叠菜单
      <div class="navbar-collapse">
        <ul class="nav navbar-nav">
          <form class="navbar-form">
            <button class="navbar-btn">

              <a class="nav-link navbar-text">
        </div>
       </div>
     </div>

图片 2

二. 插件

  1. bootstrap基于JQ提供了十几个插件函数(类似于JQueryUI插件),每个插件对应一个js文件,可以独自使用,也堪整体引用(bootstrap.js);
  2. 调用上诉十几个插件可以用少种植格式

  1. 风的JS方式调用

     $().dropdown()  $().tab();
    
  2. 使用data-*扩大属性方式调用

  <a data-toggle="dropdown">

最后促成效益如下:

三. 插件-标签页

  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#p1">十元套餐</a></li>
    <li><a data-toggle="tab" href="#p2">二十元套餐</a></li>
    <li><a data-toggle="tab" href="#p3">三十元套餐</a></li>
  </ul>
  <div class="tab-content">
    <div id="p1" class="tab-pane active fade in">十元套餐详情 </div>
    <div id="p2" class="tab-pane fade ">二十元套餐详情 </div>
    <div id="p3" class="tab-pane fade ">三十元套餐详情 </div>
  </div>

图片 3

 图片 4

四. 插件-bootstrap提供的弹奏有约

  1. 工具提示框(tooltip)

     data-toggle="tooltip"
    
  2. 弹出框(popover)

     data-toggle="popover"
    
  3. 警告框(alert)

     <div class="alert alert-四种颜色 alert-dismissible>
    
        ×
    
        xxxx
    
     </div>
    
  4. 模态对话框(modal)

先是你得引入bootstrap与jquery

五. 插件-bootstrap提供的弹来框 – 模态对话框(modal)

  1. 模态框定义:在父亲窗体中弹奏来一个子窗体,子窗体若无倒闭,父窗体就无法获得焦点,同时父子窗体之间尚足以传递数据,window.alert()/confirm()/prompt()就是杰出的例证

  2. 模态框必需的组织

       <div class="modal">  半透明的黑色遮罩层
    
         <div class="modal-dialog"> 宽、定位
    
            <div class="modal-content"> 边框背景色阴影
    
                <div class="modal-header"><h3 class="modal-title"></h3></div>
                <div class="modal-body">主体</div>
                <div class="modal-footer">尾部</div>
    
            </div>
    
         </div>
    
       </div>
    
  3. 显示一个模态框

  <a href="#模态框id" data-toggle="modal">

  <button data-toggle="modal" data-target="#模态框id">

4.关闭一个模态框

     &times

图片 5

引进一个CDN:http://cdn.gbtags.com/index.html

六. 插件-折叠效果(collapse)

1.点发一个折功能

  <a href="#折叠元素id" data-toggle="collapse">
  <button data-toggle="collapse" data-target="#折叠元素id">

2.折叠元素

    <div id="折叠元素id" class="collapse in">

    </div> 

3.折折叠组件的有数个扩大用途

    1) 响应式导航条在手机屏幕中的效果
    2) according(手风琴)

4.手风琴html结构-依托于面板和折叠组件

    <div class="panel-group" id="test">

      <div class="panel panel-danger">

        <div  class="panel-heading">
            <h3 class="panel-title">
              <a href="#item1" data-toggle="#item1" data-parent="#test">红楼梦简介</a>
            </h3>
        </div>

        <div id="item1" class="collapse">

          <div  class="panel-body">

           </div>

        </div>
        <div  class="panel-footer">
           尾部
        </div>

      </div>

    </div>

图片 6

然后便是开始修HTML代码.如果你免思量改变显示力量的讲话实际CSS都非去形容了2333

因为HTML代码比较多 这里分为三单部分 然后最终更上同客完整HTML代码

第一要达到图所出示之,实现这功效待了解bootstrap的以下几单零部件

骨子里以上几乎独零部件的体制有格外多.我们特需要了解有即可
如要了解又多之乞求转自http://www.gbtags.com/api/bootstrap3.2/bootstrap-doc/components/index.html进行了解

PS:class{}这里就是注释并无是HTML代码

PS2:提供了HTML文件与一个在线的案例调试

 

导航漫长及导航漫漫LOGO布局

  1. <!–创建一个bootstarp导航条以及导航LOGO布局–>
  2. <nav class=”navbar navbar-default”>
  3. <div class=”navbar-header”>
  4. //do sth
  5. </div>
  6. </nav>

 

导航按钮

  1. <!–创建一个按钮–>
  2. <!–class{
  3. navbar-toggle:向js传递者按钮是好点击的
  4. collapsed:不做navbar-collapse那即便是一个默认class..不加貌似也没有察觉什么bug.
  5. }
  6. data-toggle=”collapse”:引入collapse插件
  7. data-target=”#navbar-gbtag”:当点击按钮的早晚跳转/打开哪一个签
  8. aria-expanded=”false”:辅助性阅读功能..针对特殊人群的装置–>
  9. <button type=”button” class=”navbar-toggle collapsed”
    data-toggle=”collapse” data-target=”#navbar-gbtag”
    aria-expanded=”false”>
  10. <!–于按钮上添加有图标和说明
  11. class{
  12. sr-only:隐藏者标签
  13. incon-bar:图标样式
  14. 下手改一生图标样式也glyphicon glyphicon-star试试
  15. }–>
  16. <span class=”sr-only”>点我啊</span>
  17. <span class=”icon-bar”></span>
  18. <span class=”icon-bar”></span>
  19. <span class=”icon-bar”></span>
  20. </button>

 

表单

  1. <div class=”form-group”>
  2. <!–class{
  3. form-control:设置宽度为100%不过我们在父级元素form设置了navbar-form所以宽度会沾肯定的决定
  4. }–>
  5. <input type=”text” class=”form-control” placeholder=”搜索” />
  6. </div><!–表单组–>
  7. <button type=”submit” class=”btn
    btn-default”>搜索</button>
  8. </form><!–表单–>

 

下拉菜单

  1. <li class=”dropdown”>
  2. <!–class{
  3. dropdown-toggle:声明这是一个可以下拉的列表..实际上我没察觉此class的切实用途.取消为未发现什么bug
  4. span .caret{
  5. 一个小三角的图标
  6. 图样式
  7. }
  8. }
  9. data-toggle=”dropdown” :引入下拉菜单组件的一个必要的性质
  10. role=”button”:起帮声明作用.声明是是一个按钮–>
    1. <a href=”#” class=”dropdown-toggle” data-toggle=”dropdown”
      role=”button” aria-haspopup=”true”
      aria-expanded=”false”>下拉菜单名称<span
      class=”caret”></span></a>
  11. <ul class=”dropdown-menu”>
  12. <li><a href=””>bootstrap</a></li>
  13. <!–class{
  14. divider:分隔线样式
  15. }
  16. role=”separator”:声明是因素呢一个分隔线–>
  17. <li role=”separator” class=”divider”></li>
  18. <li><a href=””>请关注极客标签</a></li>
    1. </ul><!–下拉菜单–>

 完整内容请参见链接:http://www.gbtags.com/gb/share/5758.htm


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图