美文网首页我爱编程
一点bootstrap笔记

一点bootstrap笔记

作者: HIOOOOIH | 来源:发表于2016-10-19 19:58 被阅读0次

突然发现忘了好多……很少用,都是自己定制着去做的。直接看的3.0的版本。

栅格系统

手机 平板 桌面显示器 桌面显示器
屏幕大小 <768px ≥768px ≥992px ≥1200px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
.container 最大宽度 None (自动) 750px 970px 1170px
最大列(column)宽 自动 ~62px ~81px ~97px

栅格系统行为:总是水平排列,开始是堆叠在一起的,当大于这些阈值时将变为水平排列C(?
槽(gutter)宽
30px (每列左右均有 15px)

  • 最外围的盒子如果是container,必须有宽度;如果是container-fluid,盒子宽度100%,不需要设置宽度。
  • 多余的列(column)将另起一行排列
  • 手机版一定要用col-xs-,不然一切乱套
  • 嵌套的块也是12个格,比如一个col-md-8的格子,里面再嵌套也是12个放满
  • 两个特殊的:
    col-md-offset-3 左边空出3个格
    col-md-pull/push 排序 1个格是8.33333333%

默认设置

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

  • 通过添加 .lead类可以让段落突出显示。
  • 高亮使用<mark></mark>
  • 删除用<del></del>(原来不就这样嘛)
  • 插入用<ins></ins>(带下横线)
  • 下划线<u></u>
  • 对齐:text-left/center/right/justify/nowrap
    justify两端对齐
    nowrap不换行


    justify效果
  • 英文专用
    text-lowercase/uppercase/capitalize(首字母大写)
    为缩略语添加 .initialism类,可以让 font-size 变得稍微小些。
  • 缩略语
    <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
    悬停在attr上出attribute

相关文章

  • Bootstrap学习资源

    bootstrap笔记总结 Bootstrap入门笔记之(三)栅格系统 我的Bootstrap笔记,常用类名知...

  • 一点bootstrap笔记

    突然发现忘了好多……很少用,都是自己定制着去做的。直接看的3.0的版本。 栅格系统 栅格系统行为:总是水平排列,开...

  • 『黑马程序员济南』JavaEE就业笔记串讲—BootStrap

    『黑马程序员济南』JavaEE就业笔记串讲—BootStrap BootStrap的概述 Ø什么是BootStra...

  • bootstrap学习笔记(待更新)

    之前学了一点bootstrap框架的基本知识,学习之余做了一点笔记,以防忘记~ 1)加载顺序1. 加载Bootst...

  • 快速掌握-bootstrap

    笔记-bootstrap 是什么 bootstrap 前端开发框架,可以快速的搭建 web 页面。 框架分为响应式...

  • Bootstrap Table笔记——1

    摘要:Bootstrap Table笔记。参考笔记:http://www.cnblogs.com/landeanf...

  • bootstrap笔记

    1、图片自适应 加类名 ;img-responsive; 2、按钮自适应 加类名:btn-block; 3、boo...

  • bootstrap笔记

    CSS全局样式 概览 移动设备优先 布局容器 1、container类用于固定宽度并支持响应式布局的容器 2、co...

  • Bootstrap笔记

    开关按钮 事件 手动设置状态$('#advanced-settings-switch').bootstrapSwi...

  • bootstrap笔记

    官方文档中文文档 笔记版本为BS3 ,这是BS2重写后的版本,不在支持IE6;BS4目前还是测试版本 BS3的js...

网友评论

    本文标题:一点bootstrap笔记

    本文链接:https://www.haomeiwen.com/subject/ggzayttx.html