zoukankan      html  css  js  c++  java
  • Bootstrap——组件

    1.字体图标

    <span class="glyphicon glyphicon-star" aria-hidden="true"></span> 
    • glyphicon:图标的通用类
    • glyphicon-star:图标类型(样式)
    • aria-hidden="true":通用,避免屏幕识读设备抓取非故意的和可能产生混淆的输出内容

    实例:

    <button type="button" class="btn btn-default btn-lg">
      <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
    </button>

    效果:

    2.下拉菜单

    • dropup:向上弹出
    • dropdown:向下弹出
    • dropdown-menu:下拉菜单的通用类
    • dropdown-menu-right:向右对齐
    • dropdown-menu-left:向左对齐(默认情况)
    • role="separator" class="divider":为下拉菜单添加一条分割线
    • disabled:禁用菜单的选项
    • dropdown-toggle:下拉菜单通用类

    3.按钮组

    <div class="btn-group" role="group" aria-label="...">
      <button type="button" class="btn btn-default">Left</button>
    </div>

    btn-group:按钮容器通用类

    role=“group”:按钮,为了正确传达按钮分组

    role=“toolbar”:工具栏,就是里面再包裹多个role=“group”

    btn-group-lg/sm/xs:按钮组的尺寸(大/略小/很小)

    btn-group-vertical:让按钮垂直排列

    btn-group-justified:两段对齐排列按钮组(居于屏幕中间)

    btn-lg/sm/xs:按钮时下拉菜单的所有尺寸

    4.输入框组

     input-group:输入框组

    input-group-addon:input框两边添加字符

    input-group-btn:input框两边添加按钮

    input-group-lg/sm:input框的大小

    5.导航

    role="navigation":如果想在导航组件上实现导航功能,必须添加

    nav:导航的基类

    nav-tabs:基本标签页

    nav-pills:胶囊式标签页

    nav-stacked:垂直方向(只适合胶囊)

     nav-justified:两端对齐的(置于屏幕中间,自动调整尺寸)

    disabled:禁用的链接(任何导航组件都可以添加)

    6.导航条

     navbar:导航条通用类

    navbar-default:默认样式(颜色、高度等)

    role="navigation":增加访问性

    navbar-header:导航标题

    navbar-brand:让字体变粗,一般包含在标题之内

    navbar-form:将表单放在里面可以垂直对齐

    navbar-left/right:让导航链接、表单、按钮或文本对齐

    navbar-btn:不包含在form中的元素,使用此属性可以在导航条中居中

    navbar-text:导航条中的文本

    navbar-link:让链接有正确的默认颜色和反色设置

    navbar-fixed-top:让导航条固定在顶部,可以包含容器,让导航条居中。

      导航条可能会遮住页面其它内容,需要设置一个padding-top。

    navbar-fixed-bottom:让导航条固定到底部,需设置padding-bottom,不然也会遮住其它内容

    navbar-static-top:创建夜歌与页面等宽度的导航条,但是往下拉会消失。

    navbar-inverse:反色,改变导航条的外观。

    7.路径导航

    pagination:路径导航通用类

    8.分页

     Page navigation:分页

     pagination-lg/sm:尺寸

    pager:翻页

    previous/next:对齐链接

    disabled:禁用状态

    9.标签

    label-default/primary/success/info/warning/danger:标签的外观

    <h1>~<h6>:尺寸

    10.徽章

    badge:徽章 

     

    11.巨幕

    jumbotron:巨幕 

    12.页头

    page-header:页头组件能够为h1标签增加适当的空间,与其他页面也有一些分隔。

    13.警告框

    alert-dismissible:可关闭的警告框

     alert-success/info/warning/danger:为弹出框设置颜色

    14.进度条

    progress:进度条通用类

    progress-bar:进度条本身设置

    progress-bar-success/info/warning/danger:设置颜色 

    progress-bar-striped:进度条条纹

    active:动画效果

    15.媒体对象

     media: 允许将媒体对象里的多媒体(图像、视频、音频)浮动到内容区块的左边或者右边。

    media-right/left:浮动到左边或右边

    media-body/heading:媒体对象主体或头部

    media-list:媒体对象中的列表

    16.列表组

    list-group :用于以列表形式呈现复杂的和自定义的内容

    list-group-item:列表中的项

    17.面板

    panel:面板基本类

    panel-default:默认属性 

    panel-heading:面板头部

    panel-body:面板标题会和表格连接起来,没有空隙

    panel-title:面板标题

    <h1>-<h6>:字体大小

    panel-footer:带脚注的面板

    18.well

    well:嵌入简单的效果

    well-sm/lg:尺寸

  • 相关阅读:
    常用的VI/VIM命令
    那些年学过的一些算法
    huffman编码
    好用java库(一):java date/time api:jodatime
    linux启动
    ubuntu学习方式
    地址
    各种各样的软件
    jquery文件
    C变量与数据
  • 原文地址:https://www.cnblogs.com/yangmingxianshen/p/8253529.html
Copyright © 2011-2022 走看看