常用插件
——sweetalert
https://github.com/limonte/sweetalert2
——jquery lazyload
——Font Awesome
http://www.fontawesome.com.cn/faicons/
——toastr
http://thevectorlab.net/flatlab/toastr.html
- [Font Awesome]
(http://fontawesome.io/)
- [jQuery lazy load]
(https://github.com/tuupola/jquery_lazyload)
- [SweetAlert]
(https://github.com/t4t5/sweetalert)/[SweetAlert2](https://github.com/limonte/sweetalert2)
- [Toastr]
(http://codeseven.github.io/toastr/)
使用:
1.先导入插件的css文件
2.导入jquery
3.导入插件的js文件
响应式布局
bootstrap媒体查询:
/* 超小屏幕(手机,小于 768px) */ /* 没有任何媒体查询相关的代码,因为这在 Bootstrap 中是默认的(还记得 Bootstrap 是移动设备优先的吗?) */ /* 小屏幕(平板,大于等于 768px) */ @media (min-width: @screen-sm-min) { ... } /* 中等屏幕(桌面显示器,大于等于 992px) */ @media (min-width: @screen-md-min) { ... } /* 大屏幕(大桌面显示器,大于等于 1200px) */ @media (min-width: @screen-lg-min) { ... }
我们偶尔也会在媒体查询代码中包含 max-width
从而将 CSS 的影响限制在更小范围的屏幕大小之内。
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }