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框架

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>

注意:先引入jQuery框架,再引入Bootstrap的js框架

2)设计html代码

<!--导航层-->
<div>
    <!--菜单列表-->
    <ul class="nav nav-pills nav-justified">
        <li class="active"><a href="javascript:void(0);">设为首页</a></li>
        <li><a href="javascript:void(0);">手机新浪网</a></li>
        <li><a href="javascript:void(0);">移动客户端</a></li>
    </ul>   
</div>

使用Bootstrap设计带图标的按钮

设计html代码

<div>
    <button type="button" class="btn btn-default" aria-label="Left Align">
        <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span> 向左对齐
    </button>
    <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-star" aria-hidden="true"></span> 赞
    </button>
    <button type="button" class="btn btn-default btn-lg">
        <span class="glyphicon glyphicon-star" aria-hidden="true"></span> 赞
    </button>
</div>

使用Bootstrap设计带徽章的列表

设计html代码

<div>
    <ul class="list-group">
        <li class="list-group-item"><a href="#">
            <span class="badge" style="background-color: red">1</span>&nbsp;第一名</a>
        </li>
        <li class="list-group-item">
            <a href="#"><span class="badge" style="background-color: orange;">2</span>&nbsp;第二名</a>
        </li>
        <li class="list-group-item"><a href="#">
            <span class="badge" style="background-color: green;">3</span>&nbsp;第三名</a>
        </li>
        <li class="list-group-item">
            <a href="#"><span class="badge">4</span>&nbsp;第四名</a>
        </li>   
        <li class="list-group-item">
            <a href="#"><span class="badge">5</span>&nbsp;第五名</a>
        </li>
    </ul>
</div>

使用Bootstrap设计日期控件

引入bootstrap-datetimepicker框架

<link rel="stylesheet" type="text/css" href="bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css"/>
<script src="bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js" type="text/javascript" charset="utf-8"></script>

设计HTML代码

<div class="input-group date form_date col-md-3" data-date="" data-date-format="yyyy MM dd" data-link-field="birth" data-link-format="yyyy-mm-dd">
    <input name="birth" class="form-control" type="text" value="" readonly>
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-remove"></span>
    </span>
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

设计JS代码

<script type="text/javascript">
    $(function(){
        $('.form_date').datetimepicker({
          language: 'zh-CN',
          weekStart: 1,
          todayBtn: 1,
          autoclose: 1,
          todayHighlight: 1,
          startView: 2,
          minView: 2,
          forceParse: 0,
         });
        $('.form_date').datetimepicker("setDate", new Date()); 
    })
</script>

参考资料

[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

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

image.png

点击链接加入群聊【软件测试学习交流群】
https://jq.qq.com/?_wv=1027&k=5eVEhfN
软件测试学习交流QQ群号:511619105

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。