zoukankan      html  css  js  c++  java
  • bootstrap学习

    ---恢复内容开始---

    col-md-push-8: 右移8格
    col-md-pull-4 :左移4格
    col-md-offset-3: 距离左边3格

    <small>标签:副标题/85%小字体

    class="lead":强调文本

    <strong>:粗体

    <em>:斜体

    class="initialism":<abbr> 元素中的文本以小号字体展示,且可以将小写字母转换为大写字母

    <address>:显示联系信息

    <abbr title="Phone">P:</abbr>:下划线,鼠标移至显示title

    <a href="mailto:#">mailto@somedomain.com</a>:点击打开邮箱

    class="pull-right":右对齐

    <blockquote>默认的引用,子节点<small>将带有引用标识“-”

    <cite> 参考文献引用,斜体

     

    下表提供了 Bootstrap 更多排版类的实例:

    描述 
    .lead 使段落突出显示  
    .small 设定小文本 (设置为父文本的 85% 大小)  
    .text-left 设定文本左对齐  
    .text-center 设定文本居中对齐  
    .text-right 设定文本右对齐  
    .text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行  
    .text-nowrap 段落中超出屏幕部分不换行  
    .text-lowercase 设定文本小写  
    .text-uppercase 设定文本大写  
    .text-capitalize 设定单词首字母大写  
    .initialism 显示在 <abbr> 元素中的文本以小号字体展示,且可以将小写字母转换为大写字母  
    .blockquote-reverse 设定引用右对齐  
    .list-unstyled 移除默认的列表样式,列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项,你需要在嵌套的列表中使用该样式)  
    .list-inline 将所有列表项放置同一行  
    .dl-horizontal 该类设置了浮动和偏移,应用于 <dl> 元素和 <dt> 元素中,具体实现可以查看实例  
    .pre-scrollable 使 <pre> 元素可滚动 scrollable

    <p class="text-left">向左对齐文本</p>

    <p class="text-center">居中对齐文本</p>

    <p class="text-right">向右对齐文本</p>

    <p class="text-muted">本行内容是减弱的</p>

    <p class="text-primary">本行内容带有一个 primary class</p>

    <p class="text-success">本行内容带有一个 success class</p>

    <p class="text-info">本行内容带有一个 info class</p>

    <p class="text-warning">本行内容带有一个 warning class</p>

    <p class="text-danger">本行内容带有一个 danger class</p>

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"> 
        <title>Bootstrap 实例 - 列表</title>
        <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
        <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <h4>有序列表</h4>
    <ol>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ol>
    <h4>无序列表</h4>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
    <h4>未定义样式列表</h4>
    <ul class="list-unstyled">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
    <h4>内联列表</h4>
    <ul class="list-inline">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
    <h4>定义列表</h4>
    <dl>
        <dt>Description 1</dt>
        <dd>Item 1</dd>
        <dt>Description 2</dt>
        <dd>Item 2</dd>
    </dl>
    <h4>水平的定义列表</h4>
    <dl class="dl-horizontal">
         <dt>Description 1</dt>
         <dd>Item 1</dd>
         <dt>Description 2</dt>
         <dd>Item 2</dd>
    </dl>
    
    </body>
    </html>

    ---恢复内容结束---

  • 相关阅读:
    偶遇this之坑
    程序员的职业素养——读后感
    我怎么没想到——读后感
    黑客与画家——读后感
    漫谈认证与授权
    动手造轮子:实现一个简单的依赖注入(二) --- 服务注册优化
    动手造轮子:实现简单的 EventQueue
    asp.net core 自定义 Policy 替换 AllowAnonymous 的行为
    SQL Server 中 `JSON_MODIFY` 的使用
    WeihanLi.Npoi 近期更新
  • 原文地址:https://www.cnblogs.com/shen076/p/6133700.html
Copyright © 2011-2022 走看看