BootStrap之基础-3 组件

一、组件


字体图标

  - 注意事项

      - 不要和其他组件混合使用

      - 只对内容为空的元素起作用

         wKiom1cDhP3hhbWQAAANOyz7fII171.png

      - 可访问性

        aria-hidden="true"

        aria-label=""

        .sr-only

        wKioL1cDhY6y4rc9AAAGZDuMsak041.png


下拉菜单

  - 基本格式

      - <div class="dropdown|dropup">

          <button data-toggle="dropdown">

          <ul class="dropdown-menu">

          BootStrap之基础-3 组件_第1张图片

  - 对齐

      - dropdown-menu-left | right

  - 标题

      - <li class="dropdown-header">

  - 分割线

      - <li class="divider"></li>

 - 禁用

      - <li class="disabled">

        BootStrap之基础-3 组件_第2张图片


按钮组

  - 基本按钮组

      - <div class="btn-group">

        

  - 按钮工具栏

      - <div class="btn-toolbar">

       wKiom1cDiVaygqCQAAAGBOnIEFE019.png

  - 尺寸

      - .btn-group-lg | sm | xs

  - 自适应

  - 垂直排列

      - <div class="btn-group-vertical">

        


按钮式下拉菜单

  - 按钮式下拉菜单依赖下拉菜单插件

  - 单按钮下拉菜单

      - <div class="btn-group">

          <button data-toggle="dropdown">

          <ul class="dropdown-menu">

  - 分裂按钮下拉菜单

wKiom1cDikex2H_hAAAWw3xYG0I828.png

  - 尺寸

  - 向上弹出菜单

      - <div class="btn-group dropup">


列表组

BootStrap之基础-3 组件_第3张图片

Well

  - 把 Well 用在元素上,能有嵌入(inset)的简单效果

  - <div class="well well-lg">

  - <div class="well well-sm">


分页

  - <nav>

      - <ul class="pagination">

  - 状态

      - <li class="disabled">

          <li><span></li>

      - <li class="active">

  - 尺寸

      - .pagination-lg

      - .pagination-sm


  - 翻页

      - <ul class="pager">

          <li class="previous">

          <li class="next">


标签

  - <span class="label label-default">Default</span>

  - <span class="label label-primary">Primary</span>

  - <span class="label label-success">Success</span>

  - <span class="label label-info">Info</span>

  - <span class="label label-warning">Warning</span>

  - <span class="label label-danger">Danger</span>


wKioL1cDjYHRD5OcAAA6KSGDDGI346.png


徽章



巨幕

  - 展示网站上的关键内容

BootStrap之基础-3 组件_第4张图片

页头

wKioL1cDjzXyosYpAABcMIPT6iI215.pngBootStrap之基础-3 组件_第5张图片


缩略图

  - 基于栅格系统实现

BootStrap之基础-3 组件_第6张图片

  - 自定义内容

      - <img>

      - <div class="caption">

        <h3>

        <p>



警告框

wKiom1cDkLbRTQGwAABmSlHIuxk675.pngwKioL1cDkXSRPaZTAABjbT5uvh0057.pngwKioL1cDkY_iARqLAABmtotdQOM051.png<a href="#" class="alert-link">


进度条

  - <div class="progress">

      - <div class="progress-bar" style="width:60%;">

      - 情景

        progress-bar-sucess | info | danger | success

      - 条纹

        progress-bar-striped

      - 动画

        active

      - 堆叠


面板 

  - <div class="panel">

      - .panel-primary

      - .panel-sucess

      - .panel-info

      - .panel-warning

      - .panel-danger

BootStrap之基础-3 组件_第7张图片


导航

  - 标签页上使用导航需要依赖JavaScript标签页插件

  - 标签页

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

        <li role="presentation" class="active">

  - 胶囊式标签页

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

  - 垂直标签

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

  - 两端对齐

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


导航条

  - 基本导航条

wKiom1cDlD7QnhUfAAANzf6D01o866.png  - 导航条表单

      - <form class="navbar-form" role="search">

  - 导航条按钮

      - <button class="btn btn-default navbar-btn">

  - 导航条文本

      - <p class="navbar-text">

  - 非导航链接

      - <a href="#" class="navbar-link">

  - 排列

      - .navbar-left | right

  - 固定

      - .navbar-fixed-top | bottom


导航路径

  - 在一个带有层次的导航结构中标明当前页面的位置

wKiom1cDlX-gmH0vAAAUlJpmUAw346.pngBootStrap之基础-3 组件_第8张图片


总结:本章内容主要介绍了 BootStrap 组件


本文出自 “会飞的蚂蚁” 博客,谢绝转载!

你可能感兴趣的:(元素,分割线)