###############    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>&lt;div&gt;</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>&nbsp;删除</button> <div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; 主页</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; 分类</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; 应用</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; 设置</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">&times;</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-长期维护的更多相关文章

  1. python操作三大主流数据库(4)python操作mysql④python服务端flask和前端bootstrap框架结合实现新闻展示

    python操作mysql④python服务端flask和前端bootstrap框架结合实现新闻展示 参考文档http://flask.pocoo.org/docs/0.11/http://flask ...

  2. Golang 谷歌搜索api 实现搜索引擎(前端 bootstrap + jquery)

    Golang 谷歌搜索api 实现搜索引擎(前端 bootstrap + jquery) 体验 冒号搜索 1. 获取谷歌搜索api 谷歌搜索api教程 2. 后台调用 程序入口 main.go // ...

  3. 基于asp.net(C#)MVC+前端bootstrap+ztree+lodash+jquery技术-Angel工作室通用权限管理

    一.Angel工作室简单通用权限系统简介 AngelRM(Asp.net MVC Web api)是基于asp.net(C#)MVC+前端bootstrap+ztree+lodash+jquery技术 ...

  4. 前端-BootStrap

    bootstrap 英 /'buːtstræp/ 美 /'bʊt'stræp/ n. [计] 引导程序,辅助程序:解靴带 关于 BootCDN BootCDN 是 Bootstrap 中文网支持并维护 ...

  5. 前端——Bootstrap

    Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包. 以前自己写的html的 ...

  6. web前端----Bootstrap框架

    Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包. 它支持响应式布局,并且 ...

  7. tips 前端 bootstrap 嵌套行 嵌套列 溢出 宽度不正确 栅格化系统计算

    bootstrap 当嵌套列时 有时会出现很奇异的row 的width不对问题出现的情况时 <div class="row" > <!--row a--> ...

  8. 前端:Bootstrap框架

    一,bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包. 它支持响应式布局, ...

  9. web前端-bootstrap

    1.什么是bootstrap 前端开发开源工具包 ,包含css样式库+jq插件 ,ui效果非常好 ,都是通过给标签加class选择器来实现功能的 2.特点 响应式布局:使用栅格系统可以把页面呈现在不同 ...

  10. python后端面试第八部分:制作简历和如何面试--长期维护

    ###############     就业指导    ################ 这里面有套路,你懂了这个套路,你会找到更好的工作,你会更快的找到工作, ,如何制作简历,五颗星 ,如何投递简历 ...

随机推荐

  1. nfs自动挂载

    服务器端 /etc/exports /mnt *(rw,sync,no_root_squash,anonuid=500,anongid=500)systemctl restart nfs 客户端 挂载 ...

  2. linux下的hashpump安装

    hashpump是linux上的一个进行hash长度拓展攻击的工具 安装: git clone https://github.com/bwall/HashPump apt-get install g+ ...

  3. Linux 基本操作学习

    Linux 学习 虚拟机 (Virtual Machine) 指通过软件模拟的具有完整硬件系统功能的,运行再一个完全隔离环境中的完整计算机系统 常用 Linux 命令 命令 对应英文 作用 ls li ...

  4. 30 docker swarm service 的创建维护和水平拓展

    运行环境在上两篇文章中已经搭建 1. 创建一个service (与 docker run 类似 ,创建一个 container) docker service create --name demo b ...

  5. 设x,y是概率空间(Ω,F,P)上的拟可积随机变量,证明:X=Y a.e 当且仅当 xdp = ydp 对每个A∈F成立。Q: X=Y almost surely iff ∀A∈G∫AXdP=∫AYdP

    E{XE{Y|C}}=E{YE{X|C}} 现在有没有适合大学生用的搜题软件呢?  https://www.zhihu.com/question/51935291/answer/514312093   ...

  6. Java四则运算和验证码生成

    四则运算 程序设计思想 使用随机数生成100或1000以内数字,用字符串数组实现+-*/的输出.For循环打印出所需要的题数. 程序流程图 package yunsuan; import java.u ...

  7. Java8之深入理解Lambda

    lambda表达式实战 从例子引出lambda 传递Runnable创建Thread java8之前 Thread thread=new Thread(new Runnable() { @Overri ...

  8. textarea高度自适应解决方法

    引入autosize.js <script src="./autosize.js"></script> autosize(document.getEleme ...

  9. springboot的http监控接口启动器的配置

    基于SpringBoot框架企业级应用系统开发全面实战()->03.07_http监控_recv.mp4 监控接口启动器 自定义监控接口启动器的配置 ====================== ...

  10. oracle学习(二)pl/sql基础

    pl/sql组成:DDL DML DCL pl/sql特点: SQL&PL/SQL编译器集成PL/SQL,支持SQL所有范围的语法 支持CASE语句和表达式 继承和动态方法释放 类型进化.属性 ...