zoukankan      html  css  js  c++  java
  • Bootstrap 学习笔记 之排版 (2 day)

    Bootstrap 里面已经预先写好了很多排版样式,需要使用到相关样式的时候,只需要添加相关的类名即可,无需自己重写

    这里涉及到一个Normalize.css (规范)的样式表,是github上面的一个开源项目,// 其实就是一个很好用的重置样式表;

    Normalize.css是一个很小的 CSS 文件,在 HTML 元素的默认样式中提供了更好的跨浏览器一致性 // 兼容各厂商浏览器;

    (拓展思考:可以根据自己的实际项目来删减这个样式表,避免不必要的冗余,等于是一个可定制化基础)

    一、标题:

     h1——h5标题的应用

    内联子标题

    如果需要向任何标题添加一个内联子标题,只需要简单地在元素两旁添加 <small>,或者添加 .small class,这样子您就能得到一个字号更小的颜色更浅的文本

    二、引导主体副本

    为了给段落添加强调文本,则可以添加 class="lead",这将得到更大更粗、行高更高的文本

    三、列表

    这里需要注意的是 内联列表和水平的定义列表,本质都没变,只是样式改变了,看代码:

    <!DOCTYPE html>
    <html>
    <head>
       <title>Bootstrap 实例 - 列表</title>
       <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
       <script src="/scripts/jquery.min.js"></script>
       <script src="/bootstrap/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>
    View Code
  • 相关阅读:
    HTML学习心得
    VS相关
    安全算法
    第三方库的编译
    C++编译问题
    GCC编译
    linux系统·用户管理
    批处理遍历并计算子文件夹下的文件数目
    [Tianchi] Repeat Buyers Prediction-Challenge the Baseline -- version 0
    win10安装cuda
  • 原文地址:https://www.cnblogs.com/zhangxg/p/4539588.html
Copyright © 2011-2022 走看看