zoukankan      html  css  js  c++  java
  • 关于bootstrap的css组件介绍及总结

    Glyphicons 图标:

    span.glyphicon glyphicon-align-center
    

    下拉菜单:

    div.dropdown/div.btn-group
    button[data-toggle=dropdown/.dropdown-toggle]
    ul.dropdown-menu
    li.dropdown-header
    li.disabled
    li.divider
    

    按钮工具栏:

    div.btn-toolbar
    

    按钮组:

    div.btn-group
    

    按钮尺寸:

    a.btn-lg
    a.btn-sm
    div.btn-group-lg
    div.btn-group-sm
    div.btn-group-xs
    

    垂直排列:

    div.btn-group-vertical
    

    按钮组中的下拉菜单:

    div.btn-group
    	button
    	button
    	div.btn-group
    

    两端对齐的链接排列:

    div.btn-group btn-group-justified
    

    按钮式下拉菜单:

    div.btn-group
    	button.btn btn-primary
    	button.btn btn-primary
    	div.btn-group
    		button.btn btn-pirmary dropdown-toggle[data-toggle=dropdown]
    		ul.dropdown-menu
    

    向上的下拉菜单:

    div.btn-group dropup
    	button.btn btn-primary
    	button.btn btn-primary
    	div.btn-group
    		button.btn btn-pirmary dropdown-toggle[data-toggle=dropdown]
    		ul.dropdown-menu
    

    输入框组:

    div.input-group
    	span.input-group-addon
    	input.form-control[placeholder=username]
    

    输入框组尺寸:lg|sm

    div.input-group input-group-lg
    	span.input-group-addon
    	input:form-control[placeholder=username]
    

    复选框与单选框:

    div.input-group input-group-lg
    	span.input-group-addon
    		input:checkbox
    	input.form-control
    

    附加按钮:

    div.input-group input-group-lg
    	span.input-group-btn
    		button.btn btn-default
    	input:form-control
    

    带下拉菜单的按钮:

    下拉菜单组这一块不用写.btn-group 类
    

    分段按钮:

    下拉菜单按钮组这一块不用写.btn-group 类
    

    标签页:

    ul.nav nav-tabs
    li.active>a
    

    胶囊式标签页:

    ul.nav nav-pills
    li.active
    

    堆叠胶囊式标签页:

    ul.nav nav-pills nav-stacked
    li.active
    

    标签页两端对齐:

    ul.nav nav-tabs nav-justified
    li.active
    

    禁用的链接:

    li.disabled
    

    带下拉菜单的导航:

    li.dropdown
    	a.dropdown-toggle
    	ul.dropdown-menu
    

    导航条:

    .navbar navbar-default
    

    导航条固定顶部:

    .navbar-fixed-top
    

    导航条固定顶部:

    .navbar-fixed-bottom
    

    导航条反色:

    .navbar-inverse
    

    条导航条 ul 元素:

    ul.nav navbar-nav
    

    条导航条 form 元素:

    form.navbar-form
    

    导航条文本元素:

    p.navbar-text
    

    导航条链接元素:

    a.navbar-link
    

    导航条按钮元素:

    button.navbar-btn
    

    面包屑导航:

    ul.breadcrumb
    

    默认分页

    ul.pagination
    li
    

    分页禁用和激活:

    li.active
    li.disabled
    

    分页尺寸:

    ul.pagination pagination-lg
    ul.pagination pagination-sm
    

    上下翻页:

    ul.pager
    

    实体总结:

    x times
    >> raquo
    << laquo
    <- larr
    -> rarr
    

    上下页两端对齐:

    li.previous
    li.next
    

    标签:

    span.label
    

    标签颜色:

    span.label label-default
    span.label label-primary
    span.label label-success
    span.label label-info
    span.label label-warning
    span.label label-danger
    

    徽章:

    span.badge
    

    大屏幕介绍:

    div.jumbotron
    

    页面标题:

    h1.page-header
    

    缩略图:

    a.thumbnail
    

    如果放到图片身上,点击会有放大动画
    定制内容:

    div.thumbnail
    

    警告框:

    div.alert
    

    警告框颜色:

    div.alert alert-success
    div.alert alert-info
    div.alert alert-warning
    div.alert alert-danger
    

    可关闭的警告框:

    <button class='close' data-dismiss='alert'>x</button>
    

    警告框中的链接:

    a.alert-link
    

    进度条:

    div.progress
    div.progress-bar[style='60%']
    

    进度条颜色:

    div.progress-bar-success
    div.progress-bar-info
    div.progress-bar-warning
    div.progress-bar-danger
    

    条纹进度条:

    div.progress progress-striped
    

    激活进度条:

    div.progress progress-striped active
    

    媒体列表:

    div.media
    div.media-body
    h1.media-heading
    p
    

    嵌套一份

    div.media
    div.media-body
    h1.media-heading
    p
    

    列表组:

    ul.list-group
    li.list-group-item
    

    链接列表:

    div.list-group
    a.list-group-item active
    

    面版:

    div.panel panel-default
    div.panel-heading
    div.panel-body
    div.panel-footer
    

    面版主题:

    div.panel panel-default
    div.panel panel-primary
    div.panel panel-success
    div.panel panel-info
    div.panel panel-warning
    div.panel panel-danger
    

    well 墙:

    div.well
    

    well 尺寸:

    div.well well-lg
    div.well well-sm
  • 相关阅读:
    模块 configparser subprocess 表格 的
    random, json, pickle, hashlib, hmac, shutil, shelve
    常用模块 1.时间模块 2.系统模块 3.项目开发目录规范
    GAN 教程记录
    matplotlib.pyplot展示MNIST图片
    机器学习算法辨别
    命令
    搭环境
    不对称分类的错误评估
    入侵检测数据集
  • 原文地址:https://www.cnblogs.com/itzlg/p/10699585.html
Copyright © 2011-2022 走看看