day 60 Bootstrip学习
图标地址
http://fontawesome.io/icons/
图标用法地址
http://fontawesome.io/examples/
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="stylesheet" href="Font-Awesome-master/css/font-awesome.min.css">
//这句是引入图标
<link rel="stylesheet" href="../day%2058%20bootstrip/bootstrap-3.3.7-dist/css/bootstrap.min.css">
//这句是引入bootstrap的写法
</head>
<body>
//通过这两句实现了带删除图标的按键 将a标签弄成一个按钮 <a class="btn btn-danger" href="#">
<i class="fa fa-trash-o fa-lg"></i> Delete</a> <script src="../day%2058%20bootstrip/jquery-3.2.1.min.js"></script>
<script src="../day%2058%20bootstrip/bootstrap-3.3.7-dist/js/bootstrap.min.js "></script>
</body>
</html>
弹出模态框
模态框和绑定模态框的按钮
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button> <!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
触发模态框发生的JS代码 注意要引入Bootstrap的min.js文件
<script src="../day%2058%20bootstrip/jquery-3.2.1.min.js"></script>
<!--除了要引入jQuery 还要引入bootstrap 的js 文件-->
<script src="../day%2058%20bootstrip/bootstrap-3.3.7-dist/js/bootstrap.min.js "></script>
<script> //注意弹出模态框的写法。 .modal这个是固定的写法，后边的也是固定写法
$("#myModal").modal({
backdrop: true,
keyboard: false
}); </script>
下拉菜单（用到了ul ）
http://v3.bootcss.com/components/
将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
//小三角
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
//分割线
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
创建表单代码 内有重要结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="stylesheet" href="Font-Awesome-master/css/font-awesome.min.css">
<link rel="stylesheet" href="../day%2058%20bootstrip/bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<!--页头-->
<div class="page-header">
<h1>信息卡收集
<small>共三步</small>
</h1>
</div>
<!--进度条-->
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 30%;">
30%
</div>
</div>
面板
<div class="panel panel-primary">
<!--面板内容-->
<!--起始框-->
<div class=" panel-heading">
<h3 class="panel-title">基本信息<span class="glyphicon glyphicon-pushpin pull-right" aria-hidden="true"></span>
</h3> </div>
<!--剩下的空间-->
<div class="row panel-body ">
<!--设置表单块 占据左半边而且像右偏移-->
<div class="col-md-offset-1 col-md-4">
<!--表单-->
<form class="form-horizontal">
<!--姓名-->
<div class="form-group">
<!--这里注意设置成块级的 label占3个位置-->
<label for="inputName" class="col-sm-3 control-label">姓名</label>
<!--输入框在9个位置-->
<div class="col-sm-9">
<input type="text" class="form-control" id="inputName" placeholder="姓名">
</div>
</div>
<!--手机号-->
<div class="form-group">
<label for="inputNumber" class="col-sm-3 control-label">手机</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputNumber" placeholder="请输入手机号">
</div>
</div>
<!--Email-->
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">邮箱</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="inputEmail3" placeholder="请输入邮箱">
</div>
</div>
<!--密码-->
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">密码</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="inputPassword3" placeholder="请输入密码">
</div>
</div>
<!--上传-->
<div class="form-group">
<!---->
<label for="exampleInputFile" class="col-sm-3 control-label">头像</label>
<div >
<input class=" col-md-offset-0.3" type="file" id="exampleInputFile">
<p class="help-block col-md-offset-3">Example block-level help text here.</p>
</div> </div>
<!--选项-->
<div class="form-group">
<label class="col-md-2 col-md-offset-1">选择</label>
<div class="checkbox col-md-6">
<label>
<input type="checkbox"> Check me out
</label>
<label>
<input type="checkbox"> Check me out
</label>
<label>
<input type="checkbox"> Check me out
</label>
</div>
</div>
<!--按钮-->
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div> <script src="../day%2058%20bootstrip/jquery-3.2.1.min.js"></script>
</body>
</html>
模态框
注意按键button 中代码要这样写
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
还有就是 模态框一定要是body的直系子元素，才能正常弹出<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
//注意，目标一定模态框的ID 按键类型是 button
Launch demo modal
</button> <!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
day 60 Bootstrip学习的更多相关文章
- Directx11教程(60) tessellation学习(2)
原文:Directx11教程(60) tessellation学习(2) 本教程中,我们开始tessellation编程,共实现了2个程序,第一个tessellation程序,是对一个三 ...
- 20155308 2016-2017-2 《Java程序设计》第9周学习总结
20155308 2016-2017-2 <Java程序设计>第9周学习总结 教材学习内容总结 第十六章 整合数据库 16.1 JDBC入门 驱动的四种类型 JDBC-ODBC Bridg ...
- 20155238 2016-2017-2 《Java程序设计》第四周学习总结
教材学习内容总结 继承 extends public class SwordsMan extends Role 检查语法逻辑,从=右边向左边读.编译程序就是语法检查器. 重新定义行为 public v ...
- 学号20155308 2016-2017-2 《Java程序设计》第7周学习总结
学号20155308 2016-2017-2 <Java程序设计>第7周学习总结 教材学习内容总结 第十二章 使用Optional代替null 标准API的函数接口 API 功能 Cons ...
- 20155308 2016-2017-2 《Java程序设计》第8周学习总结
20155308 2016-2017-2 <Java程序设计>第8周学习总结 教材学习内容总结 第十四章 NIO与NIO2 NIO(New IO)-from JDK1.4 NIO2 -fr ...
- 20155305乔磊2016-2017-2《Java程序设计》第三周学习总结
20155305乔磊 2016-2017-2 <Java程序设计>第三周学习总结 教材学习内容总结 对象(Object):存在的具体实体,具有明确的状态和行为 类(Class):具有相同属 ...
- 国内首本免费深度学习书籍！还有人没Get么？
这本书的作者很有趣鸭. 一开篇别的不说,先跟大家讲哲学,讨论人工智能实现的可能性.摘录一些他的结论: 人工智能可以实现 自由意志并不存在 量子力学并不能证明自由意志的存在 幸福感和物质水平提高并没有绝 ...
- MySQL 中 where id in (1,2,3,4,...) 的效率问题讨论
MySQL ACMAIN_CHM06-26 16:36 等级 84次回复 [求证&散分]MySQL 中 where id in (1,2,3,4,...) 的效率问题讨论 庆祝本月大版得 ...
- 第08组 Alpha事后诸葛亮
组长博客 点这里! 总结思考 设想和目标 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 弥补Powerpoint中模板转换存在的缺陷,完善PPT模板一键转换的功能 ...
随机推荐
- Java 安装后的检测是否安装成功
下载安装JDK(Java SE development Kit) Java是有sun公司发行的编程语言,JDK的官方下载地址为:http\\ java.sun.com 昨天选择下载的是jdk-8u10 ...
- ssm使用双数据源
工作中需要接入其他公司业务系统的数据进行分析,于是接入它们的db. 使用双数据源配置感觉如下: database.sessionFactory.扫描器.事务管理器等双份. 听说如果两个数据源需要一起使 ...
- 2019.3.22 Week 11 : ZigBee power test and field test
Test require Zigbee sample:EFR32MG13 (RF layout has ) Gateway N4010A : 2.5Ghz 1Power test 2Field te ...
- Day8作业及默写
1,有如下文件,a1.txt,里面的内容为: 老男孩是最好的培训机构, 全心全意为学生服务, 只为学生未来,不为牟利. 我说的都是真的.哈哈 分别完成以下的功能: 将原文件全部读出来并打印. with ...
- 用Java批量重命名文件
要事先在C盘里创建“照片”和“照片1”两个文件夹 1import java.io.*; public class Jack { public static void main(String[] arg ...
- wx小程序用canvas生成图片流程与注意事项
1.需要画入canvas的 图片都需要先缓存到本地 let ps = [] ps.push(that.loadImageFun(this.statusInfo.avatar_url, "he ...
- SpringBoot 添加fastjson
1.先在项目中添加fastjson依赖: <dependency> <groupId>com.alibaba</groupId> <artifactId> ...
- Dubbo浅谈
一.高并发的解决 1.高并发:很多人同时访问. 2.高并发产生的性能瓶颈: tomcat支持的controller,解决办法:多个tomcat共同支撑.(tomcat集群) 只有一个service被调 ...
- 从输入URL到页面加载发生了什么？
总体来说分为以下几个过程: DNS解析 TCP连接 发送HTTP请求 服务器处理请求并返回HTTP报文 浏览器解析渲染页面 连接结束 具体内容点这里
- SQL注入之Sqli-labs系列第二关
废话不在多说 let's go! 继续挑战第二关(Error Based- Intiger) 同样的前奏,就不截图了 ,and 1=1和and 1=2进行测试,出现报错 还原sql语句 查看源代 ...