bootstrap组件

时间 2019-11-24

原文原文链接

bootstrap组件：

一些零件的组合（包括字体图标、下拉菜单、警告框、弹出框）；css
一个网站、一个APP或者一个系统的构建基础jquery

如下列举了部分常见的组件的源代码及解析bootstrap

1.怪异的属性-特殊属性

一、role： HTML5的标签属性，标识普通标签使其语义化，方便浏览器对其具体功能进行识别，给特定的浏览器使用好比盲文浏览器。
二、aria-label：用在输入框，当焦点落到输入框时读屏软件可读出输入框的内容，配合读屏软件使用。
三、tabIndex：设置键盘的Tab键在控件中的移动，就是焦点的移动顺序，方便一些有障碍的人士浏览网页。
四、data-：HTML5新增的用于自定义的属性，不影响页面显示，管理本身想要实现的数据传递，包括数据交互的一些效果。涉及组件交互，好比下拉菜单、点击等。api

2.字体图标

使用span标签进行包装，引入想要使用字体图标的类名。须要在head引入bootstrap.min.css。如：字体图标class： glyphicon
星形class： glyphicon-star浏览器

<head>

<link href="css/bootstrap.min.css" rel="stylesheet"/>
    <style>
    .glyphicon-asterisk{
        color: #02a6e3;
        font-size: 100px;
    }
    </style>
</head>
<body>
<button class="btn btn-danger">
    <span class="glyphicon glyphicon-star"></span>这是一个带星型按钮</button>
</body>
复制代码

3.下拉菜单组件

代码：bash

<link href="css/bootstrap.min.css"rel="stylesheet"/>
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js">

<div class="dropdown">
    <button class="btn btn-default drop-toggle"  data-toggle="dropdown">这是按钮
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="http://www.imooc.com">慕课网</a></li>
        <li><a href="http://www.imooc.com">慕课网</a></li>
        <li><a href="http://www.imooc.com">慕课网</a></li>
    </ul>
</div>
复制代码

注意各层级class不可混肴使用ide

class	做用
dropdown	控制组件为下拉
caret	按钮的角标
dropdown-menu	下拉菜单class
dropdown-toggle	按钮的切换样式class
data-toggle="dropdown"	按钮处设置的绑定事件
dropdown-menu-right	右对齐
divider	分隔线

ps：jquery脚本先于bootstrap脚本导入测试

4. ".input-group"控件组

.input-group-addon可放置额外的内容和图标字体

Bootstrap4.0前写法
<div class="input-group">
    <span class="input-group-addon">$</span>
    <input type="text" class="form-control">
</div>
Bootstrap4.0写法
<div class="input-group">
    <span class="input-group-text" >$</span>
    <input type="text" class="form-control" >
</div>
复制代码

5.导航

以一个带有class .nav的无序列表开始
.nav-tabs 表明可切换的导航
.nav-pills 表明胶囊导航
.nav-judtified 使导航垂直，Bootstrap4.0写法 flex-columnflex

<ul class="nav nav-tabs">
    <li class="nav-item"><a class="nav-link active" href="http://www.imooc.com">慕课网</a></li>
    <li class="nav-item"><a class="nav-link" href="http://www.imooc.com">慕课网</a></li>
    <li class="nav-item"><a class="nav-link" href="http://www.imooc.com">慕课网</a></li>
</ul>
<ul class="nav nav-pills flex-column">
    <li class="nav-item"><a class="nav-link active" href="http://www.imooc.com">慕课网</a></li>
    <li class="nav-item"><a class="nav-link" href="http://www.imooc.com">慕课网</a></li>
    <li class="nav-item"><a class="nav-link" href="http://www.imooc.com">慕课网</a></li>
</ul>
复制代码

6.分页

经常使用于图片、文字等的分页状况。

一样也可使用-lg/sm显示按钮的大小。

属性	属性详情
pagination	父元素中添加表示分页
pager	放置在翻页区域，与pagination相对
previous	把连接向左对齐
next	把连接向右对齐
page-header	分页底部线

<!--正常分页样式-->
<ul class="pagination">
    <li class="active"><a href="">首页</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
    <li><a href="">尾页</a></li>
</ul>
<!--正常分页样式 end-->

<!--翻页样式-->
<div class="page-header" >
    <ul class="pager">
        <li class="previous"><a href="">上一页</a></li>
        <li class="next"><a href="">下一页</a></li>
    </ul>
</div>
<!--翻页样式 end-->
复制代码

7.进度条

progress-bar进度条
progress-bar-danger/success/info.... 进度条颜色
progress-bar-striped 进度条斑马状渐变

<div class="progress">
    <div class="progress-bar progress-bar-danger progress-bar=striped">
            进度条+红色+斑马线+宽度60%
    </div>
</div>
复制代码

8.列表

.list-group 表明列表组
.list-group-item 表明列表项
.badge 表明状态数badge（例如点赞的人数）
.active 表明选中状态

<ul class="list-group">
		<li class="list-group-item active">
			这是一个列表
			<span class="badge">10</span>
		</li>
		<li class="list-group-item disabled">
			这是一个列表
			<span class="badge">10</span>
		</li>
		<li class="list-group-item list-group-item-info">
			这是一个列表
			<span class="badge">10</span>
		</li>
		<li class="list-group-item">
			这是一个列表
			<span class="badge">10</span>
		</li>
	</ul>
复制代码

9.面板

.panel 表明面板
.panel-heading 表明面板头部
.panel-body 表明面板内容
.panel-footer 表明面板的注脚

<div class="panel panel-default">//-primary、-success、----
    <div class="panel-heading">
            面板头部
    </div>
    <div class="panel-body">
     面板内容
    </div>
    <div class="panel-footer">
        面板尾部
    </div>
</div>
复制代码

10.Bootstrap中的插件-data属性

经过data属性控制页面交互

插件引用：

一、bootstrap插件依赖bootstrap.js
二、bootstrap.js基于jQuery（引用jQuery以后才能引入bootstrap.js，注意前后顺序不能搞反）注意：不一样版本的bootstrap.js依赖的jQuery版本不同

data属性：
一、经过data属性控制页面交互
二、
$(document).off('.data-api')解除属性绑定
data-target="" 指定相应内容的位置
data-toggle=""绑定方法
data-dismiss=""关闭方法

bootstrap4.0写法
<div >
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">弹窗</button>
</div>
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title " id="myModalLabel">标题</h4>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span><span class="sr-only justify-content-center">关闭弹窗</span>
                </button>
            </div>
            <div class="modal-body">慕课网</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
<button class="btn btn-danger btn-lg " data-toggle="modal" data-target="#danger">
    这是测试按钮
</button>
<div  id="danger">
    这是内容
</div>
复制代码