Bootstrap入门（了解）

Bootstrap介绍

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等。

image.png

思路（我对Bootstrap的理解）

1）Bootstrap框架通过标签选择器（元素选择器）绑定样式相关的代码（比如：我们发现引入了Bootstrap后，界面上的链接是没有下划线的）
2）Bootstrap框架通过类选择器，id选择器，组合选择器（由基本选择器组成）绑定处理样式的css代码和js代码，我们可以给元素设置class和id，这样的话，处理样式的代码就能够对这些元素真正生效。

使用Bootstrap设计导航

1）引入Bootstrap框架

注意：先引入jQuery框架，再引入Bootstrap的js框架

2）设计html代码



    
    
        设为首页
        手机新浪网
        移动客户端

使用Bootstrap设计带图标的按钮

设计html代码

使用Bootstrap设计带徽章的列表

设计html代码

使用Bootstrap设计日期控件

引入bootstrap-datetimepicker框架

设计HTML代码

设计JS代码

参考资料

[01] Bootstrap下载及使用
https://v3.bootcss.com/getting-started/
[02] Bootstrap组件
https://v3.bootcss.com/components/
[03] 导航
https://v3.bootcss.com/components/#nav
[04] Glyphicons 字体图标
https://v3.bootcss.com/components/#glyphicons
[05] Bootstrap徽章
https://v3.bootcss.com/components/#badges
[06] Bootstrap表单
https://www.jianshu.com/p/ffbc36965840
[07] 下载bootstrap-datetimepicker
https://github.com/smalot/bootstrap-datetimepicker
[08] Bootstrap日期和时间表单组件
https://www.bootcss.com/p/bootstrap-datetimepicker
[09] Bootstrap3 datetimepicker控件的使用
https://blog.csdn.net/u011127019/article/details/51725081
[10] bootstrap3使用bootstrap datetimepicker日期插件
https://www.jb51.net/article/114598.htm
[11] bootstrap-datetimepicker 初始值
https://blog.csdn.net/shenwb110/article/details/81386523

微信扫一扫关注该公众号【测试开发者部落】