首页 > 代码库 > BootStrap 学习笔记一
BootStrap 学习笔记一
BootStrap学习笔记一：
学习工具：BootStrap中文文档：http://v3.bootcss.com/css/#type-lists
1.HTML5文档类型
<!DOCTYPE html><html lang="zh-CN"> ...</html>2.为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。
<meta name="viewport" content="width=device-width, initial-scale=1">
3.两种容器
//.container 类用于固定宽度并支持响应式布局的容器。<div class="container"> ...</div>//.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。<div class="container-fluid"> ...</div>
注意：二者不能嵌套
4.栅格系统
Bootstrap 栅格系统的工作原理：
- “行（row）”必须包含在
.container（固定宽度）或.container-fluid（100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。 - 通过“行（row）”在水平方向创建一组“列（column）”。
- 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
- 类似
.row和.col-xs-4这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。 - 通过为“列（column）”设置
padding属性，从而创建列与列之间的间隔（gutter）。通过为.row元素设置负值margin从而抵消掉为.container元素设置的padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。 - The negative margin is why the examples below are outdented. It‘s so that content within grid columns is lined up with non-grid content.
- Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three
.col-xs-4. - 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
- Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any
.col-md-class to an element will not only affect its styling on medium devices but also on large devices if a.col-lg-class is not present.
//类前缀.col-xs- //超小屏幕 手机 (<768px).col-sm- //小屏幕 平板 (≥768px).col-md- //中等屏幕 桌面显示器 (≥992px).col-lg- //大屏幕 大桌面显示器 (≥1200px)//后可跟0,1,2、、12 如col-xs-4//上例子<div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div></div><div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div></div><div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div></div><div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div></div>
5.栅格中常用到几种class
1).clearfix visible-xs-block //清除div的浮动样式 2).col-*-offset-* //向右移动(增加间距) 如<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> 3).col-*-push-* //向后推动 可以实现与offset相同的效果 4).col-*-pull-* //向前拉 push和pull结合使用可以实现列排序 //例子 <div class="row"> <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> </div>
6.常见的几种内联样式
。<mark></mark> //标记。<small></small>//字体大小为父容器字体大小的85%。<del></del> //删除的文档。<s></s> //无用的文档，效果与del标签一样。<ins></ins>//插入的文档。<u></u>//下划线 效果与ins标签一样。<strong></strong>//着重。<em></em>// 斜体
7.常用的文本样式
//对齐。.text-left //左对齐。.text-center //中间对齐。.text-right //右对齐。.text-justify //会根据父容器的大小自动换行。.text-nowrap//不会自动换行//改变大小写。.text-lowercase//转成小写。.text-uppercase//转成大写。.text-capitalize//保持原状//缩略语<abbr title="attribute">attr</abbr>//样式：鼠标移上去会有？且attr上有颜色较淡的虚线下划线<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>//首字母缩略语//说明：html中的其他标签如p标签等都可以设置title属性，但样式效果不及BootStrap丰富<p title="p title">attr</p>//引用<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer></blockquote>//右对齐的引用<blockquote class="blockquote-reverse"> ...</blockquote>
个人学习，仅作记录！未完待续。。。。。。
BootStrap 学习笔记一
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。