给力的Bootstrap篇一
2024-05-10 03:18:00
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Bootstrap demo1：演示页面布局</title>
</head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css"/>
<body><div class="container"><div class="row" style="background-color:green;">顶部</div><div class="row"><div class="col-lg-3 col-sm-4 col-xs-5" style="background-color:#5bc0de;">左</div><div class="col-lg-9 col-sm-8 col-xs-7" style="background-color:#8a6d3b;">右</div></div><div class="row" style="background-color:yellow;">底部</div>
</div></body>
</html>
<!--
知识点：
1.BS里的类，并不只是对应相应的标签，例如btn，也可以用在a标签上
2.BS的布局参数可以实现屏幕自适应性
一列等分为12格
超小设备手机：<768px .col-xs-
小型平板设备：768-992px .col-sm-
中型设备电脑：992-1200px .col-md-
大型设备电脑：>=1200px .col-lg--->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Bootstrap demo2：按钮</title>
</head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<body><div class="container"><div class="row"><!--按钮样式--><div class="col-lg-5"><input type="button" value="按钮" class="btn btn-primary"/><br/><button class="btn">默认</button><br/><button class="btn btn-primary">主要</button><br/><button class="btn btn-info">信息</button><br/><button class="btn btn-success">成功</button><br/><button class="btn btn-warning">警告</button><br/><button class="btn btn-danger">危险</button><br/><button class="btn btn-link">其实我是按钮</button><br/><a class="btn btn-info">其实我是超链接</a><br/><button class="btn btn-warning btn-lg">大小</button><br/><button class="btn btn-warning btn-default">大小</button><br/><button class="btn btn-warning btn-sm">大小</button><br/><button class="btn btn-warning btn-xs">大小</button><br/><button class="btn btn-danger disabled">禁用</button><br/></div></div><div class="row"><div class="col-lg-5"><button class="btn btn-info btn-block">块级</button><br/></div></div></div></body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Bootstrap demo3：图片</title><link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body style="background-color:gray;">
<div class="container"><div class="row"><img src="img/zuozhu.jpg" style="height:300px;width:auto;"/><img class="img-rounded" src="img/zuozhu.jpg" style="height:300px;width:auto;"/><img class="img-circle" src="img/zuozhu.jpg" style="height:300px;width:auto;"/></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Bootstrap demo4：图标（其实是字体，不是icon）</title><link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body>
<div class="container"><div class="row"><i class="glyphicon glyphicon-user text-info"></i><i class="glyphicon glyphicon-remove"></i><i class="glyphicon glyphicon-film text-danger"></i><i class="glyphicon glyphicon-search"></i><i class="glyphicon glyphicon-lock" style="color:red;"></i></div><div class="row"><ul><li><a href="#"><i class="glyphicon glyphicon-pencil"></i> Edit</a></li><li><a href="#"><i class="glyphicon glyphicon-trash"></i> Delete</a></li><li><a href="#"><i class="glyphicon glyphicon-ban-circle"></i> Ban</a></li></ul></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Bootstrap demo5：代码块</title><link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body>
<div class="container"><div class="row"><!--使用code在行内嵌入代码--><span>在springmvc中controller直接返回对象转为json是，配置一下：<code>mvc:annotation-driven</code></span><!--使用pre嵌入多行代码--><pre>package com.entity;public class Person {private int id;private String name;private int age;public int getId() {return id;}public void setId(int id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public int getAge() {return age;}public void setAge(int age) {this.age = age;}}</pre></div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Bootstrap demo6：表格</title><link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body>
<div class="container"><div class="row"><!--默认样式--><div class="col-lg-6"><table class="table"><thead><th>#</th><th>First Name</th><th> Last Name</th><th>Username</th></thead><tr><td>1</td><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><td>2</td><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><td>3</td><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></table></div></div><!--带边框和圆角的样式--><div class="row"><div class="col-lg-6"><table class="table table-bordered"><thead><th>#</th><th>First Name</th><th> Last Name</th><th>Username</th></thead><tr><td>1</td><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><td>2</td><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><td>3</td><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></table></div></div><!--条纹样式--><div class="row"><div class="col-lg-6"><table class="table table-striped"><thead><th>#</th><th>First Name</th><th> Last Name</th><th>Username</th></thead><tr><td>1</td><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><td>2</td><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><td>3</td><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></table></div></div><!--紧凑样式--><div class="row"><div class="col-lg-6"><table class="table table-condensed"><thead><th>#</th><th>First Name</th><th> Last Name</th><th>Username</th></thead><tr><td>1</td><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><td>2</td><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><td>3</td><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></table></div></div><!--默认样式+可选行属性+悬停样式--><div class="col-lg-6"><table class="table table-hover"><thead><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></thead><tr class="success"><td>1</td><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr class="info"><td>2</td><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr class="warning"><td>3</td><td>Larry</td><td>the Bird</td><td>@twitter</td></tr><tr class="danger"><td>3</td><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></table></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Bootstrap demo7：表单</title><link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body>
<div class="container"><div class="row"><div class="col-lg-6"><!--默认是垂直表单--><form role="form" ><div class="form-group"><label for="user">用户名</label><input class="form-control" type="text" name="user" id="user" placeholder="输入用户名"/><label for="pwd">密码</label><input class="form-control" type="password" name="pwd" id="pwd" placeholder="输入密码"/><span class="help-block" style="color:red;">错误信息</span><label>性别</label><div class="radio"><label><input type="radio" name="sex"/>男</label><label><input type="radio" name="sex"/>女</label></div><label>爱好</label><div class="checkbox"><label><input type="checkbox"/>篮球</label><label><input type="checkbox"/>足球</label></div><label>城市</label><select class="form-control"><!--可以加multiple--><option>==请选择==</option><option>北京</option><option>上海</option><option>广州</option><option>深圳</option></select></div></form><!--内联表单--><form class="form-inline"><div class="form-group"><label>用户</label><input class="form-control" type="text"/></div><div class="form-group"><label>密码</label><input class="form-control" type="password"/></div></form><!--水平排列的表单（默认是垂直的）--><form class="form-horizontal"><div class="form-group"><label class="col-lg-2 control-label">用户</label><div class="col-lg-10"><input class="form-control" type="text"></div></div><div class="form-group"><label class="col-lg-2 control-label">密码</label><div class="col-lg-10"><input class="form-control" type="password"></div></div><div class="form-group"><label class="col-lg-2 control-label">性别</label><div class="col-lg-10 radio"><label><input type="radio">男</label><label><input type="radio">女</label></div></div></form></div></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Bootstrap demo8：组件</title><link rel="stylesheet" type="text/css" href="css/bootstrap.css"/><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body><div class="container"><div class="col-lg-12"><div>下拉符<span class="caret"></span></div><div>关闭符<span class="close pull-left" style="color:red;">×</span></div><div><!--标签--><span class="labe label-default">默认标签</span><span class="labe label-primary">主要标签</span><span class="labe label-success">成功标签</span><span class="labe label-info">信息标签</span><span class="labe label-warning">警告标签</span><span class="labe label-danger">危险标签</span><!--徽章--><span class="badge" style="background:red;">8</span></div><div><!--下拉菜单--><div class="dropdown"><button type="button" class="btn dropdown-toggle" data-toggle="dropdown">==请选择== <span class="caret"></span></button><ul class="dropdown-menu"><li class="dropdown-header">标题1</li><li><a href="">java</a></li><li class="divider"></li><li class="dropdown-header">标题2</li><li><a href="">css</a></li></ul></div></div><!--按钮组--><div class="col-lg-12"><div class="btn-group btn-group-lg"><button class="btn btn-primary">按钮1</button><button class="btn btn-success">按钮2</button></div><div class="btn-group-vertical btn-group-sm"><button class="btn btn-primary">按钮1</button><button class="btn btn-success">按钮2</button></div></div><!--输入框组--><div class="col-lg-4"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input class="form-control" type="text" name="user" placeholder="请输入用户名"/></div></div><div class="col-lg-4 col-lg-offset-2"><div class="input-group"><input class="form-control" type="text" name="user" placeholder="请输入搜索内容"/><span class="input-group-addon"><a href=""><i class="glyphicon glyphicon-search"></i></a></span><span class="input-group-btn"><button class="btn btn-primary">搜索</button></span></div></div></div><div class="col-lg-12"><!--列表组--><div class="list-group"><a class="list-group-item active"><h4 class="list-group-item-heading">标题1</h4><p class="list-group-item-text">文本1</p></a><a class="list-group-item"><h4 class="list-group-item-heading">标题2</h4><p class="list-group-item-text">文本2</p></a><a class="list-group-item"><h4 class="list-group-item-heading">标题3</h4><p class="list-group-item-text">文本3</p></a></div></div><div class="col-lg-12"><!--分页--><div><ul class="pagination pagination-md"><li><a href="">首页</a></li><li><a href="">上一页</a></li><li><a href="">1</a></li><li><a href="">2</a></li><li class="active"><a href="">3</a></li><li><a href="">4</a></li><li><a href="">5</a></li><li><a href="">下一页</a></li><li><a href="">尾页</a></li></ul></div></div><div class="col-lg-6"><!-- 警告提示框--><div class="alert alert-warning alert-dismissable in fade"><button class="close" data-dismiss="alert">×</button><a href="#" class="alert-link">警告</a></div><div class="alert alert-info"><a href="#" class="alert-link">信息</a></div><div class="alert alert-success"><a href="#" class="alert-link">成功</a></div></div><div class="col-lg-12"><!--进度条--><div class="progress progress-striped active"><div class="progress-bar progress-bar-success" style="width:30%;"></div></div></div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Bootstrap demo9：面板，导航栏</title><link rel="stylesheet" type="text/css" href="css/bootstrap.css"/><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/bootstrap.js"></script><script type="text/javascript">$(function(){$("*[data-toggle='tooltip']").tooltip();//启用$("*[data-toggle='popover']").popover();//启用});</script>
</head>
<body>
<div class="container"><div class="col-lg-6"><!--面板--><div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title">标题</h3></div><div class="panel-body">内容</div><div class="panel-footer">尾部</div></div></div><div class="col-lg-12"><!--导航栏--><nav class="navbar navbar-default"><div class="navbar-header"><a href="#" class="navbar-brand">搜狗音乐</a></div><div><ul class="nav navbar-nav"><li><a href="#">华语</a></li><li class="active"><a href="#">港台</a></li><li><a href="#">欧美</a></li></ul></div></nav></div><div class="col-lg-6"><!--响应式导航栏--><nav class="navbar navbar-default"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mydiv"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="#" class="navbar-brand">搜狗音乐</a></div><div class="collapse navbar-collapse" id="mydiv"><ul class="nav navbar-nav"><li class="active"><a href="#"><i class="glyphicon glyphicon-home"></i>首页</a></li><li><a href="#">华语</a></li><li><a href="#">港台</a></li><li><a href="#">欧美</a></li></ul></div></nav></div><div class="col-lg-12"><!--面包屑--><ol class="breadcrumb"><li><a href=“#”>首页</a></li><li><a href=“#”>联系我们</a></li><li class=“active”>七里街</li></ol></div><div class="col-lg-12"><!--标签页--><ul id="myTab" class="nav nav-tabs"><li class="active"><a href="#" data-toggle="tab">选项一</a></li><li><a href="#" data-toggle="tab">选项二</a></li><li><a href="#" data-toggle="tab">选项三</a></li></ul></div><div class="col-lg-12"> </div><div class="col-lg-12"><!--带有内容的标签页--><ul id="myTab2" class="nav nav-tabs"><li class="active"><a href="#a" data-toggle="tab">选项一</a></li><li><a href="#b" data-toggle="tab">选项二</a></li><li><a href="#c" data-toggle="tab">选项三</a></li></ul><div class="tab-content"><div class="tab-pane fade in active" id="a">选项一的内容</div><div class="tab-pane fade" id="b">选项二的内容</div><div class="tab-pane fade" id="c">选项三的内容</div></div></div><div class="col-lg-6"><!--组合面板--><div div="parent" class="panel-group"><div class="panel panel-primary"><div class="panel-heading"><h4 class="panel-title"><a href="#p1" data-toggle="collapse" data-parent="parent">面板1</a></h4></div><div id="p1" class="panel-collapse collapse in" ><div class="panel-body">面板一的内容</div></div></div><div class="panel panel-success" style="margin:0;"><div class="panel-heading"><h4 class="panel-title"><a href="#p2" data-toggle="collapse" data-parent="parent">面板2</a></h4></div><div id="p2" class="panel-collapse collapse" ><!--此处不加in，默认是折叠的--><div class="panel-body">面板二的内容</div></div></div></div></div><div class="col-lg-12"><!--提示工具--><span data-toggle="tooltip" title="提示信息" data-placement="top">博为峰</span><span data-toggle="popover" title="提示信息" data-placement="top" data-content="详细内容">博为峰</span><button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button></div><div class="col-lg-12"><!--提示工具扩展--><span id="sp1" data-toggle="popover" title="提示内容" data-placement="top" data-content="扩张内容">请点击</span></div><script>$("#sp1").popover()</script>
</div>
</body>
</html>
给力的Bootstrap篇一相关推荐
- 21世纪初最有影响力的20篇计算机视觉期刊论文 及 邓亚峰老师关于人脸识别方面总结
http://www.cnblogs.com/youth0826/archive/2012/12/04/2801481.html 选取论文的原则: (1)期刊论文,主要来源于以下期刊:TPAMI,IJ ...
- Big-man的Bootstrap篇(二)
Big-man的Bootstrap篇(二) 前言: Big-man突然想要去深入地了解一下Bootstrap这个应用框架,毕竟很强大的技术需要更加仔细地推敲,才能发现其中蕴含的更强大的能量. Boot ...
- Big-man的Bootstrap篇(一)
Big-man的Bootstrap篇(一) 前言: 与Bootstrap的邂逅: Big-man信奉的是他自己去寻找他自己想要的样式, 简单的说法就是他自己手写他自己想要的样式(CSS/Less/Sc ...
- 重磅！Google学术发布2019年最有影响力的7篇论文！
点上方蓝字计算机视觉联盟获取更多干货 在右上方 ··· 设为星标 ★,与你不见不散 来源于联盟博士翻译总结 正文共:7179 字 21 图 预计阅读时间: 18 分钟 ...
- 前端那些事之Bootstrap篇
2019独角兽企业重金招聘Python工程师标准>>> Bootstrap是什么? * Twitter 官方推出一套 css 的框架* 它能快速帮我们快速开发出一套风格绚丽的网站* ...
- 21世纪初最有影响力的20篇计算机视觉期刊论文
仅供参考!实际上,排名类的事情都很难保证客观.这篇文章仅供一个引子,以便大家了解一些知名论文. 选取论文的原则: (1)期刊论文,主要来源于以下期刊:TPAMI,IJCV,TIP,CVIU,IVC,M ...
- 【重大更新】DevExpress v17.2新版亮点—Bootstrap篇（二）
用户界面套包DevExpress v17.2日前终于正式发布,本站将以连载的形式为大家介绍各版本新增内容.本文将介绍了Bootstrap Controls v17.2 的CardView.Charts ...
- DevExpress v18.1新版亮点——ASP.NET Bootstrap篇（二）
2019独角兽企业重金招聘Python工程师标准>>> 用户界面套包DevExpress v18.1日前终于正式发布,本站将以连载的形式为大家介绍各版本新增内容.本文将介绍了DevE ...
- Google学术发布2019年最有影响力的7篇论文（附下载链接）
最近Google Scholar发布了被引用最多的论文排名,排名揭示了一个重要信息:围绕人工智能(AI)的研究兴趣正在飞速增长. 1."Deep Residual Learning for ...
最新文章
- 关于js选项卡的一些问题
- 爆料：当我们跟VC聊天时，他们都会问些什么？
- GET和POST有什么区别？
- linux 视频学习
- nginx反向代理初探
- win10 python免安装_使用Python编写免安装运行时、以Windows后台服务形式运行的WEB服务器...
- 解决vSphere性能不佳的技巧
- Static 静态内部类
- 老李分享知识：性能测试之TPS和吞吐率
- [实验手册]用2500路由器做自动安装实验
- 【perl脚本】单行循环正则匹配
- Awvs 12.x安装教程及常见问题
- 西门子S7系列PLC的主要种类及应用软件
- 10款最赞的ROS机器人操作系统课程+为何ROS不是必须的
- 干货 | Elasticsearch 8.X 版本升级指南
- Win11怎么以管理员身份运行？Win11以管理员身份运行的设置方法
- LeetCode07整数反转（JAVA）
- Xbox 360抢鲜测评
- 打印机无法双面打印处理办法
- mysql汉字对应字段_mysql和SqlServer 中取得汉字字段的各汉字首字母
热门文章
- Ubuntu下安装splint工具
- 【考研经验】2018华东师范大学软件工程学硕初试复试一览（考408）
- Azure-创建AKS集群
- 计算机保研er联系导师迷惑行为大赏
- java 带横杠或下划线_的数据库字段变驼峰，比如ID_CARD_INFO_TITLE转换成idCardInfoTitle
- 两个for循环执行顺序判断，超详细！
- android jni 发送短信,android5.0以上版本如何直接发送短信？
- 在线flash转html5,Safari插件推荐:自动转Flash为Html5
- 区块链100讲：SSL协议之数据加密过程详解
- 计算机图形学最基本知识,计算机图形学基础知识重点整理.doc