Bootstrap入门速成-效果概述

你的名字 2022-08-07 12:45 296阅读 0赞

## 你的代码不只是你自己看 ##

--------------------

*在此感谢Bootstrap开源项目，及本文中用到各种技术文档作者、博客主人，不一一列举。特此感谢！*  
声明：  
1、本文遵循开源协议，基于开源协议撰写的内容，任何人可以以任何形式来进行使用和二次发布。所造成的问题本人不负责一切法律责任。  
2、对本文涉及的基于MIT协议的内容，不再赘述。特此感谢原作者。\*\*

--------------------

本文主要用于快速了解Bootstrap框架中常用的内容，包括css效果和对应less及js效果。
    使用bootstrap的目的是更快、更好的去开发具体相对普适性的页面效果。
    使用webstorm开发时，多使用代码格式化，可以更好的浏览代码效果，方便交互开发。

1.  [栅格系统][Link 1]  
    方便布局和根据页面宽度来调整元素的宽度，使用栅格系统，可以更好的匹配不同分辨率的页面效果。
2.  [排版][Link 2]  
    排版内部包含大量零碎的内容，用来更快的显示一些常用的效果。非必要，可自行设计。
3.  [表格][Link 3]  
    表格效果，包括条纹状表格、带边框表格等。可看具体效果来选择使用。  
    PS1：因bt的table使用的padding和margin比较大，所以建议直接使用[紧缩表格][Link 4]来减少表格的padding，也可以自行设置。  
    PS2：表格的全局居中方式为text-align:center;内部table中具体调整，列属性为名称时使用左对齐，列属性为金额、数量等纯数字的内容使用右对齐。
4.  [表单][Link 5]  
    4.1、表单主要需要注意form-control、form-group效果，圆角的输入框和内容提示虚化可以更好的去浏览。还有其他label和input在一行，label中for和input中id的绑定（尤其是select，一款比较炫的select插件[Select2][]）。  
    4.2、具体的单选按钮和多选按钮组可使用另外的[iCheck][]插件。  
    4.3、表单的构造可以使用[在线表单构造器][Link 6]，但要注意代码的规范性。  
    4.4、表单中最常用的[输入框组][Link 7]
5.  [按钮][Link 8]及[按钮组][Link 9]，[行内按钮效果][Link 10]  
    按钮讲究的主要是统一的效果和颜色组，中文站提供的另一套按钮组[Buttons][]
6.  图标  
    几个常用的icon font字体图标字库：  
    6.1、[阿里icon font字库][icon font]  
    6.2、[fontello][]  
    6.3、[icomoon][]  
    6.4、[Font-Awesome git][]或者[Font Awesome 中文站][Font Awesome]  
    6.5、[Glyphicon Halflings][]，[Bootstrap可免费使用图标][Bootstrap]  
    建议选择一个图标字库来配置使用。[css加载进度提示效果][css]
7.  [下拉菜单][Link 11]  
    可使用hover+延迟事件来实现同样的效果，主要用于header和右边栏部分。  
    
    
     *  [导航][Link 12]，主要应用是[css标签页][css 1]，[js标签页][js]
     *  [导航条][Link 13]包含多数导航条的效果，可参考。
     *  [路径导航][Link 14]，即[面包屑导航][Link 15]，10个[css面包屑][css 2]
8.  [分页][Link 16]  
    可直接使用bootstrap提供的Paginator插件或者Datatables插件来实现分页效果。前者适合跨行和有特殊样式效果需求的分页，后者适合表格的分页。[参考一][Link 17]、[参考二][Link 18]、[nodejs+paginator使用方法][nodejs_paginator]
9.  [标签][Link 19]和[徽章][Link 20]  
    两者主要提供更好的页面效果，标签可用来突出某个数据，徽章用于浮动的显示数值效果。红包数量、消息数量等情形可用。  
    徽章效果也可参考Frozenjs，即腾讯手机端的[辅助类-红点效果][-]。
10. [面板][Link 21]  
    一个最为常用的布局方式，可将整合页面拆分为几个面板来进行布局。类似于早期的frame效果。
11. [模态框][Link 22]  
    最为常用的消息提示方式，页面弹窗尽量不要使用alert，模态框可定制为信息提示框、确认框（仓库管理系统的配货管理在用）两种。  
    ![信息提示框][20150410092829959]  
    ![信息确认框][20150410092934696]  
    ![html源代码：具体内容可使用js填充][html_js]
12. [滚动监听][Link 23]  
    替代原始的锚点
