bootstrap实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>bootstrap组件</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="jquery-3.2.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<style>
.glyphicon-asterisk{
color: green;
font-size: 100px;
}
</style>
<body>
<span class="glyphicon glyphicon-asterisk"></span>
<!-- 字体图标 -->
<button class="btn btn-default">
<span class="glyphicon glyphicon-thumbs-up"></span>
这是一个按钮
</button>
<!-- 下拉菜单 -->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">这是按钮
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="http://www.baidu.com">
百度
</a>
</li>
<li>
<a href="http://www.baidu.com">
百度
</a>
</li>
<li>
<a href="http://www.baidu.com">
百度
</a>
</li>
</ul>
</div>
<!-- 控件组 -->
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
</div>
<!-- 导航 -->
<ul class="nav nav-tabs">
<li class="active"><a href="http://www.baidu.com">百度</a></li>
<li><a href="http://www.baidu.com">百度</a></li>
<li><a href="http://www.baidu.com">百度</a></li>
</ul>
<ul class="nav nav-pills">
<li class="active"><a href="http://www.baidu.com">百度</a></li>
<li><a href="http://www.baidu.com">百度</a></li>
<li><a href="http://www.baidu.com">百度</a></li>
</ul>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="http://www.baidu.com">百度</a></li>
<li><a href="http://www.baidu.com">百度</a></li>
<li><a href="http://www.baidu.com">百度</a></li>
</ul>
<!-- 分页 -->
<nav>
<ul class="pager">
<li class="previous">
<a href="http://www.baidu.com">向左</a>
</li>
<li class="next">
<a href="http://www.baidu.com">向右</a>
</li>
</ul>
<ul class="pagination pagination-lg">
<li>
<a href="http://www.baidu.com">1</a>
</li> <li>
<a href="http://www.baidu.com">2</a>
</li>
<li>
<a href="http://www.baidu.com">3</a>
</li>
<li>
<a href="http://www.baidu.com">4</a>
</li>
<li>
<a href="http://www.baidu.com">5</a>
</li>
</ul>
</nav>
<!-- 进度条 -->
<div class="progress">
<div class="progress-bar" style="width:60%">60%</div> </div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:60%">60%</div> </div>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width:60%">60%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" style="width:60%">60%</div>
</div>
<!-- 列表 -->
<ul class="list-group">
<li class="list-group-item active">
这是一个列表
<span class="badge">14</span>
</li>
<li class="list-group-item disabled">
这是一个列表
<span class="badge">14</span>
</li>
<li class="list-group-item list-group-item-info">
这是一个列表
<span class="badge">14</span>
</li>
</ul>
<!-- 面板 -->
<div class="panel panel-danger">
<div class="panel-heading">弹出层！</div>
<div class="panel-body">内容</div>
<div class="panel-footer">脚注</div>
</div>
<!-- 弹窗 -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
弹窗
</button>
<!-- <button class="btn btn-danger btn-lg" data-toggle="modal" data-target="#danger">
这是测试按钮
</button>
<div id="danger">这是一个内容</div> --> <div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>$times;</span><span class="sr-only">关闭弹窗</span></button>
<h4 class="modal-title" id="myModalLabel">标题</h4>
</div>
<div class="modal-body">
学习
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
</div>
</div>
</div>
</div>
</body>
</html>
bootstrap实例的更多相关文章
- Bootstrap 实例 - 模态框（Modal）插件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- bootstrap实例 之 响应式表格-----2017-05-15
Bootstrap 的响应式 CSS 能够自适应于台式机.平板电脑和手机,现在就bootstrap的响应式举一个例子: 如上图所示,要实现该表格在手机等移动端上只显示代号.名称.和价格,其他以查看详情 ...
- 我的第一个bootstrap实例
先上代码: <!doctype html><html lang="en"><head> <meta charset="UTF-8 ...
- Bootstrap 标签的变体 实例样式
Bootstrap 标签样式,代码如下: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 标签的 ...
- Bootstrap两端对齐的导航实例
Bootstrap两端对齐的导航,样式剥离出来代码如下: <!DOCTYPE html> <html> <head> <title>Bootstrap ...
- bootstrap 仿实例
bootstrap实现一个网页 html文件 <!DOCTYPE html> <html> <head lang="en"> <meta ...
- bootstrap简单使用实例
表格实例,包含bootstrap.css 和 2.1.1jquery <!DOCTYPE html> <html> <head> <meta charset= ...
- Bootstrap导航栏实例讲解
导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...
- Android studio 3.4.1 使用 bootstrap 中的组件实例
电脑环境: ubuntu18.04 + Android studio 3.4.1 + bootsrtap4 Android studio中板式设计主要使用的 XML 布局文件,而在bootstrap中 ...
随机推荐
- Golang字符串是否存在于切片或数组中的小工具(基本等同于python in语法)
// golang中是没有判断字符串是否存在数组或切片里的内置方法, 所以我们可以自己搞一个快速小组件 func Find(slice []string, val string) (int, bool ...
- NIO基础操作
原文链接http://zhhll.icu/2020/05/18/java%E5%9F%BA%E7%A1%80/IO/NIO%E5%9F%BA%E6%9C%AC%E6%93%8D%E4%BD%9C/ N ...
- FastApi学习(二)
前言 继续学习 此为第二篇, 还差些知识点就可以结束, 更多的比如用户的身份校验/ swagger 文档修改等以后会单独写 正文 使用枚举来限定参数 可以使用枚举的方式来限定参数为某几个值之内才通过 ...
- JavaScript 获取当天0点以及当前时间方法
js 取得今天0点: const start = new Date(new Date(new Date().toLocaleDateString()).getTime()); console.log( ...
- Ossec 安装并配置邮件通知
Ossec 安装并配置邮件通知 目录 Ossec 安装并配置邮件通知 1. 介绍 2. 软硬件环境 3. 安装步骤 3.1 Server 3.2 Agent 3.3 配置邮件通知 4. 参考资料 1. ...
- 我们NetCore下日志存储设计
日志的分类 首先往大的来说,日志分2种 ①业务日志: 即业务系统需要查看的日志, 常见的比如谁什么时候修改了什么. ②参数日志: 一般是开发人员遇到问题的时候定位用的, 一般不需要再业务系统里展示. ...
- python3 最基本且简单的实现组合设计模式
组合模式是把一个类别归为一个整体,并且组织多个整体之间的关系,使用通过树形结构来描述所有整体. 一般的编写方式为一个类别对象下添加多个该对象的元素,该对象又为其它对象下的元素.简单来说就是一个学校有一 ...
- kubernets之向外部应用暴露应用
一 通过NodePort来暴露服务 前面已经介绍的服务的一些作用,例如将集群内部的应用暴露给集群内部的pod使用,将外部的应用通过服务暴露给内部应用使用,但是服务最大的作用不仅仅是这些 而是将集群内 ...
- leetcode 940. 不同的子序列 II （动态规划 ，字符串， hash，好题）
题目链接 https://leetcode-cn.com/problems/distinct-subsequences-ii/ 题意: 给定一个字符串,判断里面不相同的子串的总个数 思路: 非常巧妙的 ...
- mysql—if函数
在mysql中if()函数的具体语法如下:IF(expr1,expr2,expr3),如果expr1的值为true,则返回expr2的值,如果expr1的值为false,则返回expr3的值. 开始实 ...