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">&times;</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>
View Code

触发模态框发生的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 代码。

Dropdown 

 

<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>
View Code

 模态框

注意按键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 按键类型是 buttonLaunch 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">&times;</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>
View Code

 

转载于:https://www.cnblogs.com/wangkun122/p/8254037.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/368226.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

监控整页，非AJAX，要求通知

监控整页，非AJAX，要求通知

最近&#xff0c;在JSF中开发新图表和图表“导出服务”时&#xff0c;我遇到了一个非常普遍的问题。 当您执行长时间运行的任务&#xff08;操作&#xff09;时&#xff0c;您希望在开始时显示状态“请稍候……”对话框&#xff0c;并在响应到达时最后关闭此对话框。 对于AJAX请…
阅读更多...
java图形界面的监听_非专业码农 JAVA学习笔记 用户图形界面设计与实现-所有控件的监听事件...

java图形界面的监听_非专业码农 JAVA学习笔记 用户图形界面设计与实现-所有控件的监听事件...

用户图形界面设计与实现-监听事件System.applet.Applet(一)用户自定义成分1.绘制图形Public voit piant(Ghraphics g){ g.drawLine等图形名称(坐标1234);g.file图形名(坐标123)}2.设置字体-Font类(1)定义font&#xff1a;Font myfontnew Font(“字体”,”样式”,字号);例如&am…
阅读更多...
Linux学习笔记006-启动流程

Linux学习笔记006-启动流程

linux 启动流程 centos6 1.post 加电质检-->2.启动bios-->3.加载MBR-->4GRUB引导-->5.加载kernel-->6.设定启动级别-->7.加载rc.sysinit-->8.加载内核模块-->9.启动运行级别程序-->10.读取rc.local-->11.加载/bin/login 1.bios自检 2.读取bios记…
阅读更多...
谈谈常用清除浮动的方法

谈谈常用清除浮动的方法

我们在做页面布局的时候&#xff0c;经常需要利用浮动来实现一些布局效果&#xff0c;这样带来的后果就会导致父元素丢失宽度。今天我们就来说说‘找回‘宽度的方法。 而清除浮动后的效果应该是这样的请看&#xff1a; 下面就说说方法&#xff0c;方法其实有非常的多&#xf…
阅读更多...
并行运行单元测试

并行运行单元测试

大约是时候单元测试的开发人员能够使用批注在Parallel中运行测试。 在今天的博客文章中&#xff0c;我们将介绍如何使用Easytest提供的注释使传统的Junit测试并行运行。 易测 是在JUnit之上构建的测试框架&#xff0c;可让您轻松编写和维护测试。 它专注于为您的应用程序编写…
阅读更多...
java 插件开发 互相依赖_java – Eclipse插件开发：有没有办法控制有关我的插件缺少依赖项的安装程序消息？...

java 插件开发 互相依赖_java – Eclipse插件开发：有没有办法控制有关我的插件缺少依赖项的安装程序消息？...

我正在开发一个依赖于Eclipse平台4.2(Juno)的eclipse插件,并且不能安装在旧版本的eclipse上.当用户尝试在旧eclipse上安装我的插件(通过更新站点)时,Eclipse安装程序会阻止他并显示以下消息&#xff1a;Cannot complete the install because one or more required items could …
阅读更多...
巧用CSS实现分隔线

巧用CSS实现分隔线

下面是几种简单实现分隔线的方法&#xff0c;个人比较喜欢第二种&#xff0c;我也给出了最后第五种比较2的写法&#xff0c;请大家拍砖&#xff0c;或者提供其他好的方法。 单个标签实现分隔线&#xff1a; 点此查看实例展示 .demo_line_01{padding: 0 20px 0;margin: 20px 0;…
阅读更多...
ArcGIS API For JS之网络分析（临近设施分析）

ArcGIS API For JS之网络分析（临近设施分析）

ArcGIS 提供两种网络分析&#xff0c;即基于Geometric Network的有向网络或者设施网络和基于Network Dataset的无向网络&#xff0c;在这里网络的分析指后者&#xff0c;ArcGIS api支持网络分析中的最短路径分析、服务区分析、临近设施分析。本文主要讲的是临近设施分析&#x…
阅读更多...
UWP DEP0700: 应用程序注册失败。[0x80073CF9] 另一个用户已安装此应用的未打包版本。当前用户无法将该版本替换为打包版本。...

UWP DEP0700: 应用程序注册失败。[0x80073CF9] 另一个用户已安装此应用的未打包版本。当前用户无法将该版本替换为打包版本。...

最近电脑抽风&#xff0c;我在【应用程序和功能】中重置了以下我的App自然灾害&#xff0c;居然&#xff0c;搞出大新闻了。 它居然从列表中消失了。。。 vs再次编译代码的时候&#xff0c;提示 严重性 代码 说明 项目 文件 行 禁止显示状态 错误 DEP…
阅读更多...
泽西岛的RESTful Web服务

