Skip to content

week3_HW #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ShuTLIN wants to merge 1 commit into
base: master
Choose a base branch
from
Open

week3_HW #12

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
192 changes: 192 additions & 0 deletions 2017-deadlineclub-s0461117.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,192 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>

<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.3/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>

<nav class="navbar navbar-default navbar-inverse" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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="#">個人履歷表</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">List_1</a></li>
<li><a href="#">List_2</a></li>
<li><a href="#">List_3</a></li>
<li><a href="#">List_4</a></li>
<li>
<button type="button" class="btn btn-default navbar-btn btn-warning"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>Button</button>
</li>
</ul>



</div><!-- /.navbar-collapse -->
</nav>


Copy link

@Evafly Evafly Aug 9, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

如果有使用row包網格系統的話，那一定要再row外層再包一個<div class="container"></div>或<div class="container-fluid"></div>，才不會跑版

<div class="row">

<div class="col-xs-12 col-sm-8 col-md-8 col-lg-10">

<ol class="breadcrumb">
<li>
<a href="#">Home</a>
</li>
<li class="active">Current</li>
</ol>


<div class="row">


<div class="col-xs-12 col-sm-10 col-md-10 col-lg-10 col-sm-offset-1 col-md-offset-1 col-lg-offset-1 panel panel-default ">
Copy link

@Evafly Evafly Aug 9, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

用網格包住<div class="panel panel-default"></div>這樣才不會有左右2側空白凸出來的問題

<div class="panel-heading text-center"><h3>個人簡歷表</h3></div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 ">

<table class="table">
<tbody>
<tr>
<td class="text-center"><h4>姓名:</h4></td>
<td class="text-center"><h4>林書廷</h4></td>
</tr>
<tr>
<td class="text-center"><h4>生日:</h4></td>
<td class="text-center"><h4>2017/10/09</h4></td>
</tr>
<tr>
<td class="text-center"><h4>手機:</h4></td>
<td class="text-center"><h4>0927715810</h4></td>
</tr>
<tr>
<td class="text-center"><h4>學歷:</h4></td>
<td class="text-center"><h4>大學三年級</h4></td>
</tr>

</tbody>
</table>

</div>

<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 ">
<img src="http://fakeimg.pl/300/">
Copy link

@Evafly Evafly Aug 9, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

圖片加上img-responsive的class會自適應才不會超出版面

</div>
</div>

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

<table class="table">
<tbody>
<tr>
<td class="text-center"><h4>通訊地址:</h4></td>
<td class="text-center"><h4>彰化縣彰化市進德路1號</h4></td>
</tr>
<tr>
<td class="text-center"><h4>專長:</h4></td>
<td class="text-center">
<ul>
<li>PS</li>
<li>AI</li>
<li>C++</li>
</ul>
</td>
</tr>
<tr>
<td class="text-center"><h4>興趣:</h4></td>
<td class="text-center"><h4>跳舞,運動</h4></td>
</tr>
<tr>
<td class="text-center"><h4>社團經歷:</h4></td>
<td class="text-center"><h4>熱舞社</h4></td>
</tr>
<tr>
<td class="text-center"><h4>工作經歷:</h4></td>
<td class="text-center"><h4>無</h4></td>
</tr>
</tbody>
</table>

</div>

</div>

</div>

</div>


</div>


<div class="col-xs-12 col-sm-4 col-md-4 col-lg-2">



<div class="list-group">
<a href="#" class="list-group-item active">list_1</a>
<a href="#" class="list-group-item">list_2</a>
<a href="#" class="list-group-item">list_3</a>
<a href="#" class="list-group-item">list_4</a>

</div>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Panel</h3>
</div>
<div class="panel-body">
個人簡歷介紹........
</div>
</div>




</div>

</div>





<footer class="panel panel-default panel-info">
<div class="panel-footer text-center">
<p>林書廷_個人簡介表</p>
<p>106台北市大安區 OOOOOOOOOO 樓</p>
<p>電話(不含例假日): 02-000-0000</p>
</div>
</footer>



<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>