文章目录
Lesson03-周四、周五（7.15）
总结
- 如果使用
Bootstrap样式，建议所有地方均使用Bootstrap样式初学者不建议混着用。Bootstrap追求的是自适应，不太讲究美观。
一、Bootstrap技术
Bootstrap介绍
- 由
Twitter公司发明的技术 - 用
Bootstrap做的网页，能够自动适应屏幕大小（自适式、响应式） - 移动端优先，伴随智能手机而来
Bootstrap技术是基于HTML、CSS、JavaScriptBootstrsp本质：写好的CSS样式库Bootstrap不是变成语言，而是一种技术，CSS库
Bootstrap的使用
- 把
Bootstrap从官网下载复制到自己的项目中 - 直接使用
CDN（内容分发网络，本质上是放在公网上的文件） - 菜鸟教程中的环境安装
- 使用
CDN方式，电脑必须联网
如何学习
官方网站，该站点上找到所有可用的文档和下载。
工作原理
- 网格系统：把屏幕分为12列，使用者可以按需自由组合
- 使用
Bootstrap后，无需自己写CSS样式，直接用即可
如何在github上搭建静态网站
- 注册GitHub账号
- 创建一个项目
- 把写好的网页上传到项目中
- 在设置中找到
pages，点击main，点击save。
环境配置
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
或去下载官方版本
二、 Bootstrap表格
table-hover：鼠标悬停状态即鼠标点到处变为灰色
table-condensed：行内边距（padding）被切为两半
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap表格</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>主要岗位列表</h1>
<!-- 表格 +边框线 +居中对齐 +隔行交替显示-->
<table class="table table-bordered text-center table-striped">
<tr>
<td>编号</td>
<td>岗位名称</td>
<td>岗位说明</td>
<td>薪资情况</td>
</tr>
<tr>
<td>1</td>
<td>Java研发工程师</td>
<td>开发大型管理信息化系统</td>
<td>经验越丰富工资越高</td>
</tr>
<tr>
<td>2</td>
<td>c/c++研发工程师</td>
<td>开发嵌入式软件、操作系统底层软件、算法</td>
<td>个人能力+技术+经验决定待遇</td>
</tr>
<tr>
<td>3</td>
<td>web前端开发研发工程师</td>
<td>开发纯前端、前后端分离</td>
<td>个人能力+技术+经验决定待遇</td>
</tr>
</table>
</div>
</body>
</html>
三、个人存款计算软件界面练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网上银行-个人存款在线计算器</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container text-center">
<h1>个人网银-个人存款计算</h1>
<table class="table table-bordered text-center">
<tr class="bg-primary"> <!--bg为background的缩写，primary为蓝色-->
<td colspan="2px">个人存款计算机</td>
</tr>
<tr>
<td>存款金额</td>
<td>
<input class="form-control" type="text" id="amount" placeholder="请输入存款金额">
</td>
</tr>
<tr>
<td>存款年限</td>
<td>
<select id="year" class="form-control" >
<option value="0.0175">一年（1.75%）</option>
<option value="0.0225">两年(2.25%)</option>
<option value="0.0275">三年(2.75%)</option>
<option value="0.0275">五年(2.75%)</option>
</select>
</td>
</tr>
<tr>
<td>所得利息</td>
<td>
<input type="text" class="form-control" readonly="readonly">
</td>
</tr>
<tr>
<td>本息合计</td>
<td>
<input type="text" id="total" class="form-control" readonly="readonly">
</td>
</tr>
<tr>
<td colspan="2px">
<!-- 按钮 蓝色按钮 占满整个格-->
<button class=" btn btn-primary btn-block">计算</button>
</td>
</tr>
</table>
开发者：2013041407 郭泳妍 中北大学软件学院2020级
</div>
</body>
</html>
四、个人社保计算软件界面
为JS提供帮助，用JS代码实现计算过程
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>个人社保计算</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container text-center">
<img src="nuclogo.jpg" class="img-circle" width="100px" height="100px">
<table class="table table-bordered text-center">
<tr>
<td>工资</td>
<td colspan="3px">
<input type="text" id="salary" placeholder="请输入工资" class="form-control">
</td>
<td>
<button class="btn btn-danger btn-block">计算</button>
</td>
</tr>
<tr class="bg-primary">
<td>险种</td>
<td>个人%</td>
<td>个人</td>
<td>公司%</td>
<td>公司</td>
</tr>
<tr>
<td>养老</td>
<td>8%</td>
<td></td>
<td>20%</td>
<td></td>
</tr>
<tr>
<td>医疗保险</td>
<td>2%</td>
<td></td>
<td>6%</td>
<td></td>
</tr>
<tr>
<td>失业</td>
<td>0.5%</td>
<td></td>
<td>1.5%</td>
<td></td>
</tr>
<tr>
<td>工伤</td>
<td></td>
<td></td>
<td>0.5%</td>
<td></td>
</tr>
<tr>
<td>生育</td>
<td></td>
<td></td>
<td>0.8%</td>
<td></td>
</tr>
<tr>
<td>公积金</td>
<td>12%</td>
<td></td>
<td>12%</td>
<td></td>
</tr>
<tr>
<td>合计</td>
<td>个人合计</td>
<td></td>
<td>公司合计<td>
</tr>
<tr>
<td>总额</td>
<td colspan="4"></td>
</tr>
</table>
开发者信息：2013041407 郭泳妍
</div>
</body>
</html>
942
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
