bootstrap基础
2024-06-06 01:35:17
一、bootstrap模板
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8"><!-- y以最高的ie浏览器渲染 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 视口设置 移动设备优先 支持移动端 在多个设备上适应 --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>Bootstrap 101 Template</title><!-- Bootstrap --><!-- <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> --><!-- 引入样式 --><link rel="stylesheet" type="text/css" href="bootstrap37/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]--></head><body><h1>你好，世界！</h1><!-- 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>
View Code
二、响应适应
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!-- 使用媒体查询 必须使用@media 必须做以下操作 --><meta name="viewport" content="width=device-width, initial-scale=1"><title>响应适应</title><style type="text/css">*{padding:0;margin:0;}/*大于900px*/@media screen and (min-width:900px) {/* CSS 代码 */.box{width: 200px;height: 200px;background: yellow;}} /*700px-900px之间显示的样式 */@media screen and (min-width:700px) and (max-width:900px) {/* CSS 代码 */.box{width: 200px;height: 200px;background: blue;}} /*小于700px*/@media screen and (max-width:700px) {/* CSS 代码 */.box{width: 200px;height: 200px;background: green;}} </style>
</head>
<body><div class="box">hhh</div>
</body>
</html>View Code
三、栅格系统介绍
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><!-- y以最高的ie浏览器渲染 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 视口设置 移动设备优先 支持移动端 在多个设备上适应 --><meta name="viewport" content="width=device-width, initial-scale=1"><title>栅格</title><!-- 引入样式 --><link rel="stylesheet" type="text/css" href="bootstrap37/css/bootstrap.min.css"><style type="text/css">[class^="col"]{background-color: pink;border: 1px solid;text-align: center;}</style></head><body><!-- 注意：不要随意修改bootstrap提供的系统类 --><!-- 固定宽度容器：.container 100%宽度容器：.container-fluid一个页面中，这两种容器不能互相嵌套使用--><div class="container"><h1>栅格系统</h1><!-- 一行 12列--><!-- col-lg-：大屏幕col-md-：中等屏幕col-sm-：小屏幕col-xs-：超小屏幕--><div class="row"><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">春眠不觉晓</div><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">处处闻啼鸟</div><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">夜来风雨声</div><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">花落知多少</div><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">抽刀断水水更流</div><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">举杯消愁愁更愁</div></div></div></body>
</html>View Code
四、全局css样式
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><!-- y以最高的ie浏览器渲染 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 视口设置 移动设备优先 支持移动端 在多个设备上适应 --><meta name="viewport" content="width=device-width, initial-scale=1"><title>全局css样式</title><!-- 引入样式 --><link rel="stylesheet" type="text/css" href="bootstrap37/css/bootstrap.min.css"><style type="text/css">[class^="col"]{background-color: pink;border: 1px solid;text-align: center;}</style></head><body><div class="container"><h1>全局css样式</h1><!-- 一行 12列--><!-- col-lg-：大屏幕col-md-：中等屏幕col-sm-：小屏幕col-xs-：超小屏幕--><!-- 全局css样式默认每块区域会有padding-left=15px 和padding-right=15px的空白区域 --><div class="row"><div class="col-md-4"><h1>h1标题</h1><h2>h2标题</h2><h3>h3标题</h3><h4>h4标题</h4><h5>h5标题</h5><h6>h6标题</h6><!-- 添加.lead 可以使内容突出显示 --><p><span class="lead">页面</span>主体用p标签</p><!-- 高亮显示 --><p><mark>页面</mark>主体用p标签</p><!-- 被删除的文本 --><del>删除的文本</del><!-- 无用文本<s></s> --><p><s>这是一个无用的文本</s></p><!-- 插入文本<ins> --><p><ins>这是一个插入的文本</ins></p><!-- 带下划线文本 <u> --><p><u>这是一个带下划线的文本</u></p></div><div class="col-md-4"><p class="text-left">左对齐</p><p class="text-center">居中</p><p class="text-right">右对齐</p><p class="text-justify">根据文本长度，自动换行ddddddddddddddddddddddddddddddadadasaadsadsa</p><p class="text-nowrap">不管多长都不换行ddddddddddddddddddddddddasdasdadadaaaaaa</p></div><div class="col-md-4"><!-- 给table标签添加一个.table类 --><!-- 可以给tbody的每一行添加条纹：.table-striped类 --><!-- 边框：.table-bordered类 --><!-- 悬停：.table-hover --><!-- 状态类：.active.success.info.warning.danger给每一行添加这个状态类之后使得每一行以不同的颜色显示出来--><!-- 在table外面再加一层.table-responsive类，是表格变为响应式的表格 --><div class="table-responsive"> <table class="table table-striped table-bordered table-hover"><thead><tr><th>#</th><th>姓名</th><th>年龄</th><th>身高</th></tr></thead><tbody><tr class="warning"><td>1</td><td>jack</td><td>23</td><td>180</td></tr><tr class="success"><td>2</td><td>nick</td><td>24</td><td>176</td></tr><tr class="info"><td>3</td><td>lucy</td><td>24</td><td>176</td></tr></tbody></table></div></div><div class="col-md-4"><!-- 状态类：.active.success.info.warning.danger--></div></div></div></body>
</html>View Code
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8"><!-- y以最高的ie浏览器渲染 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 视口设置 移动设备优先 支持移动端 在多个设备上适应 --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>Bootstrap 101 Template</title><!-- 引入样式 --><link rel="stylesheet" type="text/css" href="bootstrap37/css/bootstrap.min.css"></head><body><div class="container"><h1>css全局样式</h1><div class="row"><div class="col-md-4"><form><!-- .sr-only：隐藏元素 --><div class="form-group"><label for="username">用户名</label><input type="email" class="form-control" id="username" placeholder="用户名"></div><div class="form-group"><label for="pwd">密码</label><input type="password" class="form-control" id="pwd" placeholder=密码"></div><div class="form-group"><label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile"><p class="help-block">Example block-level help text here.</p></div><div class="checkbox"><label><input type="checkbox"> Check me out</label></div><!-- 可以通过类设置不同的按钮样式：.btn-default :默认样式.btn-primary:首选样式.btn-success 成功.btn-info 一般信息.btn-warning 警告.btn-danger 危险.btn-link 链接可以设置按钮尺寸：不设置时为默认大小.btn-lg 大.btn-sm 小.btn-xs 超小--><button type="submit" class="btn btn-info">注册</button><button type="submit" class="btn btn-success">登录</button><button type="submit" class="btn btn-link">登录</button><!-- 设置按钮大小 --><button type="submit" class="btn btn-danger btn-sm">登录</button><!-- 通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。 --><button type="submit" class="btn btn-warning btn-block">登录</button><!-- 给按钮添加.active类 --><button type="button" class="btn btn-primary btn-lg active">Primary button</button><!-- 可以为基于 <a> 元素创建的按钮添加 .active 类。 --><a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a><a href="#" class="btn btn-default btn-lg active" role="button">Link</a><!-- 按钮禁用 disabled--><button type="button" class="btn btn-lg btn-primary" disabled="disabled">禁用按钮1</button><button type="button" class="btn btn-default btn-lg" disabled="disabled">禁用按钮2</button></form></div><div class="col-md-6"><!-- 为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。 --><form class="form-inline"><div class="form-group"><!-- sr-only --><label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label><div class="input-group"><!-- 组件的使用：用一个span标签，给它加上一个组件类就可以了 --><div class="input-group-addon"><span class="glyphicon glyphicon-chevron-right"></span></div><input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount"><div class="input-group-addon">.00</div></div></div><button type="submit" class="btn btn-primary">Transfer cash</button></form></div><div class="col-md-6"><!-- 图片.img-responsive ：响应式图片，图片大小自适应视口 --><img src="imgs/1.jpg" class="img-responsive" alt="Responsive image"></div><!-- 图片形状：.img-rounded.img-circle.img-thumbnail--><div class="col-md-4"><img src="imgs/1.jpg" alt="..." class="img-rounded"><img src="imgs/1.jpg" alt="..." class="img-circle"><img src="imgs/1.jpg" alt="..." class="img-thumbnail"></div></div></div></body> </html>
View Code
五、bootstrap组件使用
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><!-- y以最高的ie浏览器渲染 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 视口设置 移动设备优先 支持移动端 在多个设备上适应 --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>组件</title><!-- 引入样式 --><link rel="stylesheet" type="text/css" href="bootstrap37/css/bootstrap.min.css"><style type="text/css">.navColor{background-color: rgba(0,0,0,0.7);}</style></head><body style="height: 2000px;padding-top: 70px;"><!-- 导航：要独立于.container类之上 --><!-- 添加 .navbar-fixed-top 类可以让导航条固定在顶部 --><!-- 这个固定的导航条会遮住页面上的其它内容，除非你给 <body> 元素底部设置了 padding。 --><!-- 通过添加 .navbar-inverse 类可以改变导航条的外观。 --><!-- 可以自定义一个类,如.navColor，设置导航条颜色 --><nav class="navbar navbar-default navbar-fixed-top navbar-inverse navColor"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">logo</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li><li><a href="#">附页</a></li></ul><form class="navbar-form navbar-right"><div class="form-group"><input type="text" class="form-control" placeholder="Search"></div><button type="submit" class="btn btn-success">搜索</button></form><ul class="nav navbar-nav navbar-right"><li><a href="#">登录</a></li><li><a href="#">注册</a></li> </ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --></nav><div class="container"><div class="row"><div class="col-md-4"><!-- 下拉菜单 --><div class="dropdown"><button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropdown<span class="caret"></span></button><ul class="dropdown-menu" 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" class="divider"></li><li><a href="#">Separated link</a></li></ul></div><div class="col-md-6"><!-- 面板 --><div class="panel panel-default"><div class="panel-heading"><!-- 面板标题 --><h3 class="panel-title">按钮式下拉菜单</h3></div><div class="panel-body"><!-- 按钮式下拉菜单 --><div class="btn-group"><button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button><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></div></div></div></div></div><div class="row"><div class="col-md-6"><div class="panel panel-default"><div class="panel-heading"><h3 class="panel-title">各种颜色进度条</h3></div><div class="panel-body"><!-- 进度条 --><div class="progress"><div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"><span class="sr-only">40% Complete (success)</span></div></div><div class="progress"><div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"><span class="sr-only">20% Complete</span></div></div><div class="progress"><div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"><span class="sr-only">60% Complete (warning)</span></div></div><div class="progress"><div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"><span class="sr-only">80% Complete (danger)</span></div></div></div></div></div></div><div class="row"><div class="col-md-6"><div class="panel panel-default"><div class="panel-heading"><h3 class="panel-title">动画效果进度条</h3></div><div class="panel-body"><!-- 进度条 --><div class="progress"><div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"><span class="sr-only">45% Complete</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>View Code
六、插件
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><!-- y以最高的ie浏览器渲染 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 视口设置 移动设备优先 支持移动端 在多个设备上适应 --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>Bootstrap 插件</title><!-- 引入样式 --><link rel="stylesheet" type="text/css" href="bootstrap37/css/bootstrap.min.css"></head><body><div class="container-fluid"><div class="row"><dir class="col-md-4"><!-- 模态框 --><!-- Button trigger modal --><!-- 自定义一个按钮用js实现模态框 --><button type="button" class="btn btn-danger btn-lg" id="closeBtn" data-toggle="modal">删除</button><!-- <button type="button" class="btn btn-danger btn-lg" data-toggle="modal" data-target="#myModal">删除</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">你确定要删除吗</h4></div><div class="modal-body">如果删除，不可返回！</div><div class="modal-footer"><button type="button" class="btn btn-success" data-dismiss="modal">取消</button><button type="button" class="btn btn-primary">确定</button></div></div></div></div></dir></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})})})</script>
</html>View Code
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8"><!-- y以最高的ie浏览器渲染 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 视口设置 移动设备优先 支持移动端 在多个设备上适应 --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>Bootstrap 插件——collapse</title><!-- 引入样式 --><link rel="stylesheet" type="text/css" href="bootstrap37/css/bootstrap.min.css"></head><body><div class="container-fluid"><div class="row"><div class="col-md-4"><!-- collapse（手风琴样式） --><div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"><div class="panel panel-default"><div class="panel-heading" role="tab" id="headingOne"><h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">数码</a></h4></div><div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"><div class="panel-body"><p><a href="#">大家电</a></p><p><a href="#">生活家电</a></p><p><a href="#">个人家电</a></p><p><a href="#">休闲家电</a></p><p><a href="#">数码配件</a></p></div></div></div><div class="panel panel-default"><div class="panel-heading" role="tab" id="headingTwo"><h4 class="panel-title"><a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">美食</a></h4></div><div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"><div class="panel-body"><p><a href="#">各地特产</a></p><p><a href="#">茗茶冲饮</a></p><p><a href="#">休闲零食</a></p><p><a href="#">各类坚果</a></p><p><a href="#">生鲜蔬果</a></p><p><a href="#">粮油米面</a></p></div></div></div><div class="panel panel-default"><div class="panel-heading" role="tab" id="headingThree"><h4 class="panel-title"><a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">箱包</a></h4></div><div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"><div class="panel-body"><p><a href="#">女包</a></p><p><a href="#">男包</a></p><p><a href="#">旅行包袋</a></p><p><a href="#">运动包</a></p><p><a href="#">各类小包</a></p></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>
View Code
七、轮播图
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8"><!-- y以最高的ie浏览器渲染 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 视口设置 移动设备优先 支持移动端 在多个设备上适应 --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>Bootstrap——carousel</title><link rel="stylesheet" type="text/css" href="bootstrap37/css/bootstrap.min.css"></head><body><div class="container"><div class="row"><div class="col-md-6"><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><li data-target="#carousel-example-generic" data-slide-to="3"></li><li data-target="#carousel-example-generic" data-slide-to="4"></li></ol><!-- Wrapper for slides --><div class="carousel-inner" role="listbox"><div class="item active"><img src="imgs/4.JPG" alt="..."></div><div class="item"><img src="imgs/5.JPG" alt="..."></div><div class="item"><img src="imgs/6.JPG" alt="..."></div><div class="item"><img src="imgs/7.JPG" alt="..."></div><div class="item"><img src="imgs/8.JPG" alt="..."></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></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>
View Code
八、动态监听
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8"><!-- y以最高的ie浏览器渲染 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 视口设置 移动设备优先 支持移动端 在多个设备上适应 --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>Bootstrap 101 Template</title><link rel="stylesheet" type="text/css" href="bootstrap37/css/bootstrap.min.css"></head><body><nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation"><div class="container-fluid"><div class="navbar-header"><button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">luffy</a></div><div class="collapse navbar-collapse bs-js-navbar-scrollspy"><ul class="nav navbar-nav"><li><a href="#ios">iOS</a></li><li><a href="#svn">SVN</a></li><li class="dropdown"><a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Java<b class="caret"></b></a><ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1"><li><a href="#jmeter" tabindex="-1">jmeter</a></li><li><a href="#ejb" tabindex="-1">ejb</a></li><li class="divider"></li><li><a href="#spring" tabindex="-1">spring</a></li></ul></li></ul></div></div> </nav> <div data-spy="scroll" data-target="#navbar-example" data-offset="0" style="height:200px;overflow:auto; position: relative;"><h4 id="ios">iOS</h4><p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p><h4 id="svn">SVN</h4><p>Apache Subversion，通常缩写为 SVN，是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目，因此拥有丰富的开发人员和用户社区。</p><h4 id="jmeter">jMeter</h4><p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p><h4 id="ejb">EJB</h4><p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。</p><h4 id="spring">Spring</h4><p>Spring 框架是一个开源的 Java 平台，为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。</p><p>Spring 框架最初是由 Rod Johnson 编写的，在 2003 年 6 月首次发布于 Apache 2.0 许可证下。</p></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>
View Code
转载于:https://www.cnblogs.com/yanlin-10/p/9315534.html
bootstrap基础相关推荐
- Bootstrap基础一 CSS 概览
原文:Bootstrap<基础一> CSS 概览 HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 ...
- Bootstrap基础二十七 多媒体对象（Media Object）
Bootstrap<基础二十七> 多媒体对象(Media Object) 原文:Bootstrap<基础二十七> 多媒体对象(Media Object) Bootstrap 中 ...
- bootstrap基础学习【菜单、按钮、导航】（四）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>boo ...
- Bootstrap基础二 网格系统
原文:Bootstrap<基础二> 网格系统 Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 什 ...
- Bootstrap 基础五表格
原文:Bootstrap <基础五>表格 Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签 描述 <table> ...
- 第87节：Java中的Bootstrap基础与SQL入门
第87节:Java中的Bootstrap基础与SQL入门 前言复习 什么是JQ? : write less do more 写更少的代码,做更多的事 找出所有兄弟: $("div" ...
- BootStrap基础教程系列-李游Leo-专题视频课程
BootStrap基础教程系列-138人已学习 课程介绍 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JavaSc ...
- 前端三件套系例之BootStrap——BootStrap基础、 BootStrap布局
文章目录 1 BootStrap基础 1 什么是BootStrap 2 BootStrap的版本 3 BootStrap 下载 4 CDN服务 5 目录结构 6 基本模板 7 浏览器支持 8 浏览器兼 ...
- Bootstrap基础--选项卡
Bootstrap基础–选项卡(nav-tabs) 选项卡Tabs是Web中一种非常常用的功能.用户点击或悬浮对应的菜单项,能切换出对应的内容. 一个选项卡主要包括两个部分,其一是菜单项,其二是内容面 ...
- Bootstrap—基础样式定义
本章主要是介绍Bootstrap默认的基础样式定义,利用这些基础的定义相互组合,完成页面的整体风格定义甚至是更具体的效果. Bootstrap应该是一个基础工具,它的好处在于已经帮你定义了一个基础的样 ...
最新文章
- 怎么卸载云骑士装机大师
- iOS 富文本编辑工厂, 让书写更简便.
- JavaScript常用代码
- RMAN简明教程之五——RMAN还原和恢复
- redis-Windows下安装与操作
- 点击图片放大至原始图片大小
- 搜狗手机浏览器_搜狗推广开户费多少钱？【搜狗开户代理商】
- mac linux 权限 常用命令
- sumif三个条件怎么填_Excel根据条件进行求和的几个常用函数公式！
- flutter网络请求dio的get、post、上传文件、下载文件总结
- I00030 Grades conversion
- 谈谈使用Redis缓存时批量删除的几种实现
- 怎么管理员工混工时的现象？
- 笔记本电脑分屏操作指南
- Android项目中创建马甲包
- CREATE TABLESPACE命令详解
- Shiro 通过配置Cookie 解决多个二级域名的单点登录问题。
- mysql和myODBC安装和配置
- nii数据转png图像
- 东南大学信息科学工程学院在计算机,【东南大学计算机科学与工程学院】疑问咨询贴...