泽西岛的RESTful Web服务

我已经讨论了有关体系结构注意事项<< link >>的早期文章&#xff0c;以成为可在我的系统/机器上使用的分布式环境上的RESTful系统。 本文我们将讨论如何基于REST体系结构考虑来构建Web服务。 本教程说明了如何使用Tomcat 6&#xff0c;Eclipse和Jersey JAX-RS&…
阅读更多...
java swing是什么意思英语_swing是什么意思_swing翻译_读音_用法_翻译

java swing是什么意思英语_swing是什么意思_swing翻译_读音_用法_翻译

vipkid提供swing是什么意思、swing英语单词推荐、swing英语解释、swing相关词、swing英语短语英音 [swɪŋ] 美音 [swɪŋ]【中文释义】vt.& vi. (使)摇摆;(使)摇荡;n. 摇摆&#xff0c;摆动;摆程&#xff0c;振幅;秋千;音律;vt. 使旋转;使做曲线运动;挥舞;悬吊;vi. 悬摆;迅…
阅读更多...
css水平垂直居中（绝对定位居中）

css水平垂直居中（绝对定位居中）

使用绝对定位有个限制就是父集必须设置一个固定的高度。 首先HTML 1 <div id"box"> 2 <div class"child"></div> 3 </div> CSS 1 #box {2 position: relative;3 height: 500px;4 background: red;5 }6 .chil…
阅读更多...
Servlet3.0的文件上传功能

Servlet3.0的文件上传功能

在Servlet3.0之前&#xff0c;文件上传需要借助于第三方插件&#xff0c;在Servlet3.0之后&#xff0c;Servlet本身开始支持文件上传功能。 获取上传的文件可以通过HTTPServletRequest的getPart和getParts两个方法实现&#xff0c;前者接受一个表单名为参数&#xff0c;返回对应…
阅读更多...
洛谷 2719 搞笑世界杯

洛谷 2719 搞笑世界杯

洛谷 2719 搞笑世界杯 洛谷原题链接 这道难度只有普及-的题目却花了我一个多小时才搞出来。但做出来之后就会发现&#xff1a;其实这题确实挺水。。。 解题思路&#xff1a; 首先开二维数组 dp [ i ] [ j ] . 代表已售 i 张 A , j 张 B 时后两人买到的票相同的概率。 很显然&am…
阅读更多...
Java FutureTask示例程序

Java FutureTask示例程序

有时我写了一篇有关Java Callable Future接口的文章&#xff0c;我们可以使用它来获得线程的并发处理优势&#xff0c;以及它们能够将值返回给调用程序。 FutureTask是Future接口的基础具体实现&#xff0c;并提供异步处理。 它包含启动和取消任务的方法&#xff0c;以及可以返…
阅读更多...
java 日期类代码_java 日期时间处理类

java 日期类代码_java 日期时间处理类

import java.util.Calendar;import java.sql.Date;import java.text.SimpleDateFormat;import java.text.ParseException;/*** Utility to date time* version 0.1* author Super Zhao*/public class DateTimeUtil{/*** 由java.util.Date到java.sql.Date的类型转换* param date…
阅读更多...
搭建SSH框架–使用篇

搭建SSH框架–使用篇

创建如下包&#xff1a; action用于响应请求 service则是提供请求的操作 dao用于操作数据库 entity用于映射数据库表 打开DB Browser –> personalCD&#xff08;创建篇的数据库连接&#xff09;–> SCOTT –> TABLE –> t_USER –> 右键Hibernate Reverse……
阅读更多...
Hadoop HA集群的搭建

Hadoop HA集群的搭建

HA 集群搭建的难度主要在于配置文件的编写&#xff0c; 心细&#xff0c;心细&#xff0c;心细&#xff01; ha模式下&#xff0c;secondary namenode节点不存在... 集群部署节点角色的规划&#xff08;7节点&#xff09;------------------server01　　 namenode　　 zkfcserv…
阅读更多...
3个简单步骤即可测试Java 8

3个简单步骤即可测试Java 8

即将发布的Java 8版本为Java开发人员带来了许多新功能&#xff0c;但是升级时始终存在代码破裂的风险。 我们都记得Java 7发行时有一系列非常严重的错误 。 当然&#xff0c;我们所有人都可以帮助避免在Java 8中出现相同的问题。我今天要介绍的方法是使用现有的Continuous Int…
阅读更多...
php接收get参数false是字符串,php解析url (parse_url) 参数成数组 (parse_str)

php接收get参数false是字符串,php解析url (parse_url) 参数成数组 (parse_str)

php解析url (parse_url) 参数成数组 (parse_str)(1)parse_url (PHP 4, PHP 5) — 解析 URL&#xff0c;返回其组成部分&#xff0c;函数原型如下&#xff1a;mixed parse_url ( string $url [, int $component -1 ] )本函数解析一个 URL 并返回一个关联数组&#xff0c;包含在…
阅读更多...
最新文章

Copyright @ 2022~2023