Bootstrap技术基础学习

傷城~ 2023-01-23 13:58 9阅读 0赞

### 文章目录 ###

*  Lesson03-周四、周五（7.15）
 *   *  总结
     *  一、Bootstrap技术
     *   *  Bootstrap介绍
         *  Bootstrap的使用
         *  如何学习
         *  工作原理
         *  如何在github上搭建静态网站
         *  环境配置
     *  二、 Bootstrap表格
     *  三、个人存款计算软件界面练习
     *  四、个人社保计算软件界面

# Lesson03-周四、周五（7.15） #

## 总结 ##

*  如果使用`Bootstrap`样式，建议所有地方均使用`Bootstrap`样式初学者不建议混着用。`Bootstrap`追求的是自适应，不太讲究美观。

## 一、Bootstrap技术 ##

### Bootstrap介绍 ###

*  由`Twitter`公司发明的技术
 *  用`Bootstrap`做的网页，能够自动适应屏幕大小（自适式、响应式）
 *  移动端优先，伴随智能手机而来
 *  `Bootstrap`技术是基于`HTML、CSS、JavaScript`
 *  `Bootstrsp`本质：写好的CSS样式库
 *  `Bootstrap`不是变成语言，而是一种技术，`CSS`库

### Bootstrap的使用 ###

*  把`Bootstrap`从官网下载复制到自己的项目中
 *  直接使用`CDN`（内容分发网络，本质上是放在公网上的文件）
 *  菜鸟教程中的环境安装
 *  使用`CDN`方式，电脑必须联网

### 如何学习 ###

[官方网站][Link 1]，该站点上找到所有可用的文档和下载。

### 工作原理 ###

*  网格系统：把屏幕分为12列，使用者可以按需自由组合
 *  使用`Bootstrap`后，无需自己写`CSS`样式，直接用即可

### 如何在github上搭建静态网站 ###

*  注册GitHub账号
 *  创建一个项目
 *  把写好的网页上传到项目中
 *  在设置中找到`pages`，点击`main` ，点击`save`。

### 环境配置 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center]

<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
     
    
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
     
    
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

或去下载[官方版本][Link 2]

## 二、 Bootstrap表格 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 1]  
**table-hover**：鼠标悬停状态即鼠标点到处变为灰色  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 2]  
**table-condensed**：行内边距（padding）被切为两半![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 3]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>Bootstrap表格</title>
    		
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
     
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
     
    <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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 4]

## 三、个人存款计算软件界面练习 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>网上银行-个人存款在线计算器</title>
    		
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
     
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
     
    <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">   
    					<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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 5]

## 四、个人社保计算软件界面 ##

为`JS`提供帮助，用`JS`代码实现计算过程

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>个人社保计算</title>
    		
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
     
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
     
    <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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 6]

[Link 1]: https://getbootstrap.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center]: /images/20221004/9ab6f251c78340adae9273692ebb6b41.png
[Link 2]: http://getbootstrap.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221004/f428443dca254253a73472dabeb6fcd4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221004/dba53e78e3e44194b42456cd49c37140.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221004/6bc113a749394864a541b3b03de2d4d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221004/da8e20cc60224e9ea89ca363d4d774f3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221004/7a0bff81fdbf499bb50f3a6df3161835.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221004/bd115b9f47ab404fb3f80ca4fd43c2d2.png