Bootstrap碎语 - 爱码网

这里记录下某段时间Bootstrap的零散碎片。

1、有关Bootstrap的参考网站：

● 官方：http://getbootstrap.com/
● 主题：http://bootswatch.com/
● Font-Awsome: http://fortawesome.github.io/Font-Awesome/
● 幻灯片：lokeshdhakar.com/projects/lightbox2/
● 幻灯片：ashleydw.github.io/lightbox/
● 表格字段排序：http://tablesorter.com/docs/
● scss：http://www.sass-lang.com/
● less: http://winless.org/
● google fonts: https://www.google.com/fonts
● 关于动画的css：https://daneden.github.io/animate.css/
● 页面滚动动画效果：http://mynameismatthieu.com/WOW/

2、在Bootstrap如何设置宽幅广告内容区域？

注意：<div class="container">放在<div class="jumbotron">的里面。

3、Bootstrap中自定义的css类设置无效？

.someclass{
color: #1caa98;
}

在Bootstrap中，如果某个自定义css类设置无效，很有可能是因为自定义的css类和Bootstrap自带的类名重复了，按如下方式解决：

.someclass{
color: #1caa98 !important;
}

4、相对路径？

比如有如下的文件、文件夹层级关系：

img文件夹→temp.png
css文件夹→style.css
index.html

index.html引用style.css,在index.html中有这样一段代码：

如何把img文件夹的temp.png作为背景图片呢？

.someclass{
background: url(../img/temp.png) no-repeat top center;
}

..表示style.css的上一级，即和img文件夹同级。

5、图片同比例缩放？

.someimg{
width:50%;
}

6、图片显示的时候比原尺寸大？

显示的时候，temp.png这张图片的宽度占了<div class="col-md-4">所占宽度的大小，比原尺寸更大。

解决办法是通过类来控制图片的宽度为100%。

.temp{
width:100%;
}

7、Accordion的构造？

<div class="panel-group" >设置背景图片的宽度：background-size: 100%;