Bootstarp 4 入门之Bootstrap 内容排版形式

形式

Bootstrap 重置了大部分基本的HTML元素的视觉效果,不过这只能通过调用特定的 class 来实现,比如 <table> 的样式,需要使用.table, .table-bordered 类来实现其重置后统一的视觉效果。
以下是为什么我们要重置的原因:

  • 更新部分浏览器的预设值,在可变动的文字间距上使用 rem 替代 em。
  • 避免 margin-top。垂直边缘可能会发生重叠,产生无法预料的错误。更重要的是 margin 应该是单向、简单的思维。
  • 为了在设备之间之间轻松缩放,block 元素应当在 margin 上采用 rem。
  • 尽可能减少与- font有关的属性的声明inherit。

默认的效果

在··和··元素更新

  • box-sizing内的每一个元素,包括设置*::before*::afterborder-box。这样可以确保不会因填充或边框而超出元素声明的宽度。
  • 没有font-size在上声明任何基础,而是16px的基础(浏览器默认设置)。font-size: 1rem在应用,同时尊重用户的喜好,并确保一个更方便的方式通过媒体查询,方便响应式缩放。
  • <body>还设置一个font-familyline-heighttext-align。稍后,某些表单元素会继承此格式,以防止字体不一致。
  • 为了安全起见,已声明了background-color,默认为#fff

默认字体

默认的Web字体(Helvetica Neue,Helvetica和Arial)已删除到Bootstrap 4中,并替换为“本机字体堆栈”,以在每个设备和OS上实现最佳文本渲染

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  "Roboto",
  // Basic web fallback
  "Helvetica Neue", Arial, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

标题和段落

重置所有标题元素 - 例如,<h1> - 和 <p> 以删除其边距顶部。 标题添加了 margin-bottom: .5rem ,段落则是添加了 margin-bottom: 1rem。这样看起来更有美感。

Heading Example

<h1></h1>

h1. Bootstrap heading

<h2></h2>

h2. Bootstrap heading

<h3></h3>

h3. Bootstrap heading

<h4></h4>

h4. Bootstrap heading

<h5></h5>

h5. Bootstrap heading

<h6></h6>

h6. Bootstrap heading

列表

刪除全部列表 <ul><ol><dl> 中的 margin-top,并设置为 margin-bottom: 1rem。嵌套列表沒有 margin-bottom
描述

<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

<ol>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit</li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ol>

为了更简单的样式,清晰的层次结构和更好的间距,描述列表重置了边距。 <dd>margin-left重置为0并添加 margin-bottom: .5rem<dt> 是粗体。

行内列表.list-inline.list-inline-item 来完成

重设默认样式 list-unstyled

描述

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

描述

<dl>
    <dt>Description lists</dt>
    <dd>A description list is perfect for defining terms.</dd>
    <dt>Euismod</dt>
    <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd>
    <dd>Donec id elit non mi porta gravida at eget metus.</dd>
    <dt>Malesuada porta</dt>
    <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
  </dl>

表单

重置动各种表单元素以实现更简单的基本样式。 以下是一些最显着的变化:

  • <fieldset> 没有边框,填充或边距以便包覆独立输入和成组输入。
  • <legend>fieldsets一样,<legend> 已经被重新定义样式以便显示为类型的标题。
  • <label> 设定被为display: inline-block 以便让 margin 应用。
  • 透过Normalize于<input><select><textarea>,和<button> ,重置删除了他们的 margin 并同样设定line-height: inherit

    描述

    <form class="bd-example">
    <fieldset>
    <legend>Example legend</legend>
    
    <p>
      <label for="input">Example input</label>
      <input type="text" id="input" placeholder="Example input">
    </p>
    
    <p>
      <label for="select">Example select</label>
      <select id="select">
        <option value="">Choose...</option>
        <optgroup label="Option group 1">
          <option value="">Option 1</option>
          <option value="">Option 2</option>
          <option value="">Option 3</option>
        </optgroup>
        <optgroup label="Option group 2">
          <option value="">Option 4</option>
          <option value="">Option 5</option>
          <option value="">Option 6</option>
        </optgroup>
      </select>
    </p>
    
    <p>
      <label>
        <input type="checkbox" value="">
        Check this checkbox
      </label>
    </p>
    
    <p>
      <label>
        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
        Option one is this and that
      </label>
      <label>
        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
        Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls.
      </label>
      <label>
        <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled="">
        Option three is disabled
      </label>
    </p>
    
    <p>
      <label for="textarea">Example textarea</label>
      <textarea id="textarea" rows="3"></textarea>
    </p>
    
    <p>
      <label for="date">Example date</label>
      <input type="date" id="date">
    </p>
    
    <p>
      <label for="time">Example time</label>
      <input type="time" id="time">
    </p>
    
    <p>
      <label for="output">Example output</label>
      <output name="result" id="output">100</output>
    </p>
    
    <p>
      <button type="submit">Button submit</button>
      <input type="submit" value="Input submit button">
      <input type="reset" value="Input reset button">
      <input type="button" value="Input button">
    </p>
    
    <p>
      <button type="submit" disabled="">Button submit</button>
      <input type="submit" value="Input submit button" disabled="">
      <input type="reset" value="Input reset button" disabled="">
      <input type="button" value="Input button" disabled="">
    </p>
    </fieldset>
    </form>

地址

更新<address>元素以将浏览器默认字体样式从斜体重置为正常。 line-height现在也被继承,并且margin-bottom: 1rem 已被添加。 <address> 用于显示联系信息。 通过使用 <br> 结束行来保留格式。

描述

<address>
    <strong>Twitter, Inc.</strong><br>
    1355 Market St, Suite 900<br>
    San Francisco, CA 94103<br>
    <abbr title="Phone">P:</abbr> (123) 456-7890
  </address>

引用段落 Blockquote

Blockquote的margin的默认值为1em 40px,因此我们将其重置0 0 1rem;
描述

<blockquote class="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>

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。