bootstrap组件

暮雪之寒
1,055 阅读6分钟

bootstrap组件：

  • 一些零件的组合（包括字体图标、下拉菜单、警告框、弹出框）；

  • 一个网站、一个APP或者一个系统的构建基础

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

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

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

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.下拉菜单组件

代码：

<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不可混肴使用

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-column

<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属性控制页面交互

插件引用：

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

data属性：
1、通过data属性控制页面交互
2、
$(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>
avatar
文章
阅读
粉丝