Bootstrap笔记

来源：互联网发布：淘宝隐藏导航条编辑：程序博客网时间：2024/05/20 04:11

1.设置为HTML5 文档类型：

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

2.为了确保适当的绘制和触屏缩放：

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

3.禁用缩放功能，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉：

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

4.布局container 容器和.container-fluid容器两者不可以嵌套。

<div class="container" width=“具体宽度”>  ...</div>或<div class="container-fluid">/*宽度100%*/  ...</div>

手机 (<768px) .col-xs-  平板 (≥768px)  .col-sm- 桌面显示器 (≥992px)  .col-md-

5.某些列可能会出现比别的列高的情况。为了克服这一问题，建议联合使用 .clearfix 和响应式工具类：

<div class="row">    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>    <!-- Add the extra clearfix for only the required viewport -->    <div class="clearfix visible-xs-block"></div>    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div></div>

6.用 .col-md-offset-* 类可以将列向右侧偏移：

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

7.内置的栅格系统将内容再次嵌套，

可以通过添加一个新的 .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>

8.通过使用 .col-md-push-后面和 .col-md-pull- 前面类就可以很容易的改变列（column）的顺序。

9.变量生成预定义的栅格类

@grid-columns:12;@grid-gutter-width:30px;@grid-float-breakpoint:768px;

mixin 用来和栅格变量一同使用，为每个列（column）生成语义化的 CSS 代码

10.利用默认设置生成两列布局（列之间有间隔）的案例。

.wrapper{    .make-row();}.content-main{    .make-lg-column(8);}.content-secondary{    .make-lg-column(3);    .make-lg-column-offset(1);}<div class="wrapper">    <div class="content-main">...</div>    <div class="content-secondary">...</div></div>

11. 文字语法

段落突出显示 .lead  删除线 <del>没用的文本使用 <s>下划线 <u> ，额外插入的文本使用 <ins> 标签斜体<em>  粗体<strong> 文本对齐.text-left/center/right不换行   .text-nowrap大小写 .text-uppercase/lowercase首字母大写.text-capitalize基本缩略语<abbrtitle="attribute" class="initialism">attr</abbr> /*鼠标停在abbr时，出现提示attribute，class是让attr字体变小*/内联列表横向排列ul .list-inline

1 0

Bootstrap笔记

1.设置为HTML5 文档类型：

2.为了确保适当的绘制和触屏缩放：

3.禁用缩放功能，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉：

4.布局container 容器和.container-fluid容器两者不可以嵌套。

5.某些列可能会出现比别的列高的情况。为了克服这一问题，建议联合使用 .clearfix 和 响应式工具类：

6.用 .col-md-offset-* 类可以将列向右侧偏移：

7.内置的栅格系统将内容再次嵌套，

8.通过使用 .col-md-push-后面 和 .col-md-pull- 前面类就可以很容易的改变列（column）的顺序。

9.变量生成预定义的栅格类

10.利用默认设置生成两列布局（列之间有间隔）的案例。

11. 文字语法

5.某些列可能会出现比别的列高的情况。为了克服这一问题，建议联合使用 .clearfix 和响应式工具类：

8.通过使用 .col-md-push-后面和 .col-md-pull- 前面类就可以很容易的改变列（column）的顺序。