본문 바로가기
Web Dev

Introduction to Bootstrap - PART III

by YGSEO 2020. 12. 24.
728x90

1. Responsive div

    <!-- Title -->

    <div class="row">
      
      <div class="col-lg-6">
        <h1>Meet new and interesting dogs nearby.</h1>
        <button type="button">Download</button>
        <button type="button">Download</button>
      </div>
      
    
      <div class="col-lg-6">
        <img src="images/iphone6.png" alt="iphone-mockup">
      </div>
    </div>

Trouble shooting - CSS style order

[ Problem ] Can't change the font-weight by applying google fonts

stackoverflow.com/questions/38153600/why-is-google-font-weight-not-working/38153695

 

Why is google font weight not working?

I'm trying to change h1 to font-weight: 300. Except when I did: .h1{ font-weight: 300; } Nothing happened! So to test the font weight on other text elements, I set the entire encapsulating

stackoverflow.com

Change the order of stylesheet

<BEFORE>

<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<AFTER>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">

This means that you first load the default bootstrap styles, then you can override some of those components with your own custom CSS.

Unlike CSS and JavaScript, HTML code is executed from top to bottom so the order of your code matters.

 

Done.

 

[ Solution ] One that's visible at the end is the one applied last.

 

2. Bootstrap Containers

Container automatically narrow or expand width fully responsively.

Normal container do jumps.

fluid container move step by step

3. Bootstrap Buttons & Font

 

 

Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

getbootstrap.com

font & icon toolkit

 

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

fontawesome.com

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>TinDog</title>
  
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;900&family=Ubuntu:ital,wght@0,700;1,700&display=swap&display=swap" rel="stylesheet">

  <!-- CSS stylesheet -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <link rel="stylesheet" href="css/styles.css">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link rel="preconnect" href="https://fonts.gstatic.com">

  

  <!-- Bootstrap Scripts -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
  
  <!-- Font Awesome -->
  <script src="https://kit.fontawesome.com/78f8a2404c.js" crossorigin="anonymous"></script>

</head>

<body>

  <section id="title">
    <div class="container-fluid">

      <!-- Nav Bar -->

      <nav class="navbar navbar-expand-lg navbar-dark">
        <a class="navbar-brand" href="">Tindog</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ml-auto">
              <li class="nav-item">
                  <a class="nav-link" href="">Contact</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="">Pricing</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="">Download</a>
              </li>
          </ul>
        </div>
      </nav>


      <!-- Title -->

      <div class="row">
        
        <div class="col-lg-6">
          <h1>Meet new and interesting dogs nearby.</h1>
          <button type="button" class="btn btn-dark btn-lg download-button"><i class="fab fa-apple"></i> Download</button>
          <button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fab fa-google-play"></i> Download</button>
          
        </div>
        
      
        <div class="col-lg-6">
          <img class='title-img' src="images/iphone6.png" alt="iphone-mockup">
        </div>
      </div>

    </div>
  </section>


  <!-- Features -->

  <section id="features">

  <div class="row">
    <div class="feature-box col-lg-4">
      <i class="icon fas fa-check-circle fa-4x"></i>
      <h3>Easy to use.</h3>
      <p>So easy to use, even your dog could do it.</p>
    </div>
    <div class="feature-box col-lg-4">
      <i class="icon fas fa-bullseye fa-4x"></i>
      <h3>Elite Clientele</h3>
      <p>We have all the dogs, the greatest dogs.</p>
    </div>
    <div class="feature-box col-lg-4">
      <i class="icon fas fa-heart fa-4x"></i>
      <h3>Guaranteed to work.</h3>
      <p>Find the love of your dog's life or your money back.</p>
    </div>
  </div>     
  
  </section>


</body>

</html>

body {
    font-family: "Montserrat";
}

#title {
    background-color: #ff4c68;
    color: white;
}

h1 {  
    font-family: 'Montserrat', sans-serif;  
    font-size: 2.5rem;  
    /* color: white; */
    line-height: 1.5;  
    font-weight: 900;
    /* margin: 40px 0px */
}

h3 {
    font-family: 'Montserrat', sans-serif; 
    font-weight: 900;
}

p {
    color: gray;
}


.container-fluid {
    padding: 3% 15%;
}

/* Navigation Bar */
.navbar-brand {
    font-family: 'Ubuntu', sans-serif;
    font-size: 4rem;
    font-weight: 700;
}

.nav-item {
    padding: 0 18px
}

.navbar {
    padding: 0 0 4.5rem;
}

.nav-link {
    margin: 0 10px;
    font-family: 'Montserrat';
    font-size: 1.2rem;
    font-weight: 500;
    color: red;
}

.title-img {
    transform: rotate(17deg); 
    /* background-color: pink; */
    padding: 0px 10px;
    width: 60%;
    /* position: absolute;
    right: 140px; */
  }

.download-button {
    margin: 5% 3% 5% 0;
}

/* Feature Section */
#features {
    padding: 7% 15%;
}

.feature-box {
    text-align: center;
    padding: 5%;
}

.icon {
    color: #ef8172;
    margin-bottom: 1rem;
}
.icon:hover{
    color: #ff4c68;
}

What I've learned from making title and feature section are:

1. Proper class and Id usage.

  • Like, for each section by using "ID" separate styling was done to each other.
  • And for the boxes in the same section, I should use "class" with common name of its characters.

2. Again, Adequate Padding and Margin is essential.

3. Image transform.rotate

4. Responsive contents

  • By using row and col class with proper breakpoint sizes.

What unclear are:

  • Still Ubuntu font is not applied for unknown reasons.
  • What is section tag in HTML?

 

Section tag

  • 각각의 <section>을 식별할 수단이 필요합니다. 주로 제목(<h1>-<h6>) 요소를 <section>의 자식으로 포함하는 방법을 사용합니다.
  • <section> 요소를 일반 컨테이너로 사용하지 마세요. 특히 단순한 스타일링이 목적이라면 <div> 요소를 사용해야 합니다. 대개, 문서 요약에 해당 구획이 논리적으로 나타나야 하면 <section>이 좋은 선택입니다.

section and div

  • <div> 요소는 "순수" 컨테이너로서 아무것도 표현하지 않습니다. 대신 다른 요소 여럿을 묶어 class나 id 속성으로 꾸미기 쉽도록 돕거나, 문서의 특정 구역이 다른 언어임을 표시(lang 속성 사용)하는 등의 용도로 사용할 수 있습니다.

 

 

medium.com/design-code-repository/html-elements-section-vs-div-vs-article-a8c34e6548cf

 

www.quora.com/What-is-the-difference-between-div-and-section-tag

 

728x90

'Web Dev' 카테고리의 다른 글

CSS position: Relative VS. Absolute  (0) 2020.12.25
Intermediate CSS - PART I  (0) 2020.12.25
Introduction to Bootstrap 4 - PART II  (0) 2020.12.24
Introduction to Bootstrap 4 - PART I  (0) 2020.12.24
Installation Bootstrap 4  (0) 2020.12.23

관련글

댓글

티스토리툴바