0
부트 스트랩의 12 그리드 시스템에 따라 어떻게 센터 아래에있는 jumbotron text-centre 클래스 아래의 이미지 코드를 아래에 배치 할 수 있습니까? 미디어 쿼리를 사용하여 이미지가 반응적이고 모든 장치와 브라우저에 올바르게 맞는지 어떻게 확인합니까?부트 스트랩 사용하기 어떻게해야합니까?
예 1
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a href="http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg" target="_blank">
<img src="http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg" alt="picture of me" style="width:100%">
</a>
</div>
</div>
전체 사이트의 코드는
만큼 이미지가 100 % width 속성 및 height 자동차를 가지고로<!DOCTYPE html>
<html lang="en">
<head>
<title>Liam Docherty Digital Portfolio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
.body {
font-family: "Lato", sans-serif
}
.img {
width: 100%;
height: auto;
}
.thumbmail {
display: flex;
justify-content: center;
align-items: center;
}
@media only screen and (min-width: 600px) {
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
</style>
<body>
<div class="container">
<div class="jumbotron text-center">
<h1>About Me</h1>
<p>Find out more about me!</p>
</div>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg" alt="Nature" style="width:100%">
</a>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="well">
<h3>Who am I?</h3>
<p>My name is Liam Docherty and I'm 17 years old, currently studying at BLANK. In 2016 when I was taking my GCSE exams, I found my passion which was IT. My favourite topic within IT is software development. The reason how I found out this was my main passion with IT is because, I was assigned a task which was to create a website advertising myself to potential employees and really enjoyed learning multiple programming languages.</p>
<p>Overall, I have multiple experience within a range of different sectors within IT. For example, I have knowledge of installing and maintaining hardware and software in a technology system. Moreover, I have experience using application software such as Adobe Photoshop CS6, Adobe Premier Pro CS6 and Adobe Illustrator CS6.</P>
</div>
</div>
<div class="col-sm-4">
<div class="well">
<h3>Skills I can offer</h3>
<p>Front-end Development
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</p>
<p>Installing and maintaining hardware such as
<ul>
<li>Upgrading RAM</li>
<li>Installing network card</li>
<li>Using air duster to reduce dust build up in fan component</li>
</ul>
</p>
<p>Installing and maintaining software such as
<ul>
<li>Upgrading operating system</li>
<li>Installing anti-virus application software</li>
<li>Doing a defragment on hard drive</li>
</ul>
</p>
<p>Experience using application software such as...
<ul>
<li>Adobe Photoshop CS6</li>
<li>Adobe Premier Pro CS6</li>
<li>Adobe Illustrator CS6</li>
</ul>
</p>
</div>
</div>
<div class="col-sm-4">
<div class="well">
<h3>Future goals within IT</h3>
<p><ul>
<li>Improve my skills on using programming language javascript</li>
<li>Learn how to use Adobe After Effects to improve editing skills</li>
<li>Expand my knowledge on bootstrap</li>
</ul></p>
</div>
</div>
</div>
</div>
</body>
</html>