一点bootstrap笔记

突然发现忘了好多……很少用,都是自己定制着去做的。直接看的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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容