Bootstrap笔记

1.设置为HTML5 文档类型:


<html lang="zh-CN">
  ...
html>

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

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

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

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

"container" width=“具体宽度”> ...
"container-fluid">/*宽度100%*/ ...
手机 (<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-3div>
    
    <div class="clearfix visible-xs-block">div>
    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3div>
div>

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

<div class="row">
    <div class="col-md-4">.col-md-4div>
    <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4div> 
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-6div>
          <div class="col-xs-4 col-sm-6">Level 2: .col-xs-4 .col-sm-6div>
        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);
}
"wrapper">
"content-main">...
"content-secondary">...

11. 文字语法

段落突出显示 .lead 

 删除线 没用的文本使用 

下划线  ,额外插入的文本使用  标签

斜体  粗体 

文本对齐.text-left/center/right

不换行   .text-nowrap

大小写 .text-uppercase/lowercase

首字母大写.text-capitalize

基本缩略语attr /*鼠标停在abbr时,出现提示attribute,class是让attr字体变小*/

内联列表横向排列ul .list-inline

你可能感兴趣的:(笔记本)