bootstrap v3学习笔记之全局css样式

最新推荐文章于 2024-04-24 15:41:29 发布

zzm628

最新推荐文章于 2024-04-24 15:41:29 发布

阅读量923

点赞数

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

本文链接：https://blog.csdn.net/zzm628/article/details/47334709

版权

3 篇文章 0 订阅

订阅专栏

1、文档类型必须为html5类型，页面格式应为：

<!DOCTYPE html>
<html lang="zh-CN">
  ...
</html>

2、移动设备优先。为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签：

<meta name="viewport" content="width=device-width, initial-scale=1">

viewport：视口

width指令使用device-width标记可以指示视区宽度应为设备的屏幕宽度。类似地height指令使用device-height标记指示视区高度为设备的屏幕高度。

initial-scale指令用于设置Web页面的初始缩放比例

3、Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器，.container 类用于固定宽度并支持响应式布局的容器。也可以使用.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。注意：这两种容器类不能互相嵌套。

4、栅格系统。Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。使用时如下：

<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

row应包含在container或container-fluid中。class中的数字可以是1-12中的数字，但一个row中的所有数字之和不应该大于12，否则超出的部分将另起一行。

如果想让某一列产生偏移请使用class：col-md-offset-*（*代表1-12中的数字）

5、若想为表格增加样式，需要增加class：.table。默认并没有为所有表格设置样式，以免对一些日历选择等使用table的工具产生影响。想要显示所有边框可增加class：.table-bordered，鼠标悬停样式可增加class：.table-hover。还可为tr或td单独增加如下样式：

6、隐藏某个元素可使用class：.sr_only

7、设定图片自动缩放可使用class：.img-responsive。还可以增加 .img-rounded 设置圆角，.img-circle 设置圆形，img-thumbnail 设置外边框

8、关闭按钮：

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>

9、三角符号：

<span class="caret"></span>

10、清除浮动：

通过为父元素添加 .clearfix 类可以很容易地清除浮动（float）

实现原理：

.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

关注

专栏目录