这里记录下某段时间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如何设置宽幅广告内容区域？
注意：
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这张图片的宽度占了
解决办法是通过类来控制图片的宽度为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-, 屏幕尺寸● .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部分
$(function () {
$('[data-hover="tooltip"]').tooltip()
})
29、使用Less?
→ http://winless.org/
→ 下载，安装，打开
→ 在项目文件夹中创建一个less文件夹,在less文件夹下创建vendors文件夹和一个main.less文件。在vendors文件夹中创建bootstrap文件夹；在vendors文件夹中创建一个font-awesome文件夹。
→ http://getbootstrap.com/getting-started/ 点击下载"Source code"，把less文件夹中的所有文件拷贝到以上的bootstrap文件夹
→ https://fortawesome.github.io/Font-Awesome/
→ 下载，把其中less文件夹下的所有文件拷贝到font-awesome文件夹
→ 打开main.less文件，编写如下：
@import "vendors/bootstrap/bootstrap.less";
@import "vendors/font-awesome/font-awesome.less";
→ 打开WinLess，点击"打开"，选择项目中的"less"文件夹，勾选"main.less"，点击"Compile"。
→ 在网站的css文件夹中多了一个main.css文件，里面包含了bootstrap和font-awesome的样式。
→ 打开网页文件引用css
30、有关display?
● display:inline;行内元素，是span, em, b等的默认值。可以设置margin和padding，但只会水平方向影响，不会垂直方向影响。
● display:inline-block;行内块级元素，不仅可以设置margin和padding,还可以设置width和height。
● display:block;通常用来设置div, section, ul, p, h1, 等等，不在行内待着，会另起一行。
● display:none;隐藏，常用。
● display:table;像处理表格一样处理块级元素
div {
display: table;
display: table-cell;
display: table-column;
display: table-colgroup;
display: table-header-group;
display: table-row-group;
display: table-footer-group;
display: table-row;
display: table-caption;
}
比如：
display:table-cell;和vertial-align:middle;配合使用，保证div中的内容垂直居中。
31、幻灯片?
→ 打开：lokeshdhakar.com/projects/lightbox2/
→ 下载，把lightbox.css文件拷贝到项目文件夹中，把lightbox.js文件也拷贝到项目文件夹中，把img文件夹下的所有图片拷贝到项目文件夹中
→ 给a标签以及其中的image标签设置如下：
32、Bootstrap主题？
→打开：http://bootswatch.com/
→点击下载某一个主题，打开css文件，复制所有，替换掉当前css文件夹中bootstrap.css里的所有内容
→点击Preview可预览主题
33、表格排序？
→ 打开：http://tablesorter.com/docs/
→ 下载Full release中的jquery.tablesorter.zip
→ 把jquery.tablesorter.js拷贝到项目中
→ 把该js文件引入到页面
→ table需要有完整的thead, tbody结构
| Page Title | Category | Author | |
|---|---|---|---|
| Sample Page One | Category One | John Doe | |
| Sample Page Two | Category Two | John Doe |
通过js调用：
$('#sort-table').tablesorter({
sortList:[[0,0],[1,0]]
});
通过tablesorter对表头样式进行设置：
.tablesorter th{
cursor: pointer;
}
34、Font-Awesome?
→ 打开：http://fortawesome.github.io/Font-Awesome/
→ 点击下载
→ 把下载下来的font-awesome.css文件拷贝到当前项目下
→ 把下载下来的fonts文件夹下的所有文件拷贝到当前项目的fonts文件夹下
→ 在页面引用font-awesome.css文件
35、bootswatch?
→ 打开：http://bootswatch.com/
→ 选择其中的一个主题，点击Download
→ 拷贝所有内容，替换掉当前bootstrap.css中的所有内容
36、其它?
● text-transform:uppercase; 字体转换
● min-height:100px;最低高度
● overflow:auto;默认不会被修剪，多了会在框之外；hidden，多了会修剪；scroll，多了有滚动条；auto,多了，自动显示滚动条；inherit继承父元素的overflow设置。
● margin-top:-60px;从原来的位置往上提
● display:block;此元素显示为块级元素，此元素前后都有换行符
● background-image: linear-gradient(#04519b, #044687,60%, #033769) 设置渐变背景
● border-radius: 10px; 圆角
● input[type='text'] 过滤类型
● 
图片外包裹一个圆角框
●
Solution to the problem that vscode cannot run after downloading python
WiFi is connected but there is an exclamation mark
What are the development tools?
Three major characteristics of java
Convert pdf to cad drawings
Usage of sqrt function in Java
Is Bitcoin trading allowed in China?
How to close port 135
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
