bootstrap简单使用布局、栅格系统、modal标签页等常用组件入门
<!DOCTYPE html>
<html>
<head>
<title>bootstrap</title>
<!-- 引入bootstrap的css样式库 -->
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- 引入第三方库 -->
<link rel="stylesheet" type="text/css" href="animate.css">
</head>
<body> <!-- 按钮控件 -->
<!-- <button class="btn btn-success">提交</button>
<button class="btn btn-info">提交</button>
<button class="btn btn-warning">提交</button>
<button class="btn btn-danger">提交</button>
<button class="btn btn-default">提交</button>
<button class="btn btn-primary">提交</button> <div class='bg-primary'>bootstrap_css_js</div> <div class='glyphicon glyphicon-music' style="color:red"></div>
-->
<!-- 分页组件 -->
<!-- <nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav> --> <!-- 栅格系统 用来布局 -->
<div class="container">
<div class="row">
<div class="col-md-8"><p style="background: gray">.col-md-8</p></div>
<div class="col-md-4"><p style="background: gray">.col-md-4</p></div>
</div> <div class="row">
<div class="col-md-4"><p style="background: gray">.col-md-4</p></div>
<div class="col-md-8"><p style="background: gray">.col-md-8</p></div>
</div> <div class="row">
<div class="col-md-4"><p style="background: pink">pink1</p></div>
<div class="col-md-4"><p style="background: pink">pink2</p></div>
<div class="col-md-4"><p style="background: pink">pink3</p></div>
</div> <!-- 表格控件 -->
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>用户名</th>
<th>密码</th>
</tr>
</thead> <tbody>
<tr>
<td>username</td>
<td>password</td>
</tr> <tr class='success'>
<td>username</td>
<td>password</td>
</tr> <tr class='info'>
<td>username</td>
<td>password</td>
</tr> <tr class='warning'>
<td>username</td>
<td>password</td>
</tr>
</tbody>
</table> <!-- 字体颜色 --> <p class="text-muted">字体颜色字体颜色字体颜色字体颜色字体颜色字体颜色</p>
<p class="text-primary">字体颜色字体颜色字体颜色字体颜色字体颜色字体颜色</p>
<p class="text-success">字体颜色字体颜色字体颜色字体颜色字体颜色字体颜色</p>
<p class="text-info">字体颜色字体颜色字体颜色字体颜色字体颜色字体颜色</p>
<p class="text-warning">字体颜色字体颜色字体颜色字体颜色字体颜色字体颜色</p>
<p class="text-danger">字体颜色字体颜色字体颜色字体颜色字体颜色字体颜色</p> <!-- 按钮样式,a标签同样适用 -->
<!-- <button class="btn btn-success">success</button> --> <a href="http://www.baidu.com" target="_blank" class="btn btn-success">success</a> <!-- 背景色 --> <p class="bg-primary">背景色背景色背景色背景色背景色背景色背景色背景色背景色</p>
<p class="bg-success">背景色背景色背景色背景色背景色背景色背景色背景色背景色</p>
<p class="bg-info">背景色背景色背景色背景色背景色背景色背景色背景色背景色</p>
<p class="bg-warning">背景色背景色背景色背景色背景色背景色背景色背景色背景色</p>
<p class="bg-danger">背景色背景色背景色背景色背景色背景色背景色背景色背景色</p> <!-- 图片懒加载,首屏不全部显示,往下拖动才显示图片,项目地址:
https://github.com/darkwing/LazyLoad --> <!-- <img data-src="https://www.baidu.com/img/bd_logo1.png" src="https://www.baidu.com/img/bd_logo1.png" /> --> <p class="glyphicon glyphicon-apple" style="color: green"></p> <!-- 图标组件,专业的网站 https://fontawesome.com/ --> <!-- 进度条-->
<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> <h2>第三方css动画效果库Animate.css</h2> <button class="btn btn-success animated flash">button</button> </div>
</body>
</html>
bootstrap结合javascript展示标签页和弹出框的示例:
<!DOCTYPE html>
<html>
<head>
<title>javascript</title>
<meta charset="utf-8"> <script type="text/javascript" src="static/jquery-3.3.1.min.js"></script>
<script src="static/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="static/bootstrap.min.css">
</head>
<body>
<div class="container">
<div id="jinfo" class="alert alert-success">jquery</div>
<div id="btn1" class="btn btn-info">按钮</div> <!-- 标签页 -->
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul> <div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">company home page</div>
<div role="tabpanel" class="tab-pane" id="profile">profile page</div>
<div role="tabpanel" class="tab-pane" id="messages">3</div>
<div role="tabpanel" class="tab-pane" id="settings">4</div>
</div>
</div> <!-- 弹出框model -->
<!-- Button trigger modal -->
<!-- <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#chinasoft">
Launch demo modal
</button> --> <!-- Modal -->
<div class="modal fade" id="chinasoft" 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">Modal title</h4>
</div>
<div class="modal-body">
弹出框model文字内容
</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> <button class="btn btn-success" id="showmodal">弹出modal</button> </div> <script type="text/javascript">
$('#btn1').on('click', function(){
$('#jinfo').hide(1000).show(1000);
}) //展示modal弹出框
$('#showmodal').on('click', function(){
$('#chinasoft').modal('show');
}) </script>
</body>
</html>
bootstrap简单使用布局、栅格系统、modal标签页等常用组件入门的更多相关文章
- Bootstrap框架的要点--栅格系统
不同的公司要求使用框架有所不同,而Bootstrap框架在工作中使用频次较高,其中栅格系统在这一框架中的地位不容小觑,下面我们开始聊聊它吧. 简单介绍: Bootstrap提供了一套响应式.移动设备优 ...
- bootstrap(一)栅格系统
中文网:http://www.bootcss.com/ 官网:http://v3.bootcss.com/ 需要准备:离线手册 和 软件包 项目中引用bootstrap.min.js压缩版和boo ...
- 初学者--bootstrap(四)栅格系统----在路上(8)
---------------------------------------栅格系统:是bootstrap提供的响应式布局方式------------------------------------ ...
- bootstrap源码分析----栅格系统
Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. bootstrap通过媒体查询解决不同分辨率屏幕下,页面主内 ...
- Bootstrap教程:[4]栅格系统详解
http://jingyan.baidu.com/article/6f2f55a1852aa1b5b83e6c5a.html 们都知道bootstrap3.0使用了四种栅格选项来形成栅格系统,这四种选 ...
- css模拟Bootstrap响应式布局——栅格
做作业的时候遇见用css模拟Bootstrap的栅格布局,学习了一下.发现这个很有用,用来在不同的平台上得到很好地用户体验,比如Phone.Pad.大屏幕显示器.小屏幕显示器.自己模拟用css写了一下 ...
- Bootstrap 学习笔记2 栅格系统 辅助类下拉框
辅助类和响应式工具: 颜色和字体相同 响应式工具: 图标菜单按钮组件: btn-group 按钮式下拉菜单
- Bootstrap学习js插件篇之标签页
简单的标签页 代码: <h1 class="page-header">4.3标签页</h1> <ul class="nav nav-tabs ...
- JavaScript插件——标签页
JavaScript插件——标签页 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.html ...
随机推荐
- js 日期 相关
Js计算指定日期加上多少天.加多少月.加多少年的日期 function DateAdd(interval, number, date) { switch (interval) { case " ...
- sql审核工具
https://github.com/Meituan-Dianping/SQLAdvisor/blob/master/doc/QUICK_START.md
- GIT好文搜藏
git图解:代码区域总结 https://zhuanlan.zhihu.com/p/20175919 git跟传统的代码管理器(如:svn)不同, 主要区别在于git多了个本地仓库以及缓存区,所以即使 ...
- String,StringBuilder,StringBuffer区别
一.String,StringBuilder,StringBuffer的大概了解 大家知道String,StringBuilder,StringBuffer三个的基本应用场景. String会一直创建 ...
- Mysql 的远程设置 和链接方式
Mysql 设置远程链接: > grant all privileges on *.* to 用户@localhost identified by '密码'; > flush privil ...
- EcustOJ P109跳一跳(离散化+dp)
题目链接 感觉这道题我看了很多天,胡思乱想啊,一开始觉得记忆化搜索会可能T啊,,可能出题人的数据卡的好就稳T了的感觉..后来想了想,好像离散化一下,记一下位置之后再记忆化搜索就应该稳了吧..(好像直接 ...
- Tomcat清理日志文件无法立即释放磁盘空间
1 自己删除了Tomcat的日志文件,但是依然显示磁盘百分百占用 进入Tomcat目录显示日志已经删除 查询磁盘空间依旧百分百占用 2 自己杀死Tomcat进程然后重启,成功释放空间 3 原因,通过网 ...
- python基础学习11天,作业题
1. 文件a.txt内容:每一行内容分别为商品名字,价钱,个数. apple 10 3 tesla 100000 1 mac 3000 2 lenovo 30000 3 chicken 10 3 通过 ...
- HashMap的源码,实现原理,底层结构
转载一遍不错的文章,让你深入了解HashMap http://www.cnblogs.com/ITtangtang/p/3948406.html
- 将本地项目上传到git
1.新建一个README.md的文件,并将项目名写入此文件(一般第三方git服务会在创建在创建项目的时候自动创建该文件,可以跳过这一步) echo "# Lee" >> ...