zoukankan      html  css  js  c++  java
  • Bootstrap——全局CSS样式

    1.栅格系统

    containter:用于固定宽度并支持响应式布局的容器

    container-fluid:用于100%宽度,占据全部视口(viewport)的容器

    row:行,必须在container或container-fluid之内

    col-md/xs-*:设置块的列宽

    col-md/xs-offset-*:列偏移

    col-md-push/pull:推/拉

    2.排版

    <h1><h6>:尺寸

    <small>:副标题

    <p></p>:段落

    lead:中心内容,字体变大

    <mark></mark>内敛文本,特殊的曙色

    <del></del>被删除的文本

    <s></s>无用文本

    <ins></ins>插入文本

    <u></u>:带下划线的文本

    <small><small>:小号文本

    <strong></strong>:着重

    <em></em>:斜体

    text-left/center/right/justify:左中有下对齐

    text-lowercase/uppercase/capitalize:小写/大写/首字母大写

    <abbr></abbr>:基本缩略语

    initialism:首字母缩略语

    <br>:地址

    <blockquote></blockquote>:引用

    <footer></footer>:表名引用来源

    <cite></cite>:标签语

    blockquote-reverse:内容左右对齐

    list-unstyled:无样式列表

    list-inline:将所有元素放置在同一行

    <d1><dt></dt><dd></dd>...</d1>:描述内容

    d1-horizontal:水平排列的描述

    3.代码

    <code></code>:让代码显示出来

    <kbd></kbd>:标记用户通过键盘输入的内容

    <pre></pre>:正确的展示代码,尖括号需要转义

    <var></var>:标记变量

    <samp></samp>:来标记程序输出的内容

    4.表格

    table:表格的基本样式

    table-striped:条纹

    table-bordered:增加边框

    table-hover:鼠标悬停

    table-condensed:紧缩表格

    active/success/info/warning/danger:状态,颜色。

    table-responsive:响应式表格,缩小时会有水平滚动条

    5.表单

    form-control:文本都会有

    form-group:表单通用类,每个表单都有

    form-inline:内容左对齐,并表现为inline-block级别,内联表单

    sr-only:隐藏内联表单的标签

    form-horizontal:水平表单

    placeholder:默认值

    checkbox-inline /radio-inline:多选或单选控件

    form-control-static:将纯文本和label元素放置在同一行

    readonly:只读

    has-feedback:文本框中添加额外的值

    form-group-lg/form-group-sm :尺寸

    6.按钮

    btn:

    btn-default:

    role="button":于在当前页面触发某些功能 -- 而不是用于链接其他页面或链接当前页面中的其他部分,必须添加

    btn=lg/sm/xs:尺寸

    btn-block:拉伸至父元素的100%

    opacity:禁用

    7.图片

    img-responsive :可以让图片支持响应式布局

    center-block:让图片水平居中

    img-rounded/circle/thumbnail:圆角/原型/边框

    8.其它

    text-info/success/danger..:文字颜色或属性

    bg-info/success..:背景颜色或属性

    close:”x“关闭符号

    caret:三角符号

    !important:让任意元素左右浮动

    clearfix:清除浮动

    show/hidden:显示/隐藏

  • 相关阅读:
    AT4144[ARC098D]Donation【Kruskal重构树,dp】
    YbtOJ#643机器决斗【贪心,李超树】
    P3273[SCOI2011]棘手的操作【线段树,并查集】
    AT3950[AGC022E]Median Replace【贪心,dp】
    P3760[TJOI2017]异或和【树状数组】
    AT4505[AGC029F]Construction of a tree【构造题,hall定理,网络流】
    Ybt#452序列合并【期望dp】
    AT3949[AGC022D]Shopping【贪心】
    AT4995[AGC034E] Complete Compress【树形dp】
    P4338[ZJOI2018]历史【LCT】
  • 原文地址:https://www.cnblogs.com/yangmingxianshen/p/8253977.html
Copyright © 2011-2022 走看看