bootstrap1

让bootstarp3 支持ie的兼容模式:

支持浏览器的响应式布局: 是指网页既可以用在pc上,也可以用在手机上, 而且不需要修改源文件.

bootstrap包括:
css文件, 只需要加载: css/bootstrap.min.css
js文件, 只需要加载: js/bootstrap.min.js
fonts文件(夹), 要放在网站的根目录下.

less 和sass:
less(解析器)是基于javascript的, 所以主要是用在客户端. sass是基于ruby的, 主要是用在服务器端.
可以将less编译后的东西拷贝压缩到一个css中. 也可以使用直接将*.less文件压缩.
less的写法是: 必须先引入less的样式文件: <link rel="stylesheet/less" type="text/css href="test.less" /> 然后引入less的js文件: <script type="text/javascript" src="less.js" > </script>

less 支持四则运算, 对数值型的变量(如颜色值), 不只是支持乘法, 还支持加减乘除: @dark : @init + # 123; @light: @init - #123;

less 是在css基础之上, 赋予css动态化编程特性.
混入( 包括 '参数混入'), 类似于类中使用类(这里的类就相当于一个函数), 这样就可以使在多个地方要使用 部分的相同样式, 可以把 这些 "部分的相同样式"提取出来, 做成混入. 就避免了多个地方, 使用重复代码

**less中 最强大的功能是: 可以使用 在less中使用javascript的表达式及函数. 使用 单 反引号赋值, 如: @height: 反引号 document.body.clientHeight 反引号 **

手写css是比较冗余度大的, 使用less可以解决冗余度的问题的.
less是css预处理器的, 还有一些是css的 后处理器的. **less.js在浏览器端使用是比较方便的, 但是为了性能和可靠性, 最好是用node.js的安装包工具npm install less 安装后, 使用lessc 编译成css文件后使用. lessc -x test.less > test.css

如果有多个less 文件需要加载, 由于lessc是单独编译的, 所以less中的类是不能跨文件使用的.

**不管是对于css还是js, 他们的类型type都是: text/??? **

即使不使用bootstrap, 只是使用less, 对css的书写也是非常好的, 非常便利的

