全局css样式

最新推荐文章于 2024-03-05 22:34:43 发布

VIP文章见面时的呼吸都曾反复练习

最新推荐文章于 2024-03-05 22:34:43 发布

阅读量1.7k

点赞数

分类专栏： Bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/wstpa/article/details/50402289

版权

1、移动设备优先

1.1、head部分的设置

ie使用最新的渲染引擎

<meta http-equiv="X-UA-Compatible" content="IE=edge">

viewport元数据标签

<meta name="viewport" content="width=device-width,initinal-scale=1, maximum-scale=1, user-scalable=no ">

2、栅格化系统

2.1、栅格参数

这里写图片描述

2.2、清浮动 - .clearfix

<div class="row">
  <div class="col-xs-6 col-sm-3">当此处内容很多很多很多很多时，会把这列的高度撑的很高，row下面的col都是浮动布局，这样就会使第三个列出现问题，在分辨率小时才出现。因为大分辨率下，有足够的宽，让所有的列水平排列</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport，你可以试试不要visible-xs-block -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">如果没有上面一行的设置，在小分辨率下，我会出现在第一列的后面，因为它太高了。</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

2.3、列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

当offset-*大于12时，会向下移动

2.4、列排序
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。push向后移动，pull向前移动。

当push大于12时，依然在一行，这不同于列偏移offset

2.5、嵌套列
为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

3、排版

3.1、标题

HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。

3.2、页面主体

Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

通过添加 .lead 类可以让段落突出显示。

3.3、内联文本元素

1.高亮显示 <mark>

<p>对此，我很<mark>抱歉</mark></p>

对此，我很抱歉

2.被删除的文本<del>

<del>对此，我很抱歉</del>

~~对此，我很抱歉~~

3.无用文本<s>，表现形式和del差不多

<p>对此，我很<s>抱歉</s></p>

对此，我很抱歉

4.额外插入的文本使用 <ins> 标签。
5.为文本添加下划线，使用 <u> 标签。
6.小号文本
对于不需要强调的inline或block类型的文本

最低0.47元/天解锁文章

见面时的呼吸都曾反复练习

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
全局css样式

1、移动设备优先1.1、head部分的设置ie使用最新的渲染引擎<meta http-equiv="X-UA-Compatible" content="IE=edge">viewport元数据标签<meta name="viewport" content="width=device-width,initinal-scale=1, maximum-scale=1, user-scalable=no "
复制链接

扫一扫