Day 058

63910 ワード

Udemy Python Bootcamp Day 058

Bootstrap

Bootstrap is very firmly on the front end. It's a bunch of code that was written to be reusable that you can drop into your site and it'll make designing the web site much easier for you.
CDN stands for Contect Delivery Network, ans the concept is really simple. They've hosted their Bootstrap CSS files on MaxCDN, which has a whole nubmer of routing points across the world. So that means when your users are trying to load up your web site that's using Boorstrap, then it can access it relatively quickly no matter where in the world they are.
When youe browser reaches the link, it'll look for the shortest route to download the CSS file if the user doesn't already have it.

Starter template

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

    <!-- Option 2: jQuery, Popper.js, and Bootstrap JS
    <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/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Wireframing

Wireframes are a low fidelity representation of your design. Before you write down any code, you want to be able to get buy in on your designs and be able to iterate through your design process.
https://balsamiq.com/
https://sneakpeekit.com/

Navigation Bar

(スタートバンドTwitter(?)続いて原色は青…!

<nav class="navbar navbar-expand-lg navbar-dark bg-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>

https://www.codeply.com/p/GVJU3ipWxP

Grid Layout System

<div class="row">
    <div class="col" style="background-color:red; border: 1px solid;">
        col
    </div>
    <div class="col" style="background-color:red; border: 1px solid;">
        col
    </div>
</div>

<div class="row">
    <div class="col-6" style="background-color:green; border: 1px solid">
        col-6
    </div>
    <div class="col-6" style="background-color:green; border: 1px solid">
        col-6
    </div>
</div>

<div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6" style="background-color:yellow; border: 1px solid">
        col-lg-3 col-md-4 col-sm-6
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6" style="background-color:yellow; border: 1px solid">
        col-lg-3 col-md-4 col-sm-6
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6" style="background-color:yellow; border: 1px solid">
        col-lg-3 col-md-4 col-sm-6
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6" style="background-color:yellow; border: 1px solid">
        col-lg-3 col-md-4 col-sm-6
    </div>    
</div>

<div class="row">
    <div class="col-lg-2 col-md-3"style="background-color:grey; border: 1px solid" >
        col-lg-2 col-md-3
    </div>
    <div class="col-lg-2 col-md-3"style="background-color:grey; border: 1px solid" >
        col-lg-2 col-md-3
    </div>
    <div class="col-lg-2 col-md-3"style="background-color:grey; border: 1px solid" >
        col-lg-2 col-md-3
    </div>
    <div class="col-lg-2 col-md-3"style="background-color:grey; border: 1px solid" >
        col-lg-2 col-md-3
    </div>
    <div class="col-lg-2 col-md-3"style="background-color:grey; border: 1px solid" >
        col-lg-2 col-md-3
    </div>
    <div class="col-lg-2 col-md-3"style="background-color:grey; border: 1px solid" >
        col-lg-2 col-md-3
    </div>
</div>

col-lg-2

col-md-3

col-sm-6

Container

<div class="container">
  <!-- Content here -->
</div>

<div class="container-fluid">
  ...
</div>

Button

<button type="button" class="btn btn-dark btn-lg"><i class="fa-brands fa-apple"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg"><i class="fa-brands fa-google-play"></i> Download</button>

add icons:
https://fontawesome.com/icons?d=gallery&q=apple

Carousel

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Card

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Z-index

div {
    border: 1px solid;
    width: 100px;
    height: 100px;
}

.red-box {
    background-color: red;
    position: absolute;
}

.green-box {
    background-color: green;
    top: 20px;
    left: 20px;
    position: relative;
    z-index: 10;
}

.yellow-box {
    background-color: yellow;
    top: 40px;
    left: 40px;
}

CSS

Media Query Breakpoints

@media (max-width: 1028px) {

  #title {
    text-align: center;
  }

  .title-image {
    position: static;
    transform: rotate(0);
  }
}

Combining Selectors

Multiple Selectors

selector1, selector2 {

}

Hierarchical Selectors
Spacing is crucial. and read right to left (e.g. selector2 inside selector1).

selector1 selector2 {

}

Combined Selectors
all of the selectors have to be within the same HTML element.

selector1selector2 {

}

Selector priority

<h1 id="heading" class="title">Hello World</h1>

The last CSS rule change will be the one that will be carried out. It's reading the code top to bottom.

h1 {
    color: red;
    color: green;
}

A class is more specific thatn an HTML element.

h1 {
    color: red;
}

.title {
    color: yellow;
}

The id has the highest priority of all.

h1 {
    color: red;
}

.title {
    color: yellow;
}

#heading {
    color: blue;
}

Inline style is even higher that the ids and that is overriding all of our external stylesheet.
Avoid inline styles at all costs.

<h1 id="heading" class="title" style="color: orange">Hello World</h1>

Use ids really sparingly, and Recommend to only use it really for those sections and parts of code that definitely need an id.

Code Refactoring

Readability

Modularity

Efficiency

Length

FINAL

https://gist.github.com/awesomekimn/0784ae13ed74460f0b3d6b3d004b0ce6

Reference

この問題について(Day 058), 我々は、より多くの情報をここで見つけました https://velog.io/@awesomee/Day-058

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

[algo]遡及(BackTracking)とは?

コトリン1