13. 一些其他可能用到的技术点  
    主要用于提示用户，隐藏和展示效果。  
    
    
     *  [工具提示][Link 24]
     *  [js警告框][js 1]和[css警告框][css 3]
     *  [弹出框][Link 25]
     *  [弹窗插件][Link 26]
     *  [引导插件][Link 27]
     *  **遮盖层**
     *  [瀑布流][Link 28]
     *  **隐藏提示信息**  
        ![隐藏提示信息][20150410094930188]
14. [轮播插件][Link 29]  
    主要用户展示图片或者公告信息。具有一定的幻灯片效果。
15. [Datatables][]  
    一个强大的表格数据显示插件。
16. 其他值得收藏和参考的站点或网页：  
    
    
     *  腾讯手机端css库[FrozenUI][-]和[JMUI][]
     *  [精选12个时尚的 CSS3 效果][css]
     *  [easyUi][]
     *  [鑫空间，前端技术博客][Link 30]

[Link 1]: http://v3.bootcss.com/css/#grid
[Link 2]: http://v3.bootcss.com/css/#type
[Link 3]: http://v3.bootcss.com/css/#tables
[Link 4]: http://v3.bootcss.com/css/#tables-condensed
[Link 5]: http://v3.bootcss.com/css/#forms
[Select2]: http://select2.github.io/examples.html
[iCheck]: http://www.bootcss.com/p/icheck/
[Link 6]: http://www.bootcss.com/p/bootstrap-form-builder/
[Link 7]: http://v3.bootcss.com/components/#input-groups
[Link 8]: http://v3.bootcss.com/css/#buttons
[Link 9]: http://v3.bootcss.com/components/#btn-groups
[Link 10]: http://v3.bootcss.com/javascript/#buttons
[Buttons]: http://www.bootcss.com/p/buttons/
[icon font]: http://www.iconfont.cn/
[fontello]: http://fontello.com/
[icomoon]: http://icomoon.io/app/#/select
[Font-Awesome git]: http://fortawesome.github.io/Font-Awesome/
[Font Awesome]: http://www.bootcss.com/p/font-awesome/
[Glyphicon Halflings]: http://glyphicons.com/
[Bootstrap]: http://v3.bootcss.com/components/#glyphicons
[css]: http://www.yyyweb.com/3103.html
[Link 11]: http://v3.bootcss.com/components/#dropdowns
[Link 12]: http://v3.bootcss.com/components/#nav
[css 1]: http://v3.bootcss.com/components/#nav-tabs
[js]: http://v3.bootcss.com/javascript/#tabs
[Link 13]: http://v3.bootcss.com/components/#navbar
[Link 14]: http://v3.bootcss.com/components/#breadcrumbs
[Link 15]: http://www.chinaz.com/web/2014/1124/374939.shtml
[css 2]: http://www.wzsky.net/html/Website/Experience/118822.html
[Link 16]: http://v3.bootcss.com/components/#pagination
[Link 17]: http://my.oschina.net/shunshun/blog/204587
[Link 18]: http://www.cnblogs.com/william-lin/p/3909613.html
[nodejs_paginator]: http://blog.fens.me/nodejs-bootstrap-paginator/
[Link 19]: http://v3.bootcss.com/components/#labels
[Link 20]: http://v3.bootcss.com/components/#badges
[-]: http://frozenui.github.io/frozenui/
[Link 21]: http://v3.bootcss.com/components/#panels
[Link 22]: http://v3.bootcss.com/javascript/#modals
[20150410092829959]: /images/20220805/60089f9579864035adfe7fdaede64ccf.png
[20150410092934696]: /images/20220805/3ad35c566bb04f4a90d1a71b3d7f31c6.png
[html_js]: /images/20220805/d22348b61775489eadd49ace763cb81e.png
[Link 23]: http://v3.bootcss.com/javascript/#scrollspy
[Link 24]: http://v3.bootcss.com/javascript/#tooltips
[js 1]: http://v3.bootcss.com/javascript/#alerts
[css 3]: http://v3.bootcss.com/components/#alerts
[Link 25]: http://v3.bootcss.com/javascript/#popovers
[Link 26]: http://www.bujichong.com/sojs/sobox/index.html
[Link 27]: http://bootstraptour.com/
[Link 28]: http://www.17sucai.com/pins/tag/548.html
[20150410094930188]: /images/20220805/014f227658ff40278f83e0bd3ff02e17.png
[Link 29]: http://v3.bootcss.com/javascript/#carousel
[Datatables]: http://dt.thxopen.com/example/
[JMUI]: http://alloyteam.github.io/Spirit/modules/JMUI/demo.html
[easyUi]: http://www.jeasyui.net/
[Link 30]: http://www.zhangxinxu.com/php/