zoukankan      html  css  js  c++  java
  • BootStrap详解之(二)

    六、内容
    Bootstrap 将全局 font-size 设置为 14px,line-height 设置为 1.428

    中心内容
    .lead 将字体大小、加粗、行高修改 (无卵高深用)
    标记
    mark标签高亮内容 <mark>highlight</mark>
    删除内容
    del标签删除内容(横线)
    <del>This line of text is meant to be treated as deleted text.</del>
    无用文本
    s 标签(横线)
    <s>This line of text is meant to be treated as deleted text.</s>
    同删除内容
    插入文本
    ins标签(下划线)
    <ins>This line of text is meant to be treated as an addition to the document.</ins>
    带下划线的文本
    u标签
    <u>This line of text will render as underlined</u>

    小号文本
    small标签,父容器字体大小的 85% (标题的small是指定的大小)

    着重
    strong标签

    斜体
    em标签

    对齐

    <p class="text-left">Left aligned text.</p>
    <p class="text-center">Center aligned text.</p>
    <p class="text-right">Right aligned text.</p>
    <p class="text-justify">左右对齐</p>
    <p class="text-nowrap">不换行</p>
    

    大小写

    <p class="text-lowercase">Lowercased text.</p>
    <p class="text-uppercase">Uppercased text.</p>
    <p class="text-capitalize">Capitalized text.</p>
    

    缩略语
    <abbr title="attribute">attr</abbr>
    首字母缩略语
    <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>


    地址

    <address>
      <strong>Twitter, Inc.</strong><br>
      795 Folsom Ave, Suite 600<br>
      San Francisco, CA 94107<br>
      <abbr title="Phone">P:</abbr> (123) 456-7890
    </address>
    
    <address>
      <strong>Full Name</strong><br>
      <a href="mailto:424662508@qq.com">424662508@qq.com</a>
    </address>
    

    引用
    blockquote标签

    <footer> 用于标明引用来源。来源的名称可以包裹进 <cite>标签中。
        <blockquote>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
          <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
        </blockquote>
    

    右对齐效果
      .blockquote-reverse

    无序列表
    <ul>
    <li>...</li>
    </ul>
    有序列表
    <ol>
    <li>...</li>
    </ol>
    无样式列表
    <ul class="list-unstyled">
    <li>...</li>
    </ul>

    内联列表
    <ul class="list-inline">
    <li>...</li>
    </ul>

    描述列表
    <dl>
    <dt>...</dt>
    <dd>...</dd>
    </dl>
    水平排列的描述
    <dl class="dl-horizontal">
    <dt>...</dt>
    <dd>...</dd>
    </dl>

    -- 自动截断:text-overflow: ellipsis;
    -- 不换行:white-space: nowrap;


    用户输入
    <kbd> 标签

    代码块
    <pre> 标签

    .pre-scrollable 类,其作用是设置 max-height 为 350px ,并在垂直方向展示滚动条

    变量
    var 标签

    程序输出
    标签

    七、表格
    table、caption、thead、tbody、tr、th、td

    .table
    .table .table-striped 条纹状
    .table .table-bordered 边框
    .table .table-hover 鼠标悬停
    .table .table-condensed 紧缩,padding减少
    颜色,tr和td都可以加入颜色样式:
    .active 鼠标悬停在行或单元格上时所设置的颜色
    .success 标识成功或积极的动作
    .info 标识普通的提示信息或动作
    .warning 标识警告或需要用户注意
    .danger 标识危险或潜在的带来负面影响的动作

    .table-responsive 相应式表格,将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。


    八、表单
    基本表单
    .form-group
    label
    .form-control

    内联表单
    .form-inline:当行表单,在表单组外面添加.form-inline 类,可以使得表单内联, 如果屏幕宽度小于768px,则失效
    .sr-only: 隐藏label,class="sr-only"
    .input-group: 对input标签进行处理
    .form-horizontal: .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类,可以将 label 标签和控件组水平并排布局

    其他详见:http://v3.bootcss.com/

  • 相关阅读:
    Winfrom Chart实现数据统计
    Python--面向过程编程
    老板喜欢什么样的员工
    python--装饰器
    python--浅拷贝和深拷贝
    Python基础-logging模块
    Python基础-subprocess模块
    Python基础-hashlib模块
    Python基础-ConfigParser模块
    Python基础-XML模块
  • 原文地址:https://www.cnblogs.com/wulaoer/p/5240215.html
Copyright © 2011-2022 走看看