1、全局CSS样式
https://v3.bootcss.com/css/
<!DOCTYPE html><html lang="zh-CN"><head> ???<meta charset="utf-8"> ???<!-- 以最高的ie 浏览器 渲染 ?--> ???<meta http-equiv="X-UA-Compatible" content="IE=edge"> ???<!-- 视口的设备 移动设备优先 支持移动端 在多个设备上适应 pc iphone 安卓 --> ???<meta name="viewport" content="width=device-width, initial-scale=1"> ???<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> ???<title>全局css样式</title> ???<!-- Bootstrap 必须引入bootstrap --> ???<!--<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">--> ???<link rel="stylesheet" href="./bootstrap-3.3.7/css/bootstrap.min.css"> ???<style type="text/css"> ???????[class^=‘col‘]{ ???????????border: 1px solid gray; ???????} ???</style></head><body> ???<div > ???????<h1>全局的css样式</h1> ???????<div > ???????????<div > ???????????????<h1>h1. Bootstrap heading</h1> ???????????????<h2>h2. Bootstrap heading<small>Secondary text</small></h2> ???????????????<h3>h3. Bootstrap heading</h3> ???????????????<h4>h4. Bootstrap heading</h4> ???????????????<h5>h5. Bootstrap heading</h5> ???????????????<h6>h6. Bootstrap heading</h6> ???????????????<p>我是<span >页面</span>主体</p> ???????????</div> ???????????<div > ???????????????<p >Left aligned text.</p> ???????????????<p >Center aligned text.</p> ???????????????<p >Right aligned text.</p> ???????????????<p >Justified text.Justified text.Justified text.Justified text.Justified text.Justified text.Justified text.</p> ???????????????<p >No wrap text.</p> ???????????????<p >Lowercased text.</p> ???????????????<p >Uppercased text.</p> ???????????????<p >capitalized text.</p> ???????????</div> ???????????<div > ????????????????<!-- 响应式表格 页面缩小时 会有水平滚动条 --> ???????????????<div > ???????????????????????<table > ???????????????????????????<thead> ???????????????????????????????<tr > ???????????????????????????????????<th>#</th> ???????????????????????????????????<th>姓名</th> ???????????????????????????????????<th>年龄</th> ???????????????????????????????????<th>身高</th> ???????????????????????????????</tr> ???????????????????????????</thead> ???????????????????????????<tbody> ???????????????????????????????<tr > ???????????????????????????????????<td>1</td> ???????????????????????????????????<td>小马哥小马哥小马哥小马哥小马哥小马哥小马哥小马哥小马哥小马哥小马哥小马哥小马哥</td> ???????????????????????????????????<td>18</td> ???????????????????????????????????<td>180</td> ???????????????????????????????</tr> ???????????????????????????????<tr > ???????????????????????????????????<td>2</td> ???????????????????????????????????<td>小马哥</td> ???????????????????????????????????<td>18</td> ???????????????????????????????????<td>180</td> ???????????????????????????????</tr> ???????????????????????????????<tr > ???????????????????????????????????<td>3</td> ???????????????????????????????????<td>小马哥</td> ???????????????????????????????????<td>18</td> ???????????????????????????????????<td>180</td> ???????????????????????????????</tr> ???????????????????????????????<tr > ???????????????????????????????????<td>4</td> ???????????????????????????????????<td>小马哥</td> ???????????????????????????????????<td>18</td> ???????????????????????????????????<td>180</td> ???????????????????????????????</tr> ???????????????????????????</tbody> ???????????????????????</table> ???????????????????</div> ???????????</div> ???????</div> ???????<div > ???????????<div > ???????????????<!--<form > ?一行显示--> ???????????????<form> ???????????????????<div > ???????????????????????<!-- ?sr-only ?隐藏当前元素 --> ???????????????????????<!--<label for="username" >用户名</label>--> ???????????????????????<label for="username">用户名</label> ???????????????????????<input type="email" placeholder="用户名"> ???????????????????</div> ???????????????????<div > ???????????????????????<label for="pwd">Password</label> ???????????????????????<input type="password" placeholder=‘密码‘> ???????????????????</div> ???????????????????<button type="submit" >登录</button> ???????????????????<button type="submit" >注册</button> ???????????????</form> ???????????</div> ???????????<div > ???????????????<form > ???????????????????<div > ???????????????????????<label for="exampleInputAmount">Amount (in dollars)</label> ???????????????????????<div > ???????????????????????????<!--<div >$</div>--> ???????????????????????????<div ><span ></span></div> ???????????????????????????<input type="text" placeholder="Amount"> ???????????????????????????<div >.00</div> ???????????????????????</div> ???????????????????</div> ???????????????????<button type="submit" >Transfer cash</button> ???????????????</form> ???????????</div> ???????</div> ???</div></body> ???<!-- ???总结： ???????https://v3.bootcss.com/css/ ???????https://v3.bootcss.com/components/ ???????http://www.iconfont.cn/ ????????//iconfont 阿里巴巴矢量图标库 ???--></html>2、bootstrap组件
<!DOCTYPE html><html lang="zh-CN"><head> ???<meta charset="utf-8"> ???<!-- 以最高的ie 浏览器 渲染 ?--> ???<meta http-equiv="X-UA-Compatible" content="IE=edge"> ???<!-- 视口的设备 移动设备优先 支持移动端 在多个设备上适应 pc iphone 安卓 --> ???<meta name="viewport" content="width=device-width, initial-scale=1"> ???<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> ???<title>bootstrap组件</title> ???<!-- Bootstrap 必须引入bootstrap --> ???<!--<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">--> ???<link rel="stylesheet" href="./bootstrap-3.3.7/css/bootstrap.min.css"> ???<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --> ???<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --> ???<!--兼容IE9以下的版本--> ???<!--[if lt IE 9]> ???<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> ???<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> ???<![endif]--> ???<!-- 使用导航时 的 设置 --> ???<style type="text/css"> ???????/*body{}*/ ???????/* 自己设置的样式类 一定大于bootstrap提供的样式类 ???????建议： ???????????大家使用bootstrap 可以复制粘贴 根据项目需求适当的更改样式类，来达到预期的效果 ???????*/ ???????.navColor{background-color: yellowgreen} ???</style></head><body style="height: 2000px;"> ???<!--<nav >--> ???<nav > ???????<div > ???????????<!-- Brand and toggle get grouped for better mobile display --> ???????????<div > ???????????????<button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> ???????????????????<span >Toggle navigation</span> ???????????????????<span ></span> ???????????????????<span ></span> ???????????????????<span ></span> ???????????????</button> ???????????????<a href="#">luffy</a> ???????????</div> ???????????<!-- Collect the nav links, forms, and other content for toggling --> ???????????<div > ???????????????<ul > ???????????????????<li ><a href="#">首页 <span >(current)</span></a></li> ???????????????????<li><a href="#">课程</a></li> ???????????????????<li > ??????????????????????<a href="#">深科技</a> ???????????????????</li> ???????????????</ul> ???????????????<form > ???????????????????<div > ???????????????????????<input type="text" placeholder="Search"> ???????????????????</div> ???????????????????<button type="submit" >search</button> ???????????????</form> ???????????????<ul > ???????????????????<li><a href="javascript:">登录</a></li> ???????????????????<li><a href="javascript:">注册</a></li> ???????????????</ul> ???????????</div><!-- /.navbar-collapse --> ???????</div><!-- /.container-fluid --> ???</nav> ???<div > ???????<div > ???????????<div > ???????????????<div > ???????????????????<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> ???????????????????????Dropdown ???????????????????????<span ></span> ???????????????????</button> ???????????????????<ul aria-labelledby="dropdownMenu1"> ???????????????????????<li><a href="#">Action</a></li> ???????????????????????<li><a href="#">Another action</a></li> ???????????????????????<li><a href="#">Something else here</a></li> ???????????????????????<li role="separator" ></li> ???????????????????????<li><a href="#">Separated link</a></li> ???????????????????</ul> ???????????????</div> ???????????</div> ???????????<div > ???????????????<!-- Single button --> ???????????????<div > ???????????????????<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> ???????????????????????Action ???????????????????????<span ></span> ???????????????????</button> ???????????????????<ul > ???????????????????????<li><a href="#">Action</a></li> ???????????????????????<li><a href="#">Another action</a></li> ???????????????????????<li><a href="#">Something else here</a></li> ???????????????????????<li role="separator" ></li> ???????????????????????<li><a href="#">Separated link</a></li> ???????????????????</ul> ???????????????</div> ???????????</div> ???????????<div > ???????????????<!--面板的作用--> ???????????????<div > ???????????????????<div > ???????????????????????<h3 >按钮式的下拉菜单</h3> ???????????????????</div> ???????????????????<div > ???????????????????????<!-- Split button --> ???????????????????????<div > ???????????????????????????<button type="button" >Action</button> ???????????????????????????<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> ???????????????????????????????<span ></span> ???????????????????????????????<span >Toggle Dropdown</span> ???????????????????????????</button> ???????????????????????????<ul > ???????????????????????????????<li><a href="#">Action</a></li> ???????????????????????????????<li><a href="#">Another action</a></li> ???????????????????????????????<li><a href="#">Something else here</a></li> ???????????????????????????????<li role="separator" ></li> ???????????????????????????????<li><a href="#">Separated link</a></li> ???????????????????????????</ul> ???????????????????????</div> ???????????????????</div> ???????????????</div> ???????????</div> ???????</div> ???????<div > ???????????<div > ???????????????<div > ???????????????????<div > ???????????????????????<h3 >进度条</h3> ???????????????????</div> ???????????????????<div > ???????????????????????<div > ???????????????????????????<div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;"> ???????????????????????????????<span >60% Complete</span> ???????????????????????????</div> ???????????????????????</div> ???????????????????????<div > ???????????????????????????<div role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> ???????????????????????????????<span >40% Complete (success)</span> ???????????????????????????</div> ???????????????????????</div> ???????????????????????<div > ???????????????????????????<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> ???????????????????????????????<span >20% Complete</span> ???????????????????????????</div> ???????????????????????</div> ???????????????????????<div > ???????????????????????????<div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> ???????????????????????????????<span >60% Complete (warning)</span> ???????????????????????????</div> ???????????????????????</div> ???????????????????????<div > ???????????????????????????<div role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> ???????????????????????????????<span >80% Complete (danger)</span> ???????????????????????????</div> ???????????????????????</div> ???????????????????</div> ???????????????</div> ???????????</div> ???????</div> ???</div> ???<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> ???<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> ???<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> ???<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></body></html>3、bootstrap插件
<!DOCTYPE html><html lang="zh-CN"><head> ???<meta charset="utf-8"> ???<!-- 以最高的ie 浏览器 渲染 ?--> ???<meta http-equiv="X-UA-Compatible" content="IE=edge"> ???<!-- 视口的设备 移动设备优先 支持移动端 在多个设备上适应 pc iphone 安卓 --> ???<meta name="viewport" content="width=device-width, initial-scale=1"> ???<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> ???<title>bootstrap插件</title> ???<!-- Bootstrap 必须引入bootstrap --> ???<!--<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">--> ???<link rel="stylesheet" href="./bootstrap-3.3.7/css/bootstrap.min.css"> ???<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --> ???<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --> ???<!--兼容IE9以下的版本--> ???<!--[if lt IE 9]> ???<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> ???<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> ???<![endif]--> ???<style type="text/css"> ???????.mystyle{ height: 180px; width: 240px;} ???</style></head><body> ???<div > ???????<div > ???????????<div > ???????????????<!-- Button trigger modal ?data-toggle: 定义事件类型 ???--> ???????????????<button type="button" data-toggle="modal" data-target="#myModal"> ???????????????<!--<button type="button" data-toggle="modal">--> ???????????????????删除 ???????????????</button> ???????????????<!-- Modal --> ???????????????<div tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> ???????????????????<div role="document"> ???????????????????????<div > ???????????????????????????<div > ???????????????????????????????<button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> ???????????????????????????????<h4 >你确定要删除吗？</h4> ???????????????????????????</div> ???????????????????????????<div > ???????????????????????????????如果删除不可返回 ???????????????????????????</div> ???????????????????????????<div > ???????????????????????????????<button type="button" data-dismiss="modal">关闭</button> ???????????????????????????????<button type="button" data-dismiss="modal">确定</button> ???????????????????????????</div> ???????????????????????</div> ???????????????????</div> ???????????????</div> ???????????</div> ???????????<div > ???????????????<div data-ride="carousel"> ???????????????????<!-- Indicators --> ???????????????????<ol > ???????????????????????<li data-target="#carousel-example-generic" data-slide-to="0" ></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 role="listbox"> ???????????????????????<div > ???????????????????????????<img src="./1.jpg" alt="..."> ???????????????????????????<div > ???????????????????????????????... ???????????????????????????</div> ???????????????????????</div> ???????????????????????<div > ???????????????????????????<img src="./2.jpg" alt="..."> ???????????????????????????<div > ???????????????????????????????... ???????????????????????????</div> ???????????????????????</div> ???????????????????????<div > ???????????????????????????<img src="./3.jpg" alt="..."> ???????????????????????????<div > ???????????????????????????????... ???????????????????????????</div> ???????????????????????</div> ???????????????????</div> ???????????????????<!-- Controls --> ???????????????????<a href="#carousel-example-generic" role="button" data-slide="prev"> ???????????????????????<span aria-hidden="true"></span> ???????????????????????<span >Previous</span> ???????????????????</a> ???????????????????<a href="#carousel-example-generic" role="button" data-slide="next"> ???????????????????????<span aria-hidden="true"></span> ???????????????????????<span >Next</span> ???????????????????</a> ???????????????</div> ???????????</div> ???????</div> ???</div> ???<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> ???<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> ???<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> ???<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></body> ???<script type="text/javascript"> ???????$(function () { ???????????// $(‘#closeBtn‘).click(function () { ???????????// ???????????// ????$(‘#myModal‘).modal({ ???????????// ????????keyboard:false ???????????// ????}) ???????????// ???????????// ????// $(‘#myModal‘).modal(‘hide‘) ???????????// ???????????// }) ???????}) ???</script> ???<!-- ?总结： ????????http://adminlte.la998.com/ ????// 后台页面 基于bootstrap 做的 ????????http://echarts.baidu.com/ ?????// 做图表的 ????????http://www.chartjs.org/ ???????// bootstrap 里面有 ????????https://www.hcharts.cn/demo/highcharts ?// ...做图表的 ???--></html>4
5
26-[Boostrap]-css样式，组件，控件
原文地址：https://www.cnblogs.com/venicid/p/9135360.html