前端-bootstrap-长期维护
############### bootstrap简介 ################
Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。
它是为实现快速开发Web应用程序而设计的一套前端工具包。
在使用Bootstrap之后: 各种命名都统一并且规范化。 页面风格统一,画面和谐。
中文地址:http://www.bootcss.com/,下载用于生产环境的 Bootstrap
############### bootstrap布局容器和栅格系统 ################
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>bootstrap第一个示例</title>
<!--条件这个viewport来适应手机等移动端屏幕的展示-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<style>
.row div {
border: 1px solid red;
}
</style>
</head>
<body> <!--
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。
<div class="container-fluid"> :用于 100% 宽度,占据全部视口(viewport)的容器。
-->
<div class="container">
<!--栅格系统:
每一行分成12列,
可以定义每一个标签占据的列数col-md-1,中等屏幕桌面显示器,col-xs-4,超小屏幕手机
--> <!--“行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,-->
<div class="row"> <!--可以定义每一个标签占据的列数col-md-1,中等屏幕桌面显示器,col-xs-4,超小屏幕手机-->
<div class="col-md-1 col-xs-4">占1列</div>
<div class="col-md-10 col-xs-4">占10列</div>
<div class="col-md-1 col-xs-4">占1列</div>
</div>
<div class="row">
<!--使用 .col-md-offset-* 类可以将列向右侧偏移。-->
<div class="col-md-5 col-md-offset-2">第二行 左边空两列</div>
</div>
<div class="row">
<div class="col-md-3">占3列的div</div>
<div class="col-md-6">占6列的div</div>
<!--如果在一个 .row 内包含的列(column)大于12个,包含多余列(column)的元素将作为一个整体单元被另起一行排列。-->
<div class="col-md-6">占6列的div</div>
</div>
<div class="row">
<!--可以往前推-->
<div class="col-md-3 col-md-push-9">占3列的div</div>
<div class="col-md-6">占6列的div</div>
</div>
</div> <script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script> </body>
</html>
############### bootstrap媒体查询-这是能够根据不同设备适配的原理 ################
<!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>
<style>
.c {
height: 100px;
width: 100px;
}
.c1 {
background-color: red;
} /*当打开网页的设备是一个显示器设备,并且显示器的宽度小于600px时,使用下面的样式*/
@media screen and (max-width: 400px) {
.c1 {
background-color: green;
}
}
</style> </head>
<body>
<div class="c c1"></div>
</body>
<html>
############### bootstrap的常用样式 ################
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body> <div class="container"> <!--HTML 中的所有标题标签,<h1> 到 <h6> 均可使用-->
<h1>h1. Bootstrap heading
<!--在标题内还可以包含 <small> 标签或赋予 .small 类的元素,可以用来标记副标题。-->
<small>Secondary text</small>
</h1>
<h2>h2. Bootstrap heading
<small>Secondary text</small>
</h2>
<h3>h3. Bootstrap heading
<small>Secondary text</small>
</h3>
<h4>h4. Bootstrap heading
<small>Secondary text</small>
</h4>
<h5>h5. Bootstrap heading
<small>Secondary text</small>
</h5>
<h6>h6. Bootstrap heading
<small>Secondary text</small>
</h6> <!--<p> (段落)元素还被设置了等于 1/2 行高(即 10px)的底部外边距(margin)。-->
<p>
世情薄,人情恶,世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶
</p> <!--通过添加 .lead 类可以让段落突出显示。变大,变粗-->
<p class="lead">
世情薄,
<!--对于被删除的文本使用 <del> 标签。-->
<del>人情恶</del>
,世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶
</p> <!--use the <mark> tag.高亮显示-->
<p>高亮坐在我的
<mark>右边</mark>
!
</p> <!--通过这几个类可以改变文本的大小写。-->
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p> <!--让联系信息以最接近日常使用的格式呈现。在每行结尾添加 <br> 可以保留需要的样式。-->
<address>
<strong>luffycity, Inc.</strong><br>
沙河地铁站往南走1500米,路左侧<br>
赋腾国际创客中心A座2005<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address> <address>
<strong>Alex Li</strong><br>
<a href="mailto:#">first.last@example.com</a>
</address> <!--添加 <footer> 用于标明引用来源。来源的名称可以包裹进 <cite>标签中。-->
<blockquote>
<p>技术的提升只是量的积累,思想的提升才是质的飞跃。</p>
<footer>老男孩思想</footer>
</blockquote> <!--将所有元素放置于同一行。-->
<ul class="list-inline">
<li>111</li>
<li>222</li>
<li>333</li>
</ul> <!--带有描述的短语列表。-->
<dl class="dl-horizontal">
<dt>Alex Li</dt>
<dd>抽烟 烫头 大马猴</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
<dt>Felis euismod semper eget lacinia</dt>
<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet
risus.
</dd>
</dl>
</div> <!--通过 <code> 标签包裹内联样式的代码片段。-->
<code><div></code>
<code>print("hello world!")</code> <!--通过 <kbd> 标签标记用户通过键盘输入的内容。-->
<p>按住键盘上的<kbd>ctrl</kbd>键,就支持批量操作</p> <!--添加 .table-bordered 类为表格和其中的每个单元格增加边框。-->
<!--通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。-->
<!--通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。-->
<!--通过添加 .table-condensed 类可以让表格更加紧凑,单元格中的内补(padding)均会减半。-->
<table class="table table-bordered table-striped table-hover table-condensed">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!--通过这些状态类可以为行或单元格设置颜色。-->
<!--
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作
-->
<tr class="success">
<td>1</td>
<td>Egon</td>
<td>街舞</td>
<td>
<button class="edit-btn">编辑</button>
<button class="delete-btn">删除</button>
</td>
</tr>
<tr class="error">
<td>2</td>
<td>Alex</td>
<td>烫头</td>
<td>
<button class="edit-btn">编辑</button>
<button class="delete-btn">删除</button>
</td>
</tr> </tbody>
</table>
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
############### bootstrap登陆页面实例 ################
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>登录注册示例</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<style>
body {
background-color: #eee;
} #login-box {
margin-top: 100px;
}
</style>
</head>
<body> <div class="container">
<div class="row">
<div id="login-box" class="col-md-4 col-md-offset-4">
<h3 class="text-center">请登录</h3>
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Email</label>
<div class="col-sm-9 has-error">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
<span class="help-block">邮箱不能为空</span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Password</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-primary ">Sign in</button>
</div>
</div>
</form>
</div>
</div>
</div> <script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
############### bootstrap组件-fontawesome图标 ################
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Font-awesome</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <!--引入font-awesome这是一个地址
也可以下载到本地,-->
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body> <div class="container">
<!--
bootstrap的组件,那些小图标,一般不用他的,我们使用fontawesome
-->
<i class="fa fa-weixin" style="color: green"></i>
<i class="fa fa-weibo" aria-hidden="true"></i>
<i class="fa fa-weibo fa-lg" aria-hidden="true"></i>
<i class="fa fa-weibo fa-2x" aria-hidden="true"></i>
<i class="fa fa-weibo fa-3x" aria-hidden="true"></i>
<i class="fa fa-weibo fa-5x" aria-hidden="true"></i>
<i class="fa fa-weibo fa-5x fa-rotate-90" aria-hidden="true"></i>
<i class="fa fa-weibo fa-5x fa-rotate-180" aria-hidden="true"></i>
<i class="fa fa-weibo fa-5x fa-rotate-270" aria-hidden="true"></i>
<i class="fa fa-weibo fa-5x fa-flip-horizontal" aria-hidden="true"></i>
<i class="fa fa-weibo fa-5x fa-flip-vertical" aria-hidden="true"></i> <span class="fa-stack fa-5x">
<i class="fa fa-weibo fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span> <button class="btn btn-danger"><i class="fa fa-trash-o"></i> 删除</button> <div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i> 主页</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i> 分类</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> 应用</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> 设置</a>
</div> <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span> <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span> <i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span> <i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span> <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
############### bootstrap组件-常用组件 ################
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<style>
#d1 {
background-color: red;
}
#d2 {
background-color: yellow;
}
#d3 {
background-color: deeppink;
}
</style>
<!--
地址:https://v3.bootcss.com/components/
字体图标,使用fontawesome
按钮,下拉菜单,按钮式的下拉菜单
输入框,导航条,面包屑路径式的导航条,
分页,标签,
进度条,列表,面板,太多了,使用这个,可以使得这个页面高大上,
--> </head>
<body>
<div class="container">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Middle2</button>
<button type="button" class="btn btn-default">Right</button>
</div> <!--标签页-->
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#d1" data-toggle="tab">个人主页</a></li>
<li role="presentation"><a href="#d2" data-toggle="tab">个人详情页</a></li>
<li role="presentation"><a href="#d3" data-toggle="tab">消息页面</a></li>
</ul> <div class="tab-content">
<div role="tabpanel" id="d1" class="tab-pane active">这是个人主页</div>
<div role="tabpanel" id="d2" class="tab-pane">这是一个详情页</div>
<div role="tabpanel" id="d3" class="tab-pane">消息页面</div>
</div> <ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Help</a></li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<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>
</li>
</ul>
</div> <script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
############### bootstrap的js插件 ################
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body> <!--
bootstrap的js插件
1,轮播图
2,模态框 --> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol> <!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="./imgs/banner_1.jpg" alt="...">
<div class="carousel-caption">
<h1>第一页介绍</h1>
<p>老实人的恶毒,像...</p>
</div>
</div>
<div class="item">
<img src="./imgs/banner_2.jpg" alt="...">
<div class="carousel-caption"> </div>
</div>
<div class="item">
<img src="./imgs/banner_3.jpg" alt="...">
<div class="carousel-caption">
</div>
</div>
</div> <!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div> <hr>
<button class="btn btn-success" data-toggle="modal" data-target="#i1">点我弹出</button> <div id="i1" class="modal fade" tabindex="-1" role="dialog">
<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">模态框</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script src="jquery-3.2.1.min.js"></script>
<!--使用bootstrap的js插件,需要引入这个bootstrap的js文件,-->
<script src="bootstrap/js/bootstrap.min.js"></script>
<script>
$('.carousel').carousel({
interval: 2000
});
</script>
</body>
</html>
############### 结束线 ################
前端-bootstrap-长期维护的更多相关文章
- python操作三大主流数据库(4)python操作mysql④python服务端flask和前端bootstrap框架结合实现新闻展示
python操作mysql④python服务端flask和前端bootstrap框架结合实现新闻展示 参考文档http://flask.pocoo.org/docs/0.11/http://flask ...
- Golang 谷歌搜索api 实现搜索引擎(前端 bootstrap + jquery)
Golang 谷歌搜索api 实现搜索引擎(前端 bootstrap + jquery) 体验 冒号搜索 1. 获取谷歌搜索api 谷歌搜索api教程 2. 后台调用 程序入口 main.go // ...
- 基于asp.net(C#)MVC+前端bootstrap+ztree+lodash+jquery技术-Angel工作室通用权限管理
一.Angel工作室简单通用权限系统简介 AngelRM(Asp.net MVC Web api)是基于asp.net(C#)MVC+前端bootstrap+ztree+lodash+jquery技术 ...
- 前端-BootStrap
bootstrap 英 /'buːtstræp/ 美 /'bʊt'stræp/ n. [计] 引导程序,辅助程序:解靴带 关于 BootCDN BootCDN 是 Bootstrap 中文网支持并维护 ...
- 前端——Bootstrap
Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包. 以前自己写的html的 ...
- web前端----Bootstrap框架
Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包. 它支持响应式布局,并且 ...
- tips 前端 bootstrap 嵌套行 嵌套列 溢出 宽度不正确 栅格化系统计算
bootstrap 当嵌套列时 有时会出现很奇异的row 的width不对问题出现的情况时 <div class="row" > <!--row a--> ...
- 前端:Bootstrap框架
一,bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包. 它支持响应式布局, ...
- web前端-bootstrap
1.什么是bootstrap 前端开发开源工具包 ,包含css样式库+jq插件 ,ui效果非常好 ,都是通过给标签加class选择器来实现功能的 2.特点 响应式布局:使用栅格系统可以把页面呈现在不同 ...
- python后端面试第八部分:制作简历和如何面试--长期维护
############### 就业指导 ################ 这里面有套路,你懂了这个套路,你会找到更好的工作,你会更快的找到工作, ,如何制作简历,五颗星 ,如何投递简历 ...
随机推荐
- html+css 通信课上 2019。3.22
数据通信 http协议:无状态.无连接.单向的应用层协议:采用请求/响应模型:通信请求只能由客户端发起,服务端对请求做出应答处理 服务器推送数据的解决方案:轮询( ajax) :让浏览器几秒就发送一次 ...
- 开发大型项目必备 98%公司都在用的十佳 Java Web 应用框架
众所周知,工欲善其事,必先利其器.选择一个好的 Web 应用框架就像一把称手的兵器,可以助大家披荆斩棘. 今天就为大家整理了十佳 Java Web 应用框架,并简单讨论一下它们的优缺点. 第一,大名鼎 ...
- [极客大挑战 2019]Http
0x00知识点 了解HTTP协议,使用bp伪造. 0x01 解题 首先查看源代码,找到Secret.php 访问 使用bp查看 提示我们需要来自该网址,直接改header头信息即可,我们可以通过使用r ...
- mac下使用opencv编译安装新模块contrib
opencv-4.0.1 opencv_contrib-4.0.1 提供ippicv下载链接: https://pan.baidu.com/s/1OIJRUqPqAtpMetku8qX36w cont ...
- python学习笔记_集合的定义和常用方法
1.认识集合 定义: s={1,2,3,4,5} s=set("hello") s=set(["steven","job","da ...
- Java之同步代码块处理继承Thread类的线程安全问题
package com.atguigu.java; /** *//** * 使用同步代码块解决继承Thread类的方式的线程安全问题 * * 例子:创建三个窗口卖票,总票数为100张.使用继承Thre ...
- Halcon中将16位的图像转化为8位的图像
Halcon中Image有多种像素表示方式,这方面网上找到的资料比较少,有一张大恒图像培训的文档中提到过,感觉描述比较准确: 里面有四种类型比较类似:uint2.int1.int2.int4. 区分起 ...
- windows下CreateDirectory创建路径失败的解决办法
第一: 权限不够: SECURITY_ATTRIBUTES sa;SECURITY_DESCRIPTOR sd; InitializeSecurityDescriptor(&sd,SECURI ...
- python学习Day08--文件操作
[主要内容] 文件操作: 1. r 2. w 3. a 4. r+ 读写模式. 需要移动光标进行反复读写 5. w+ 6. a+ 7. b bytes 读写操作的是字节. 用在非文本上 8. seek ...
- 牛客寒假算法基础集训营1B题
链接:https://ac.nowcoder.com/acm/contest/317/B 来源:牛客网 题目描述 小a非常喜欢204204这个数字,因为′a′+′k′=204′a′+′k′=204. ...