发表于： 2017-04-11 19:45:51
5 548
今天完成的事情：
1、查看学习资料“简单实用的bootstrap教程”，bootstrap就相当于预定义格式化快捷插件（或者相当于扩展了HTML格式化标签、样式）
2、使用bootstrap基本样式修改任务六代码，
使用bootstrap按钮修改了顶部按钮（使用成功）；
使用BOOTSTRAP 基本样式 栅格布局修改下拉表单所在的行实现一行分为三列（使用失败，调试结果为三列本该在同一行，实际却分成三行显示）明天继续研究
3、写日报
明天计划的事情：
1、看师兄回复；
2、继续用bootstrap修改任务六代码
3、写代码实现超出屏幕部分用省略号代替
4、写日报；
遇到的问题：
1、【如果屏幕过窄时，设置左边的文字被截断出现”…”省略号】这个要求仍然没有完成，按照网上的方法单独另写一个代码可以达到这种效果，但是加到任务六中达不到想要的效果
2、用BOOTSTRAP 基本样式 栅格布局实现一行分成三列失败，边距消不掉或者说一整行（12列）不能充满屏幕
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1; minimum-scale=1;maximum-scale=1; user-scalable=no;">
<title>个人主页</title>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
body{margin: 0px;padding: 0px;}
div.container div.row {
width: 100vw;
margin: 0px;
padding: 0px;
background-color: lightgray;
border-bottom:1px solid red;
text-align:center; }
.col-xs-4{border-right: 1px solid red;}
</style>
</head>
<body>
</div>
<div class="container">
<div class="row">
<div class="col-xs-4 ">占4列</div>
<div class="col-xs-4 ">占4列</div>
<div class="col-xs-4 ">占4列</div>
</div>
</div>
</body>
</html>
收获：
初步接触bootstrap
返回列表
评论