时间：2021-07-01 10:21:17 帮助过：5人阅读
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如何设置宽幅广告内容区域？
注意：
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(../https://www.gxlcms.com/img/temp.png) no-repeat top center;
}
..表示style.css的上一级，即和img文件夹同级。
5、图片同比例缩放？
.someimg{
width:50%;
}
6、图片显示的时候比原尺寸大？
显示的时候，temp.png这张图片的宽度占了
解决办法是通过类来控制图片的宽度为100%。
.temp{
width:100%;
}
7、Accordion的构造？
8、form的构造？
9、为移动端做的自适应？
通过media，结合网格类名。
可以为一个div设置不同的网格类名：
关于media可以按如下设置：
/*991以下*/
@media(max-width: 991px){
}
/*768-990*/
@media(min-width: 768px) and (max-width: 990px){
}
/*768以下*/
@media(max-width: 768px){
}
/*500以下*/
@media(max-width: 500px){
}
10、导航菜单的构造？
11、使用scss文件？
→scss文件语法，参考这里：http://www.sass-lang.com/
→下载Scout(http://mhs.github.io/scout-app/),安装并打开Scout
→选择Input Folder，比如一个名称是scss的文件夹。选择Output Folder，比如一个名称是css的文件夹。选择JavaScripts Folder，比如一个名称是js的文件夹。选择Images Folder,比如一个名称为img的文件夹。在Environment下选择Production项。
→设置完毕按Play按钮，可能会得到Error#3214这个报错，这是因为没有找到Java正确的版本。
先找到当前Java的版本：C:\Program Files\Java\jre1.8.0_25
打开C:\Program Files (x86)\Scout\javascripts\app文件夹下的process_interaction.js文件，修改如下：
path = air.File.applicationDirectory.resolvePath("C:\\Program Files\\Java\\jre1.8.0_25\\bin\\java.exe");
关闭报错窗口，关闭Scout窗体，重新打开Scout，报错没有了。
但是开始运行，还是会报错：
Error : TypeError on line 3414 of org/jruby/RubyString.java: no implicit conversion from nil to integer
Run with --trace to see the full backtrace
引起这个问题的原因是网站文件放在了带有中文的文件夹中。把网站文件放在没有中文的文件夹中即可。
再次运行，在css文件夹里多生成了一个style.css文件。
→保持Scout运行着，编辑scss文件夹中的style.scss文件，保存，相应地，css文件夹里的style.css也会自动有更新。
Scount的作用显而易见，就是把动态的scss文件编译成css文件。而在scss文件中可以使用变量、嵌套，等等。
比如按如下在scss文件中设置变量：
$bodypadding:40px;
body{
padding-bottom:$bodypadding;
}
scss文件夹里的style.scss如何把Bootstrap所有的样式编译到css文件夹里的style.css里呢？
→在scss文件夹中添加vendors文件夹
→把bootstrap.css文件放入其中,并改名为_bootstrap.scss
→在style.scss文件中编写如下：
@import 'vendors/_bootstrap.scss';
body{
padding-bottom:50px;
}
→保存style.scss，运行Scout，这样就把Boostrap所有样式写到css文件夹中的style.css文件中了
12、如何让一个图片不超过一个container
.temp{
max-width:100%;
}
这样就可以把图片控制在container之内
13、如何让一个container中的图片单独一行并且居中？
通过display:block;让其单独一行，通过margin:auto;让其居中。
14、如果简单的2列可以用什么实现？
Vestibulum in erat tempor, rutrum diam fringilla, feugiat augue
15、进度条如何实现？
16、alert如何实现？
17、页脚如何实现？
18、行内表单
如何使container中的行内表单右靠呢？
float:right
19、如何让container中的图片左靠呢？
float:left
20、Panel的构造？
21、在表单中如何让一些元素右靠？
22、一些小图标icon哪里找？
● http://getbootstrap.com/components/#glyphicons
● https://fortawesome.github.io/Font-Awesome/icons/ 但需下载引用font-awesome.css这个文件，还需要把下载下来fonts文件夹里的字体全部复制到当前项目的fonts文件夹里。
23、Panel中可以有row吗？
--可以。
24、上方的缩略图片+下方的文字作为a的一部分？
25、prevent strang wrapping?
26、col-xs,col-sm,col-md,col-lg?
● .col-xs-, 屏幕尺寸<768px,
● .col-sm-, 屏幕尺寸大于或等于768px,container宽度大于或等于750px
● .col-md-, 屏幕尺寸大于或等于992px,container宽度大于或等于970px
● .col-lg-, 屏幕尺寸大于或等于1200px,container宽度大于或等于1170px
27、圆角框左侧中间的箭头图示？
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tincidunt eget ante eget feugiat. Praesent adipiscing tortor eu tincidunt tempus.
.bubble{
position: relative;
width: 580px;
min-height: 65px;
padding: 15px;
background: #fff;
border-radius: 10px;
border: 1px solid #ccc;
}
.bubble:after{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent #fff;
display: block;
width: 0;
z-index: 1;
margin-top: -15px;
left: -15px;
top: 50%;
}
.bubble:before{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent #ccc;
display: block;
width: 0;
z-index: 0;
margin-top: -15px;
left: -16px;
top: 50%;
}
28、图片展示效果？
参考：ashleydw.github.io/lightbox/
到这里下载：https://github.com/ashleydw/lightbox
以上插件可以实现：呈现多个缩略图，点击某个缩略图弹出模态窗口展示大图，并可以通过点击大图前后控制展示图片。通过简单的几行js代码以及元素属性即可完成设置。
→把dist文件夹下的ekko-lightbox.js文件拷贝到本项目的js文件夹
→把dist文件夹下的ekko-lightbox.css文件宝贝到本项目的css文件夹
→在页面引用以上两个文件
→html部分如下：
● 以上data-title="Image One" data-footer="This is image 1" data-toggle="lightbox" data-gallery="mygallery" data-parent=".gallery-parent"是针对ekko-lightbox.js的。
● 以上data-hover="tooltip" data-placement="top" title="This is image three"是针对bootstrap.js的。
→css部分
/*等于这里确定好li的宽度*/
.photos li{
list-style: none;
float: left;
margin: 5px;
width: 23%;
}
/*图片的宽度是建立在li的宽度之上的*/
.photos img{
width: 100%;
}
→js部分