less的语法:

  1. 可以使用变量,(变量用@开头, 连线用横线, 不用下划线(想一想css的border-color样式等等就知道了), 字母和数字, 支持 mixin(混入, 包括参数混入, 而且参数支持默认值, 如 .foo(@x: 0px, @y: 0px)... (实际上就是函数的方式, 支持 使用 @arguments 来引用所用参数))--便于多个地方使用相同"部分样式"的代码重用; 变量的赋值用冒号.
带参数的混入时, 参数的值, 要由 "编译后生成的代码来考虑一致性", 并不是, 真的像函数那样考虑字符串 一样的传参.//
.bdr (@colr: red){  // 比如这里就不能写 @color: "red", 加上引号后, 编译的内容也变成引号了, 就错了, 不会生效.
border: 1px dotted @colr; 
}

  1. 声明css的编码语句是 @charset 'utf-8';, 这里语句的末尾 一定要加一个分号!, 否则汇报错.

  2. @import 的用法是指, 在一个 css文件中, 去引入另一个css文件的时候使用, 并不是指在html文件中,去通过 @import 来引入css文件! 另外@import的时候, 后面可以加 url(), 也可以不加url()

  3. less的命名空间, 就是嵌套, 只是嵌套通常是对与存在的选择器直接使用, 而命名空间通常是自定义一个并不存在的选择器, 然后另外去指定使用.

  4. less的嵌套规则的写法, 和html的dom的结构是相对应的, 这样使得在写css的时候,即避免了大量冗余的代码, 使代码更简洁, 而且更好读. 伪类的嵌套, 只是在 a/或其他元素中, 加上&:就可以了. 如果不加上 &:, 就被认为是嵌套的子元素.

  5. 对于数字性的变量, 如颜色值, paddign, margin, border等, 支持四则运输(加键乘除), 和less内置的颜色函数和数学函数(如: ` lighten(@initcolor, 10%), darken, saturate, desaturate,pin等颜色函数和round, ceil, floor等数学函数), 通过函数的使用, 可以很灵活地操纵各个元素之间的颜色等属性值之间的内在关联!!

  6. less还支持 在css中使用javascript代码, 使用的方式是 将 js代码放在 反引号中, 然后进行赋值...

  7. less还支持字符串插值, 类似如thinkphp中的变量使用: @{varName}... 要注意的是, 插值 不等于字符串的拼接! 使用字符串插值时, 只取它的值, 引号会去掉: 步骤是: 首先定义带引号形式的css变量, 然后, 在字符串中再 引用 该变量 如 @var: "some/img/path/to"; backgroun-image: url("@{var}/foo.jpg"); 凡是需要使用url的地方, url本身不需要带引号, 里面的内容才需要加 引号!! 选择符中也可以使用 变量插值@{varname}的方式.

bootstrap:ＢＳ就是使用less的, 对less做了再一次的封装, 通过css来实现效果的. 而轻量级jqueryui和重量级easyui主要是通过js来实现的. BS 要使用 语义上的类名来绑定方法和事件, 因此, 它的类名等就不能乱写了???

备注：请在服务器环境下使用！本地直接打开可能会报错

less的官网是: lesscss.org, 而bootstrap的官网是 www.bootcss.com/ BS的中文参考网站是: bootstrap中文网.

现在使用的 主要的 bs的版本是 v3: v3.bootcss.com: 比较有影响力的版本是v2.3.2, 和现在的v3.3.0(下载的就是这个), 需要jquery-1.11.1.min.js以上的版本. 如果下载源码, 有less和说明文档,但是需要lessc编译和配置, 直接下载编译好了的版本就好了.

注意, bootstrap的link的css包含, 不能使用 rel="stylesheet/less", 还是要使用 rel="stylesheet", 前者是在 less中使用的时候包含的样式表.

常用的js插件需要: jquery.min.js, bootstrap.min.js, hoder.min.js, application.js

bootstrap中的类, 就像现实生活中的各个角色的人一样, 当使用某个类的时候, 就会自动关联到 bs中的某个类的样式, 及其绑定的js事件. 如同jqueryui一样, 你就要记住有哪些类, 而且要实现某个功能, 需要使用什么类, 类的css行为样式是怎样的. 如 .container{类样式, 就默认设置的是: 970px的宽度, 居中 里面的内容有 15px的 padding....}

bootstrap中的布局, 基本上都是通过div 的类来布局的, 没有特殊说明,都是 div的 class类.
.container = 970px; .row 表示一行; .col-md-{num}: 表示 将970px默认分成12个块, col-md-Num = 多少个块(1个块就表示1个column), md表示medium中等大小的块, xs表示x-small小块, num表示一个div里面包含几个 块. 所以 <div class=" col-md-3" > 表示这个块的宽度是 3个中等块的宽度....

但是要注意的是 , 并不是所有 的div都是自成一行的, 不是都要换行的. 比如这里 凡是以 col-开始的类 div 则都是采用 float的方式 来实现 同一行排列的...布局的...

当容器的宽度小于内容的时候, 内容会发生堆叠, 布局被破坏, 但是内容会保留! 不管什么网站, 即使是淘宝/谷歌等的网页, 同样会发生堆叠. 这个其实可以不用管, 不用考虑的 . 因为没有人会把浏览器弄得那么小来看内容的.

bootstrap的中文文档, 在 www.bootcss.com中, 主要是css, js , 插件和自定义 等 几个内容.

作为一种页面布局的常识: 先是用 hx标题显示中心思想关键词, 然后下面是p段落的内容

fluid流体的, .container是古代宽度像素的div容器, 要适用 移动手机设备需使用 .container-fluid 类...

列的类样式, 有四种: 根据屏幕大小: 超小的: col-xs, 小的平板 col-sm; 中等屏幕的 col-md, 大屏幕的 col-lg-

glyph: ['glif], n. 石雕, 象形文字, 符号等: Glyphicons: 象形符号图标.

gutter [g^t2], n/v, 沟槽, 排水沟, 阴沟, 贫民窟, 垃圾的人. end in the gutter; walk straight into the gutter. 间隔/间隙...

holder.js 是什么? 参考页面: http://docs.mydaima.com/holder/

holder.js是 自动生成 图像站位符 的插件, 使用方法是 <img src="holder.js/300x300" >, 注意这里的300和300之间是乘以 符号, 是 字母xyz的x字母, 不是星号!
holder.js支持很多的样式, 所有的样式都采用 get传参的 方式进行设置. 多个参数之间使用 & 符号进行连接.
样式名称包括:

  1. 颜色 theme主题颜色; random=yes设置随机颜色; bg, fg; 可以采用rgb, rgba(...)的方式, 当然支持直接赋值的方式, 如 &bg= 112345 , 注意颜色不支持缩写, 必须写完, 而且颜色值, 不必带#号.

  2. 对齐,align,

  3. 文本, 使用 text, 文本支持 \n 方式的换行; 但是这种换行, 只能限于文本是英文的情况, 如果是中文, 则不支持换行!

  4. 如果写上了 text, 则不再显示 尺寸, 如200x200, 而是只显示 文本....

  5. 文本边距: linewrap.

** 所有的 holder.js/300x200?......里面的内容, 都不加引号, 只是在 src 的后面或 data-src 的后面加双引号即可! **

**关于 rgba? 就是 在rgb的基础上, 额外添加一个 alpha的 通道参数, alpha通道表示色彩的透明度. ** 取值范围: rgb: 0-255, 0%-100%, 而a的范围总是0-1.

application.js?

现在的jquery的版本都已经到 2015时候的 v2.1.4 了, 所以 不必要 去追版本的!

经常的疑惑? 修改了 /etc/vimrc 或 ~/.vimrc后, 总是要退出vim然后重启才能生效, 这样很老火的! 那么在不退出vim的情况下 ,如何重新加载配置文件vimrc?

可以在 vim下, 使用 source命令: source就相当于 windows下的 execute命令, 即执行某个shell脚本/shell命令.
使用 source /etc/vimrc 等类似命令就可以了.

参考: http://www.bestofvim.com/tip/auto-reload-your-vimrc/
但是好像 只能用 source $MYVIMRC, 即只能对 用户自己的vim配置文件生效, 使用 echo $MYVIMRC, 看当前的vimrc是指的哪个文件, 通常依次是: ~/.vimrc, ~/.vim/vimrc 并不能让 /etc/vimrc下的文件修改后马上生效??? 所以今后就注意了, 尽量把自定义的配置文件写在 MYVIMRC中, 而不要写在 /etc/vimrc中.

移动n个字符: n+space. 向下移动n行: n+enter, 当然没有nj块.
忽略了的命令: H, M, L 都是到该 屏幕的最上/剧中/最下的以行的第一个字符.

/etc/vimrc是整体的配置文件, 通常不要修改, 用户自己 的配置文件最好是放在 家目录的 ~/.vimrc中.

.swp文件不会自动删除, 一定要用手动删除. R: 表示打开成只读文件, E 编辑但不会载入swp的内容, 而R(ecovery)则会载入swp的内容.

:edit的时候, 要想作其他操作:

  1. 不想保留当前的文件, 想要强制打开另外一个文件进行编辑, 使用 :edit! new.txt, 注意edit和! 之间不能有空格, 否则会把! 当成是文件名而报错.
  2. 既想不放弃当前文件的保存, 又想打开另外一个文件, 使用 : hide edit new.txt

vim另存文件: w another.file只是另存为一个新文件, 但是编辑的还是老文件. 要像windows那样, 另存时编辑另存的文件, 使用 :saveas another.file.

查看 / 查找vim的配置文件和脚本位置, 可以 在vim编辑器下, 使用两个命令: :scriptnames (可以看到有: /etc/vimrc, ~/.vimrc, ~/.vim/vimrc 等) 还有 :version 命令

在vim中可以查看一些变量, 如: echo $VIM, 表示vim的安装路径, 在linux下是/usr/share/vim/目录, $MYVIMRC则是用户的自定义配置文件, 通常是 ~/.vimrc 但是好像没有原生的 $VIMRC变量, 环境变量都是大写的.

noob [nu:b] 菜鸟, 新手, 小白, runoob: run noob, 奔跑吧, 菜鸟 . wwww.runoob.com是 在线学习网站. 很好的.

bootstrap中的按钮, 最好是写完整: <button type="button" class="btn btn-whattype/success, warning, danger, default" > btn显示文本</button> 当然你用简写好像也可以: <button class="btn-danger"> 危险 </button>
还可以规定按钮的大小, 一般的就不用写, 大的(文字和padding比较大的)btn-lg(=large), btn-sm, btn-xs, 块级按钮会横跨 占满父容器: btn-block, 表示状态的active类, 和 表示禁用按钮, 即可以用类.disabled, 也可以用属性disabled="disabled"属性.

可以用 echo has('autocmd') 来判断是否有autocmd功能, 其中, has是一个测试函数. 如果有autocmd功能, 返回1, 否则返回0

augroup reload_vimrc " {
    autocmd!
    autocmd BufWritePost $MYVIMRC source $MYVIMRC
augroup END " }

其中, augroup: auto-group表示自动命令组. reload_vimrc: 命令组的名字, 
    autocmd! 表示清楚之前的autocmd命令.
"{,  是注释, vim的脚本, 支持单行/ 整行注释, 也支持 一行的行尾注释
augroup END中的END 要大写, 这是很敏感的大小写.

**如何使用命令行命令, 来快速地禁用或启用 有线或无线网卡? **
启用/禁用 有线或无线网卡的命令和方法是一样的. 使用命令比用鼠标要快的多, 而且要方便得多!!!
首先在fedora24的 sysconfig/network-scripts/中, 查看有哪些 ifcfg-???? 接口. 然后 用 ifup 或 ifdown 后面跟 这些存在的 接口名称就可以了, 不要在 接口前面加 ifcfg了. 如 接口配置文件是: ifcfg-foowifi, 则, ifup/ifdown foowifi 就可以了

通常来说, 对 html5和css3支持校差的, 甚至不能支持的是, ie的6,7,8 的版本, 从ie9 开始基本上就 跟ff , chrome一样兼容支持得较好了.

栅格系统的屏幕大小?
屏幕的大小, 并不是按你屏幕的物理尺寸来衡量的, 而是按屏幕 的分辨率来 看的. 比如你笔记本, 屏幕可能只有 14 inch, 算是比较小的屏幕, 但是你可以把他的分辨率设置为 1366, 这时候, bootstrap就会认为是 大于1200px的分辨率, 是大屏, 宽屏了. 从而为栅格容器设置为1170px来排列栅格.

如何看firefox的盒模型?

  1. 在下面的盒模型中, 看页面中显示的对象 周围的颜色, 和 下面盒子上对应的颜色, 相同, 表示就是 那个对应的属性! 比如盒子模型上的 "填充" 的表示颜色是紫色, 因此, 上面的对象中的 紫色部分就表示是 该元素的padding 填充. 其余的类似 .

  2. 还要注意, 要表示盒子模型的某个属性, 必然的要用一个 "四边的 矩形环" 来表示, 否则, 你的属性名称和该属性的值 , 你就没有办法写, 没有地方来写.

  3. 注意看图中的虚线, 虚线是表示这个对象本身所占的区域, 即除了外边距, 边框,和填充后 , 除了所有的附属的东西外, 这个元素所占的范围和空间.

如何计算栅格系统中 各个列的宽度. 和 每一列中, 图片的宽度?

其实要掌握栅格系统的设计原理 参考: https://segmentfault.com/a/1190000000743553 , 后, 就知道, 你可以精确地计算出每列中的 实际内容 所占的宽度的! 因为, 每一列(不管你怎么写, 只要是按照栅格的规则写的, 都是这样: 每一列 的 padding都是 15px, 因此, 最左边和最右边的 两列跟容器的padding都是 15px, 而中间的 列之间的 沟槽gutter就都是 30px = 15px+ 15px = 152px, 2=even 表示偶数, 即 2倍). 而对于1 行中有n个列的情况来说, 中间的gutter共有 n-1 个, 总间距就是 (n-1)30px, 再加上最左和最右边的内边距, 于是, 在一个容器的一行中, 列里面的实际内容所占的宽度 就是:　
(containerWidth - n*30) /n 单位px.

另外, 其实你不用去关心真正的1列里面所占的宽度, 因为 一列的宽度, 跟里面所包含的内容的多少都是没有关系的. 如每一列的宽度是320px, 即使你一列里面只有1跟字符, 这一列的宽度还是那么多, 320px不会缩小的 . 所以, 只要你把列里面的内容 样式指定为 text-align: center; 不要让内容从最左边开始排列就可以了.....如果是图片的话, 你也用不着把图片全部撑满 这列....

栅格的嵌套

可以直接在 col中嵌套row. 用不着再写一个container的类. 因为column和container都正好都有 15px的 (内)填充. 所以 这时候, col就相当于一个 container.

这正是栅格设计精妙的地方.

container有15px的填充. 而row刚好有 -15px的外边距, 于是 row和container就 "中和"了."抵消"了.

posted @ 2017-01-04 11:16  noitanym  阅读(299)  评论(0)  编辑  收藏  举报