Bootstrap组件和插件的简单使用

响应式导航条

  • 特征
  • 在PC和平板中默认要显示所有的内容
  • 在手机中导航条默认只显示logo,以及一个“菜单折叠展开按钮”,只有点击按钮后才显示所有的菜单项
  • bootstrap中导航条的基本结构
  • 基础类 class="navbar"
  • 按位置区分
    • 顶部导航条和底部导航条
  • 按颜色区分
    • 浅色底深色的字 - navbar-default
    • 深色底浅色的字 - navbar-inverse
  • 按定位方式分
    • 静态定位 - 默认值
    • 固态定位 - nav-fixed-top/bottom
  • html结构


  • 应用实例

Bootstrap组件和插件的简单使用_第1张图片
适应手机
适应PC

插件-标签页

html代码


        
欢迎使用十元套餐Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt optio a ullam aspernatur quasi necessitatibus in saepe neque consectetur officia quod debitis et quam quas placeat alias dolor voluptate eius?
欢迎使用二十元套餐Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui soluta atque dolorum quasi earum asperiores aspernatur neque unde. Odit libero qui facilis fugit doloremque architecto. Non natus necessitatibus veritatis laudantium.
欢迎使用三十元套餐Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius cumque iste quasi laborum earum inventore tempore non ipsum quam nesciunt maiores saepe. Perferendis nulla a vero nihil impedit! Possimus dolores.
标签页

插件-弹出框


    1. 工具提示框(tooltip)

        data-toggle="tooltip"

    2. 弹出框(popover)

        data-toggle="popover"

    3. 警告框(alert)
        
        
× xxxx
4. 模态对话框(modal) 5.模态对话框 1) 模态框定义:在父窗体中弹出一个子窗体,子窗体若不关闭,父窗体就无法获得焦点,同时父子窗体之间还可以传递数据,window.alert()/confirm()/prompt()就是典型的例子 2)模态框必需的结构 3) 显示一个模态框 1) 2)

应用实例


        
        modal的显示
        
Bootstrap组件和插件的简单使用_第2张图片
模态提示框

插件-折叠效果

1. 触发一个折叠效果

         1)

         2) 

应用实例

折叠效果

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus ducimus temporibus blanditiis iusto mollitia ullam ab quam est placeat fuga architecto voluptas aliquam asperiores qui doloremque dolor accusamus deleniti laboriosam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores quisquam quos sint laudantium nihil debitis aliquam consequatur velit architecto quidem quis voluptas quia iure maxime harum eum sed repellendus repellat.

手风琴

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum accusantium excepturi nihil dicta molestias sit soluta? Doloribus laborum minima ad sapiente vel nesciunt accusamus obcaecati consectetur earum alias iste tempora!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam quidem impedit animi deleniti laborum quo debitis odit eos corrupti saepe beatae minus harum voluptate laudantium et architecto blanditiis facilis similique.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam ut voluptate nobis repellendus explicabo nihil maxime dignissimos veniam corrupti asperiores ipsum consequatur odit tenetur reprehenderit dolores assumenda velit. Blanditiis consequatur.
Bootstrap组件和插件的简单使用_第3张图片
折叠效果一
Bootstrap组件和插件的简单使用_第4张图片
手风琴
Bootstrap组件和插件的简单使用_第5张图片
手风琴二

你可能感兴趣的:(Bootstrap组件和插件的简单使用)