bootstrap 2
做bootstrap就是在背里面的类.
栅格系统的列偏移类: md-col-offset-4...
文本对齐,块级元素的对齐, 不是 另外再 通过 style样式来实现, 而是直接在 原来的元素上 应用一个 "对齐方式的类"就好了:
文本对齐的类： text-left, text-right, text-center; 不是: text-align: left, center等方式了.
块及元素的对齐类: pull-left, pull-right, center-block;
在bs中, h1到h6不仅只是标签, 而且还是一种标题样式的类, 可以对span应用.h1 ~ .h6的类.
要设置副标题的样式, 需使用small 标签或 .small类. 但是要注意,把small标签或类放在h1内部. 这时, 小文字的副标题跟h1 的文字是在同一行中, 而且字体不是太小, 字体颜色也是浅灰色; 但是, 如果放在h1 的外面, 这时, h1由于是块及元素, 所以 small的元素会被排斥到下一行! 而且字体要比h1小得多, 不能认为后面的内容是副标题了.
bs默认给整个文档的设置是: 字体大小font-size: 14px; 行高是20px, 即1.428, 而p还有 10px的下边距. 但是body 是没有上下左右边距的, 其他属性值也是都为0.
如果没有bootstrap, 文档及body的外边距是多少?
firefox显示 的盒子模型仅仅只是针对 标签, 如p, div, span等, 如果只是文字, 没有标签是不会显示盒子模型的.
对于html标签, 它是充满整个页面的, 所有style属性都等于0
对于body标签: 它有外边距, 上下左右都是8px的外边距. 其余style属性等于0;
对于p标签, 它有上下外边距为 16px, 企业style属性等于0
在布局页面的时候, 通常是标题hx 和内容 p,放在一起, 使用hx 和p 标签形成逻辑上的组合. 要使标题更好看, 要在标题和内容之间生成一条小细线, 可以添加: class="page-header" 类.
段落突出显示,强调, 使用 p class="lead"类.
通常文字的样式都用在 p标签上!
文字的颜色类, 带有js 的鼠标样式滑动样式.... 使用的单词类别跟后面的 按钮/面板等的颜色都 基本相同 , 思想一致:
p class="text-muted 柔和的...", text-primary, text-success, text-info, text-warning, text-danger....
strong和b标签的样式差不多, 但是 strong有 "着重, 强调"的语义, 而b标签没有.
abbr缩略语, 是abbr标签, 注意是标签, 如果没有title属性, 是看不出来什么效果的.必须要加上title属性, 才能显示下划虚线, 而且有鼠标悬停效果...
ul和li是重点: 要注意到是, 要注意区分这些类通常都是放在(作用于)ul上的, 而不是li上的, 只有少数几个类是放在li上的!
- 很多前端功能都是通过
ul>li来实现的, 这里,只需要对ul和li应用 各种不同的, 对应的样式类就可以达到各种各样的功能了!!! - ul class="list-unstyled": 取消list样式和 缩进padding.
- ul class="list-inline" : 取消list的块特性, 变成内联元素, 也就是, 将li由 竖向垂直方向变成 水平方向.
自定义列表的结构:
dl (defined list) 这里的dl就相当于ul/ol一样....
dt (defined title)
dd (defined data)
dt
dd
dt ...
dd...
默认的dl中的dt和dd是上下两行的样式. 如果在 dl上使用 class="dl-horizontal",则dt和dd将会在同一 行上!
要清除浮动, 只要使用 div class="clearfix" 类就好了
tiding: 潮汐, 涨潮; 消息. good tidings:好消息，
The good tidings filled national people with joys.
Good tidings you bring wherever you are. 无论你在哪里, 都祝你一切顺利.
you big disgrace,
dropdown右边的图标, 是chevron 而不是caret, 这个跟jqueryui & easyui略有区别. 后者的> < 等符号是caret.
bs所有的图标样式都是一样的: 大小是14*14px, position: relative, top=1px, 都是相对定位, 距离原来的顶部都是1px.
span图标和其前后的内容, 通常来说, 隔一个空格px的距离, 但是你不隔也是可以的, 只是在外观上可能不好看.
对于bootstrap来说, 如果不想使用bs来表现元素的外观, 可以很方便地将 link href="bs/css/bootstrap.min.css这一行给注释了. 就屏蔽了bs, 而是用原生的html代码.
bootstrap的类 的层次
bs的类 通常使用在同一个元素上时, 需要多个类, 而且相互间的前面部分都是相同的, 这样的设计是为了 类在设计上 保持层次性.
bs的类在设计上是不重叠的. 通常后面的类是对前面的类的补充. 他们规定的样式 内容不是一样的. 前面的类叫做 "基类", 后面的类叫做 "补充类" "特征类"
基类, 就相当于元素样式的骨架, 它规定最基本的, 最通用的, 都具有的那部分样式; 而特征类是规定独有的特有的那部分样式. 所以 在使用 某个具有特征 的元素时, 要同时指定 基类 和特征类, 而且通常是先写基类, 然后写特征类.
这个就如同汽车一样, 四个轮子, 一个方向盘 , 两排沙发, 这个是基类, 是骨架, 任何汽车都起码具备的东西, 是基本配置, 是标配, 都有点的东西, 但是, 你还可以加钱 选装更高的配置, 如天窗, 电子手刹, abs, esp, 虚拟路况等, 这些就是 特征类..
bs元素和元素之间的间距, 叫做 gutter ['g^t2], 通常是由外边距margin引起的, 实现的.
flat的意思? 不是fat的.
flat可以做 名词, 形容词, 动词, 副词等. 基本意思是: 平的, 扁平的; 单调的, 沉闷的; 没有气的, 走了气的, 干脆地, 公寓等等意思. **使用得较多的是 平的/扁平的; 公寓"这几个意思:
adj:
平的， 扁平的，平坦的, 同义词, smooth, 反义词： ｒｏｕｇｈ，sharp , uneven.
单调的, 沉闷的
不景气的, 生意清淡的;
偏低的;
走了气的, 不新鲜的, 如: the bike tire is flat.
电用完了的,
憋了的,
扁平的,
枯燥无趣的, 断然的, 干脆的, 直接了当的...
名词:
一套套房, 公寓
(物体的)扁平部分
平地, 低洼地.
憋了气的轮胎等.
fall flat:完全失败， flat out: 尽可能快, 尽最大努力, ...
In my third year I letf home and went flatting with David. go flatting (离家租公寓住).
扁平化设计和 拟物化设计.
在视觉设计/台式机和手机设计风格上的 两种手法:
拟物化设计: skeuomorphic: 主要是苹果公司的 在设计时尽量表现物体的表面细节,包括颜色, 纹理,光影等细节的倾向.这个用户使用视觉效果好, 逼真, 但是设计较复杂, 而且比较耗电.
扁平化设计 flat design. 就是在设计os系统和web页面的时候, 元素的外观尽量简洁, 主要以文字, 线条, 抽象性的表达设计意思. 也就是"简洁化"设计. 好处是简约, 省电, 适应性更好, 可以尽量多的满足多种不同 尺寸的屏幕..
htm5 的自定义属性?
使用自定义属性时, 通常要用data-开头, 做前缀, 如: <element data-attr="someattr" ...> lorem </element>
而更多的时候, htm5还扩展了 一些 元素的属性, 如 普遍增加的 role属性. role属性, 更多的是起到 "语义化"的 作用, **主要是给一些前端工具使用的, **告诉一些web的工具 如(bootstrap bs前端框架), 这个元素是用来做什么的, 比如用div来作按钮时, 就要用 role 属性告诉 bootstrap...
掌握strip, stripe, strap的区别
**主要还是通过一些 "习惯用语" 来掌握他们的区别 **
-
strip: [strip], i发[i]音, 可以做 "条, 带"讲, 名词讲时, 主要是指 某个条形的地域 , 水域, 如＂加沙地带", "英吉利海峡", Jiasha strip, Yinjili strip...; 作动词讲, 是"脱衣服, 剥夺"的意思, 也可引申为 "鞭打"的意思.
-
stripe [straip], i发ai音, 意思是条纹, 主要是指 "视觉"" 图案"上的条纹, 如: 斑马身上的条纹, 过马路上的条纹, 衣服上的条纹
-
strap 通常的是 指 生活中,比较长的, 带状的东西, 如皮带, 鞋带, 背带等, 引申为动词 "捆绑, 束缚".
