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中 ...
随机推荐
- 意想不到，这个神奇的bug让我加班到深夜
给大家分享一个近期解决的线上问题,起因是这样的,近期参与公司的一个项目,工程量很大,代码编写测试过后终于到了紧张的上线时刻. 项目上线 上线前照例忐忑不安了一番,因为工程量比较大,预估可能不会很顺利, ...
- python的默认参数的一个坑
前言 pass 正文 在 https://docs.python.org/3/tutorial/controlflow.html#default-argument-values 中,有这样一段话 Im ...
- Spring Cloud Gateway 跨域 CORS 配置方式实现
网上找了一堆文章全是说这样写无效 globalcors: cors-configurations: '[/**]': allowCredentials: true allowedOriginPatte ...
- 【Flutter】可滚动组件之SingleChildScrollView
前言 SingleChildScrollView类似于Android中的ScrollView,它只能接收一个子组件. 接口描述 const SingleChildScrollView({ Key ke ...
- .net core 和 WPF 开发升讯威在线客服与营销系统：使用 WebSocket 实现访客端通信
本系列文章详细介绍使用 .net core 和 WPF 开发 升讯威在线客服与营销系统 的过程.本产品已经成熟稳定并投入商用. 在线演示环境:https://kf.shengxunwei.com 注意 ...
- Java开发手册之设计规约
1.谨慎使用继承的方式来进行扩展,优先使用聚合/组合的方式来实现.说明:不得已使用继承的话,必须符合里氏代换原则,此原则说父类能够出现的地方子类一定能够出现,比如,"把钱交出来", ...
- 【TOMCAT】windows7下tomcat6环境部署
首先,下载一个tomcat6的部署包 地址http://download.csdn.net/download/imliuqun123/10156942 需要部署安装的win7环境变量: 1.jdk环境 ...
- DataGridView控件使用Demo
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- Hadoop2.7.7阿里云安装部署
阿里云的网络环境不需要我们配置,如果是在自己电脑上的虚拟机,虚拟机的安装步骤可以百度.这里是单机版的安装(也有集群模式的介绍)使用Xshell连接阿里云主机,用命令将自己下载好的安装包上传到服务器 # ...
- 单台服务器-利用docker搭建Redis哨兵集群模式
前言:只有一台华为云服务器,所以打算创建三个容器来模拟三个服务器了. 一:拉取redis镜像 二:拉取redis.conf文件 放在自定义的目录下:wget -c http://download.re ...