bootstrap 问题

 

less; sass: css预处理:可以直接使用.css,也可以修改.less,生成定制化的css

CDN: 服务,使用这个效果会更好。theme一般不引入,jquery一般在js之前引入。

使用bower管理less,css,js,字体。

bootstrap可以单独引入某个js

如果自己编译less,使用自带的gruntfile会更好。

JavaScript Source Map 详解:http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html

grunt命令:grunt dist,重新生成dist文件,其他命令都不常用。

已安装好;
其他的命令,深入研究时才用。

bootlint:只有对bootstrap的页面有用,有一定的局限性。自己学习bootstrap时,可以使用它

javascript:(function(){var s=document.createElement("script");s.onload=function(){bootlint.showLintReportForCurrentDocument([]);};s.src="https://maxcdn.bootstrapcdn.com/bootlint/latest/bootlint.min.js";document.body.appendChild(s)})();

 

全局css

移动设备上,可以通过设置禁用缩放功能。

container和container-fluid的区别:

前者是固定宽度且响应式布局,后者是100%宽度

栅格系统

container的子元素是row,row的子元素是col

媒体查询:bootstrap使用了media query。

@media (min-width: @screen-sm-min) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

xs超小,手机;sm小,平板;md中等,桌面,;lg大桌面

将最外面的布局元素 .container 修改为 .container-fluid,就可以将固定宽度的栅格布局转换为 100% 宽度的布局

列偏移:.col-md-offset-*

嵌套列

列排序:.col-md-push-*, .col-md-pull-*d

less mixin和变量 不知道该怎么用?没看懂。

 

实例精选

role无障碍阅读,所包含的值有:http://www.zhangxinxu.com/wordpress/2012/03/wai-aria-%E6%97%A0%E9%9A%9C%E7%A2%8D%E9%98%85%E8%AF%BB/

jumbotron:超大屏幕

»   >>

page-header:页面最顶部

thumbnails:缩略图

badges:徽章

img data-src:延迟加载

nav-pills:加样式

tabindex=-1 tab无效

sr-only:隐藏标签

data-toggle:让目标对象表现某一类控件

nav-tabs nav-pills:导航的不同样式

well:内容凹陷显示

  

css细节

排版

h1内可以包含<small>,用来标记副标题;或者.h1 和 .small

.lead 让段落突出显示

高亮<mark>, 删除<del>, 无用<s>, 插入<ins>, 下划线<u>,   小号文本<small>父子体的85%, 着重<strong>, 斜体<em>,

对齐:text-left, left-center, text-right, text-justify, text-nowrap

大小写:text-lowercase, text-uppercase, text-capitalize

缩略:基本<attr> 添加title属性;首字母.initialism, 

<a href="mailto:#">

引用

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
//有引用源
<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>

无样式列表:.list-unstyled 只针对直接子元素;内联列表(所有元素放置在同一行):.line-inline;水平列表的描述:.dl-horizontal(可以让 <dl> 内的短语及其描述排在一行)

 

代码

内联代码<code>; 用户输入<kbd>; 代码块<pre> .pre-scrollable(设置 max-height 为 350px ,并在垂直方向展示滚动条)。 code pre都需要转义。 变量<var>;输出<samp>

 

表格

table.table 基本样式

条纹状.table-striped, 边框.table-bordered, 鼠标悬停.table-hover, 紧缩.table-condensed, 响应.table-responsive

状态类 .active .success .info .warning .danger:通过这些状态类可以为行或单元格设置颜色

将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。

 

表单

form   --   div.form-group   --   label input.form-control

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
</form>

.form-control width:100%

.help-block .checkbox

内联表单:form.form-inline  一定要添加label,使用.sr-only隐藏

.input-group 给input元素加前后的标示

水平排列的表单:form.form-horizontal  label和input水平排列

.control-label 在form-inline 和 form-horizontal 下有效果;常加在label标签上。

支持html5类型的输入控件

多选和单选框,禁止选择,可以添加disabled,这样label也会被禁止点击。.checkbox-inline, .radio-inline单选或者多选的控件排在一行

下拉列表:multiple 可以选择多项

静态控件:静态字符串与label放在同一行,静态.form-control-static

焦点状态:看不到效果;禁用状态:disabled

只读状态:readonly

校验状态:给表单控件的父元素添加如下类,父元素可以是.form-control

.has-warning .has-feedback
.has-error .has-feedback
.has-success .has-feedback
这三种状态会给.control-label, .form-control, .help-block添加样式

控制尺寸:

高度:.input-lg, .input-sm
水平排列的表单组的尺寸:通过添加 .form-group-lg 或 .form-group-sm 类,为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。
宽度:.col-lg-* .col-sm-*

 

按钮

为<a><button><input>加.btn 即可使用提供的样式

导航和导航条组件 只 支持button

a用做button使用,需要添加role="button";

预定义样式:.btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-link

尺寸:.btn-lg, .btn-sm, .btn-xs, .btn-block(宽100%,块级元素)

激活:.active

 

图片

响应式:.img-responsive 让图片在父元素中更好的缩放

居中:.center-block 辅助类

形状:.img-rounded, .img-circle, .img-thumbnail

 

辅助类

文字颜色:.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger

背景色: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger

关闭按钮:.close

<button class='close'><span>&times;</span></button>

三角符号:.caret

左右浮动:.pull-left, .pull-right 

内容块居中:.center-block

清除浮动:.clearfix

.text-hide 文本内容不显示,只显示背景效果,不知道什么时候使用

 

阶段总结

<abbr>:简称,class='initialism',把内容大写,看官网上的一些说明,会全面详细些。

<blockquote></blockquote>  <cite></cite>  <small class='pull-right'></small>:向右浮动

<dl class='dl-horizontal'>:对齐方式发生变化

<code>一个</code>  <pre>一段</pre>:<转为&lt;   >转为&gt;

使用Google prettify可以使代码更漂亮:但是还存在一个问题。

<table class='table'>

 

使用过程中碰到的问题

使用标签页:

问题:home.active的情况下,home tab没有突出显示,跟没active的状态一样。

原因:自己给tab加了背景色,覆盖了bootstrap.css的颜色变化

办法:自己添加背景色时,权重一定不要大于bootstrap.css的active权重。

 

添加disabled属性,需要是button或者a,如果是input的话,又会潜在的问题。

 

posted on 2014-09-25 16:03  j.w  阅读(485)  评论(0编辑  收藏  举报