lipsum, lorem生成假文, 是在编辑器中按tab键时生成的, 那个时候就已经生成了, 所以你在浏览器上看到的内容就是编辑器中的内容, 这个内容不会再变了. 所以你不要企图想刷新浏览器而改变假文的内容.
code标签, 使字体颜色变红, 略有底纹; pre标签被加上了灰色底纹和圆角边框.
关于表格的样式:
.table基本样式
.table-bordered, 加边框;
.table-striped [strai], 条纹, 隔行变色
.table-hover.
.table-condensed 紧缩, 高度小一点点 , 注意也有ed.
注意, 要加border, stripe 都要加ed. 这些附加样式 ,都要加 table这个基本样式.否则无效..
表格的颜色?
当然是指表格的行的 颜色, 有四种
tr.active,
tr.danger,
tr.warning,
tr.success.
表格 的颜色是针对表格的行, 应用 响应的类..
响应式表格是指, 将表格包裹在一个 div中, 给div以.table-reponsive类, 则表格在屏幕缩小时, 会出现水平滚动条.....
一个小插曲: 在editplus中, 不要像 vim中那样, 把"跳转到 匹配的括号处" 的键盘键设置为 %(也就是shift+5). 这将导致你输不进 百分号! 因为editplus不像 vim那样有 几个模式, vim中的%跳转括号匹配, 人家那是在normal模式下, 你editplus是没有normal模式的,只有插入模式!!
在bs西方世界中, 他们认为表单的文字标签lable是放在input控件上方的. 而不是左右排版的, 这样的话便于排版对齐;
bs把 一个label和对应的一个 控件放在一起, 作为一个 div.form-group.
label 中的for是对应控件的id, 不是name, 因为name可以有多个相同的, 而id是唯一的. for中的id不要加#, 只有在 css中 jquery中才需要加井号等选择器符号. 关于id, 如果简单起见, 就在类型或者名称的后面加上-id后缀就可以了, 如: name-> nameid, passwd->passid...
bs中的类, 它更多的是强调作为一种样式, 对你前面的标签是什么, 则不是规定的太死, 如btn, btn-danger, btn-success等 对于div, input标签都是可以生效的...
input控件的类主要有: .form-control和表示大小的 .input-lg类, input-lg类使得输入框的高度更高一些.
div.form-group中的input控件的边框颜色默认是灰色的, 要想使input控件的边框有颜色, 需要在外面的div.form-group上添加类 has-success, has-danger, has-warning等, 注意这里是has前缀, 不是 form前缀, 即不是form-success的颜色类.
bs中的复选框的实现是: 仍然是一个form-group, 然后是一个div.checkbox>, 包含一个label标签, 这个label标签整个把 input控件和标签文字 给包含了... 不再是原来的label和input方式.
关于控件的帮助说明文字, 是: 用段落p加上类help-block 即: 说明文字
textarea控件, 只需放入 form-group中, 加上form-control类就好了, 要去掉它默认的列宽, 因为默认要支持横向宽度的拉伸...
水平排列的radio和checkbox
有两种方法可以实现, 一是,直接对label标签加上radio/check-inline类, 但是要删除原来的div.checkbox, 即只需要 lable标签就好了, 不必在外面加form-gorup 和 .checkbox等类. 另一种是 还是使用原来的统一的样式: [统一的风格是: 一个 div.form-group, 然后里面是 div.checkbox(有的是form-control), 然后里面是input checkbox, 只是把 checkbox-inline(或者 radio-inline)样式加载div.checkbox或者 div.radio 上 感觉还是第一种, 只使用 label 加类样式的方法更简单 直接!!!.
bs和h5中新增了input类型type=email的控件, 而且原来的text控件的value属性, 也可以用 placeholder属性来表示 **form表单中的role属性是一种描述性质的属性, 其实你可以不写, 它主要是写给bs看的, bs会参考这个去布局. 其他还有很多这样的role属性描述 , 通常就是和标签的名称一致的, 如table role="table" **
注意, div.form-group表单组并不是 必须的, 不必像某些视频教程上讲的那样, 严格一致, 反而太教条了, 通常 只是: 输入组(input type=text 或者textarea的 需要输入内容的控件时, ) 类型的组件要求放在 form-group表单组中, 其他的, 如radio , checkbox等 都不要求放在 form-group中.
复选框的类型是checkbox, 而单选框(注意名字还是叫 "框"), 但其实它已经不是一个矩形框了, 所以 后面不能加box , 不是一个box了 类型就是 radio了, 不是"radiobox"
input输入框的 占位符 placeholder属性, 跟value是不一样的! 它是要配合底层bs自己写的js一起工作的, 当删除 后, 它的值是要恢复到占位符的内容 的.
对于 水平布局的表单: **单纯的lable标签, 的类样式有: control-label, 但是要调整 一行文字和 label标签对齐, 可以使用 p 标签 (最好是只用这个 p标签...)加上 form-ccontrol-staic类, 注意不是control-label-static 类 **
禁用表单的方法是, 在input中使用 disabled 简洁属性.
表单的尺寸, 就是 3个, 默认 就是 .input-md, 其他大小是: .input-lg .input-sm
可以做btn的元素, 原则是可以是任何元素, 但是作为有意义的 是这样几个:
button本身标签;
a超链接;
input控件中的type=button, submit, reset
btn的样式有:
同理 , 按钮也有 表示大小的类: .btn-lg .btn-sm, .btn-xs. 没有.btn-md, 也就是不写, 表示的是默认的按钮的大小!
同理的, 前缀...-inline表示 行级, 前缀-block表示 将行级元素转变成块级元素, 如: .btn-block将使按钮变成块级按钮,充满父元素
bootstrap的图片类:
样式图片 .img-rounded, .img-circle(自动切割成圆形) .img-thumbnail
响应式图片, 对于比较大的图片, 使用 .img-responsive, 此时, 图片将随着浏览器尺寸的大小而 变化...
bootstrap的工具类:
表示关闭的元素:
关闭的符号, 使用 ×
这是一个html转义字符, 其中的times 表示乘以, 倍数的意思, 这里的叉叉, 其实是 乘法的意思, 只是外形的表示方法了.
关闭符号的类是: close, 不是closed, 那个是表示"已经关闭了的", 很显然这里不能使用closed, 要使用 close. close类的作用, 并不是生成叉叉, 而是将叉叉符号 定位在块级元素框, 如well, 等的 右上角的适当位置.
当然, 关闭的符号也可以是你自己想写的任何东西, 如: 字母x , 大写的X, 还可以用style来 改变字体大小和颜色等...
向下的小箭头:
在辅助类中, 文字和背景颜色如同以前的所有组件一样, 也是有颜色的, 而且文字的 颜色也大致是: p.text-muted, .text-primary, .text-info, .text-danger 背景颜色: .bg-warning, .bg-primary等
bs的组件, 是指具有一定的css样式 , 同时, 配合自己写的js动作...
glyphicon图标是类, 而不是图片, 所以可以自己添加 style样式改变它的大小和颜色等等.
dropdown下拉菜单的使用 :(它是css样式和js的组合)
记住3个相关联的类就好了. (就是通过这些相关的类, 把几个部分结合在一起的:
只要把多个按钮放在 div.btn-group中就好了.
把多个按钮组放在 div.btn-toolbar 不用再是 .btn-group-toolbar, 是toolbar下面再包含 btn-group... 中就形成按钮工具栏了
要把按钮和 下拉菜单组合在一起, 方法是 把下拉菜单作为一个按钮组, 然后和其他按钮再一起放入另一个大的按钮组中. 注意, 这时的下拉菜单最外面的那个div.dropdown要改成 div.btn-group, 就不再是dreopdown了.
下拉菜单中的左右对齐是 说的: 下拉菜单的内容 ul部分 相对于上面的触发按钮的对齐方式, 对齐的类 pull-right 是放在 ul上面的 ul.dropdown-menu.pull-right
分裂式下拉菜单, 就是在原来的dropdown下拉菜单里面的触发按钮的前面再加上一个按钮就好了, 注意, 后面的触发按钮和ul不要单独再放一个div.btn-group中了! (后面的这个下拉菜单就不要使用文字内容了, 就只是包含一个caret就好了, 当然你也可以在下拉菜单上使用文字, 但是这样不好!)
就是前面一个form表单元素(如文字, radio/checkbox, 按钮), 后面加上一个输入框, 前面的表单元素对后面的输入框作一个附加 功能
基本骨架就是:
div.input-group
-说明/附加等功能的 元素: span, 对文字, radio和checkbox是input-group-addon类, 对其余的, 如按钮, 下拉菜单等是 input-group-btn (是btn, 不是button!) 类
span里面是包含的具体内容, 如文字, radio等元素...
-input 控件: input type="text" class="form-control" placeholder="username"
有多种导航方式:
第一种: 使用ul和li的方式:
类的关键词是navbar, 或者: navbar-....
默认的导航格式: navbar navbar-default (还有反色的 navbar-inverse)
导航条的位置固定(漂浮格式): navbar navbar-fixed-top/navbar-fixed-bottom, 这时要把body (注意是body标签, 不是 .body类)的padding-top: 50px; 以便把下面的内容给挤下去, 留出来, 免得内容被导航条所遮盖.
导航条的骨架:
div.navbar .navbar-default
//头部div,类是navbar-header, 注意bs中 ,有时的组件的头部用的是head, 有的是header, 这里是header
div.navbar-header
// 右边的条形按钮
button.navbar-toggle data-toggle="collapse" data-target="#navbar1" (注意这里是button, 不是div)
span.icon-bar // 注意这里是 icon-bar, bar就是横条的意思.
span.icon-bar
// 导航header 部分的brand, 类是navbar-brand
a.navbar-brand ....首页
//导航内容div, 类是.collapse, navbar-collapse
div.collapse .navbar-collapse // 注意这里的collapse和navbar-collapse类是放在div上的, 不是放在 ul上的
ul.nav .navbar-nav
li > a..... (除首页之外的其他链接)
li > a.....
li > a.....
1.可以单独地去设置这些元素在导航条中的位置, 设置 位置类包括:navbar-left, .navbar-right, 这两个位置类是 pull-right, pull-left的mixin版本, 元素之间的距离和位置, 同样的可以通过style padding和margin等调整...
p.navbar-text
,, 还是要使用 pull-right, 它跟navbar-right, 还是有细微的差别的.navbar-right可能导致文字不能完整显示...ol(或者是ul), 加上类 .breadcrumb, 其他的li>a...
通常最后一个 li中 就不要包含 a链接了 , 因为当前页面是不需要 进行链接跳转 的,
只是在当前的面包屑项目 所在的 li中, 加上 active类 就好了
区别quot和ldquo的不同:
"是 英文中的
双引号, 单引号是 single-quote;‘ ’ “ ”
这些所谓的 左右单引号, 左/右双引号 都是针对中文的单双引号的. 其中的l表示left, r=right, s=single, d=double , 那么重点是quo, 表示quote引号的意思.
同理, 这里的quo也是 引号的意思, a=arrow, 箭头, 因此, aquo 就是表示, 箭头形式的引号, 即中文中的书名号: 所以 &l-aquo; &r-aquo;
就是左右书名号....
采用ul>li>a结构, 在ul上使用 pagination类, 然后, 一定要砸li下包含a, 不能直接使用li下的文字内容.... , 左右箭头 使用 : « he »
只是翻页的结构:
ul.pager >li>a... "上一页""下一页"
包含向前向后的 两端对齐分页:
ul.pager > li.previous + li.next 类
标签就是放在文字内容的后面, 给一个说明, 注释的作用 的东西:
使用 a 标签的意义, 很多时候, 不一定真的是 为了 超链接, 很可能的目的, 是 为了 得到 单击链接的 样式的 效果.
缩略图组件中的定制内容, 就是将 原来thumbnail的类放在a链接标签上, 改为 放在一个div上, 即: div.thumbnail 这样就可以形成一个大的缩略图样子了
骨架:
div.thumbnail
img... // 上面的图片内容....
div.caption // 下面的文字内容....
h3....
p...
p>button...
在弹出某些操作后的提示:警告信息时, 可以使用这个警告框
警告框的类是: div.alert> p标签内容.., 颜色类: div.alert .alert-success/info/warning/danger...
可以关闭的警告框是 在 div包含中,放一个button, 注意这里的类就不能是btn, btn-primary等, 而是 .close, 属性data-dismiss="alert".
总共在最外面使用的类, 是: div.progress
里面才是表示进度条的 类: div.progress-bar
还有其他相关的类, 进行样式的设置, 要注意这些类是放在哪个div上的, 是放在div.progress 上, 还是放在 div.progress-bar上.
带条纹的进度条, 放在最外层的 div.progress .progress-striped
激活的进度条, 放在最外层的 div.progress .active
进度条的颜色, 放在 里面的那个div上: div.progress-bar .progress-bar-success/info/warning/danger, 默认的进度条是蓝色等.
进度条可以堆叠, 只要把多个div.progress-bar 放在同一个 div.progress 里面 就可以了.
a 是anchor锚, 顶梁柱, 精神支柱的意思. a 是缩写.
## a中的href如果用 # 的话, 就表示使用页面锚点的意思.在html, css , jquery中, # 都是表示 元素的 id. 因此, 要使用锚点, 除了在 a 的href 属性中使用 #表示锚点外, 锚点的定义, 有两种方法:
1.一是, 使用w3C的规范, 使用 id来限制一个元素, 那么这个元素就 定义为一个锚点了.
引用锚点的方法 ,都是一样的 , 是 href="#锚点名称", 或者页面外地锚点: a href="other.html/#anchor-name"
z-index为负值的时候,ff下该层就被置于默认的不可见的z-index:0的层之后,就相当于一个按钮上面隔了一层玻璃,这样你当然按不到它了,一般z-index不要用负值,用不同大小的正值来取代
media包含一个图片和一个div的文字内容 , 图片放在 a链接中, div内容的类是.media-body , 包括一个 .media-heading的标题, 和 p文字内容.
骨架是:
div.media
a.meida-left.media-top/middle/bottom(表示图片和文字的对齐位置) > img 图片
div.media-body
h3.media-heading
p
媒体的嵌套, 使用场合, 是在, 一个回复/评论的后面, 又跟着多个评论/回复, 这个时候就需要多个media的嵌套了. 一种方法是: 可以使用 ul.media-list >li 的方式,
第二种方法是: 也可以直接在div.media中嵌套 div.media 建议使用 这种方式, 比较清楚简洁.