Section 12

101637 단어 udemy bootstrap web developer bootstrap

Udemy Web Developer Bootcamp Section 12

CSS Framework: Bootstrap

Bootstrap

Bootstrap helps us quickly build responsive websites.

Components
Bootstrap gives us access to a bunch of pre-build components that we can incorporate into our own websites.
Grid System
Bootstrap also comes with a grid system, which helps us construct our own custom, responsive layouts.

Including Bootstrap & Container

There's a couple of different options for how we include the bootstrap stylesheet and the JavaScript scripts.

One options is to download everything onto our machanic and link to it.

The other option is to use something called a CDN. CDN stands for a content delivery network or distribution network. It's essentially a hosted version of a stylesheet that we can access remotely.

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

The other thing we should mention, there are these scripts, these three script text.
That we do need to include, if we want access to every part of bootstrap. So certain components require JavaScript and we can see them here.

<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>

Container all-in-one
Containers are the most basic layout element in Bootstrap and are required when using our default grid system.
So what a container does is that they contain and pad content within them. Basically, it's a quick way to get some space and container content.
```
<div class="container">
  
</div>
```
Container fluid
Container fluid is going to be a full with container and it will spend the entire width of the wiewport.
```
<div class="container-fluid">
  ...
</div>
```

Container responsive
What these will do is allow us to say we want the container to be all the way across the screen 100% wide until you hit the small break point or the large or the extra large.

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>

Bootstrap Buttons

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button class="btn btn-outline-warning">Warning Outline</button>
<button class="btn btn-outline-danger">Danger Outline</button>
<button class="btn btn-outline-info btn-lg">Info Outline</button>
<button class="btn btn-secondary btn-sm">SM Button</button>
<button type="button" class="btn btn-success" disabled>Success Disabled</button>

Bootstrap Typography & Utilities

Display

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

Lead

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>

Blockquotes

<blockquote class="blockquote">
  <p class="mb-0">Lorem*2</p>
  <footer class="blockquote-footer">Mr. Lorem Ipsum</footer>
</blockquote>

Utilities

<h1 class="display-1 text-center text-primary">Bootstrap Playground</h1>

Badges, Alerts & Button Groups

Badges

<h2 class="display-4">Buttons <span class="badge badge-success badge-pill">New</span></h2>
<button class="btn btn-primary">Updates <span class="badge badge-light">9</span></button>

Button Groups

<h3>Button Groups</h3>
<div class="btn-group">
  <button class="btn btn-warning">One</button>
  <button class="btn btn-warning">Two</button>
  <button class="btn btn-warning">Three</button>
</div>

Alerts

<h3>Alerts</h3>
<div class="alert alert-danger alert-dismissible fade show" role="alert">
  <h4 class="alert-heading">Oh No!</h4>
  Danger! You are about to end the world as we know it!
  <button aria-label="Close" class="close" data-dismiss="alert">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

The Bootstrap Grid

Grids

<div class="row">
  <div class="col-2 bg-success">I AM 2 UNITS</div>
  <div class="col-8 bg-danger">I AM 8 UNITS</div>
  <div class="col-2 bg-success">I AM 2 UNITS</div>
</div>
<div class="row">
  <div class="col-3 bg-info">I AM 3 UNITS</div>
  <div class="col-6 bg-warning">I AM 6 UNITS</div>
  <div class="col-3 bg-info">I AM 3 UNITS</div>
</div>
<div class="row">
  <div class="col bg-primary">I AM AUTO SIZED</div>
  <div class="col bg-secondary">I AM AUTO SIZED</div>
  <div class="col-8 bg-primary">I AM 8 UNITS</div>
</div>

Responsive Grids

<h2 class="display-4">Responsive Grid</h2>
<div class="row">
  <div class="col-md-6 col-xl-3 bg-info">
    Lorem*2
  </div>
  <div class="col-md-6 col-xl-3 bg-success">
    Lorem*2
  </div>
  <div class="col-md-6 col-xl-3 bg-info">
    Lorem*2
  </div>
  <div class="col-md-6 col-xl-3 bg-success">
    Lorem*2
  </div>
</div>
```

col-xl-3

col-md-6

Responsive images

<div class="row">
  <div class="col-xl-4 col-md-6">
    <img class="img-fluid"
         src="https://images.unsplash.com/photo-1589595363745-d842812a9db7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
         alt="">
  </div>

  <div class="col-xl-4 col-md-6">
    <img class="img-fluid"
         src="https://images.unsplash.com/photo-1511692277506-3be3a7ab1686?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
         alt="">
  </div>
  <div class="col-xl-4 col-md-6">
    <img class="img-fluid"
         src="https://images.unsplash.com/photo-1497206365907-f5e630693df0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
         alt="">
  </div>
</div>

col-xl-4

col-md-6

Grid Utilities

Grid Alignment

<h2>Grid Alignment</h2>
<div class="row align-items-center">
  <div class="col-3 bg-danger">
    Lorem*1
  </div>
  <div class="col-3 bg-warning">
    Lorem*3
  </div>
  <div class="col-3 bg-success">
    Lorem*2
  </div>
  <div class="col-3 bg-info align-self-end">
    Lorem*1
  </div>
</div>

Justify Content

<h3>Justify Content</h3>
<div class="row border justify-content-center justify-content-lg-start justify-content-xl-between">
  <div class="col-md-4 bg-primary">
    Lorem*1
  </div>
  <div class="col-md-4 bg-info">
    Lorem*1
  </div>
</div>

justify-content-xl-between

justify-content-lg-start

justify-content-center

Bootstrap & Forms

<div class="container">
  <h1 class="display-2">Forms</h1>
  <form action="#nowhere">
    <div class="form-row">
      <div class="form-group col-md-6">
        <label for="email">Email</label>
        <input type="email" class="form-control" id="email" placeholder="Email">
      </div>
      <div class="form-group col-md-6">
        <label for="password">Password</label>
        <input type="password" class="form-control" id="password" placeholder="password">
      </div>
    </div>
    <div class="form-group">
      <label for="address">Street Address</label>
      <input type="text" class="form-control" id="address" placeholder="923 Chicken Ranch St">
    </div>
    <div class="form-row">
      <div class="form-group col-md-6">
        <label for="city">City</label>
        <input type="text" class="form-control" id="city">
      </div>
      <div class="form-group col-md-3 col-6">
        <label for="state">State</label>
        <select class="form-control" name="state" id="state">
          <option value="AL">Alabama</option>
          <option value="AK">Alaska</option>
        </select>
      </div>
      <div class="form-group col-md-3 col-6">
        <label for="zip">Zip Code</label>
        <input type="text" class="form-control" id="zip">
      </div>
    </div>
    <div class="form-group">
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="tos">
        <label class="custom-control-label" for="tos">Sign Me Up</label>
      </div>
    </div>
    <button type="submit" class="btn btn-success">Register</button>
  </form>
</div>

email:col-md-6 zip-code:col-md-3

zip-code:col-6

form-group has a margin.

Bootstrap Navbars

<nav class="navbar navbar-expand-sm navbar-dark bg-primary fixed-top">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" data-toggle="collapse" data-target="#expandme">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="expandme">
    <div class="navbar-nav">
      <a href="Home" class="nav-item nav-link">Home</a>
      <a href="About" class="nav-item nav-link">About</a>
      <a href="Contact" class="nav-item nav-link">Contact</a>
    </div>
    <form class="form-inline ml-auto">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

ml-auto

navbar-expand-sm

data-target="#expandme"

fixed-top

Bootstrap Icons

<div class="container">
  <h1 class="display-1 text-primary">Icons <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-music-note-beamed" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
    <path d="M6 13c0 1.105-1.12 2-2.5 2S1 14.105 1 13c0-1.104 1.12-2 2.5-2s2.5.896 2.5 2zm9-2c0 1.105-1.12 2-2.5 2s-2.5-.895-2.5-2 1.12-2 2.5-2 2.5.895 2.5 2z" />
    <path fill-rule="evenodd" d="M14 11V2h1v9h-1zM6 3v10H5V3h1z" />
    <path d="M5 2.905a1 1 0 0 1 .9-.995l8-.8a1 1 0 0 1 1.1.995V3L5 4V2.905z" />
    </svg></h1>
  <button class="btn btn-lg btn-danger">Delete <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-trash" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
    <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
    </svg></button>

  <div class="row">
    <div class="col-md-4">
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text"><svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-search" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z" />
            <path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z" />
            </svg></span>
        </div>
        <input type="text" class="form-control" placeholder="Search">
      </div>
    </div>
  </div>
</div>

Other Bootstrap Utilities

Border

<div class="row">
  <div class="col-md-4 border rounded border-success shadow">
    Lorem*2
  </div>
</div>

Padding

<div>
  <button class="btn btn-primary p-0">Padding 0</button>
  <button class="btn btn-primary p-1">Padding 1</button>
  <button class="btn btn-primary p-2">Padding 2</button>
  <button class="btn btn-primary p-3">Padding 3</button>
  <button class="btn btn-primary p-4">Padding 4</button>
  <button class="btn btn-primary p-5">Padding 5</button>
</div>
<div class="my-5">
  <button class="btn btn-primary p-0 pt-5">Padding Top</button>
  <button class="btn btn-primary p-0 pl-5">Padding Left</button>
  <button class="btn btn-primary p-0 pb-5">Padding Bottom</button>
  <button class="btn btn-primary p-0 pr-5">Padding Right</button>
  <button class="btn btn-primary p-0 px-5">Padding X</button>
  <button class="btn btn-primary p-0 py-5">Padding Y</button>
</div>

<button class="btn btn-danger p-0 p-sm-1 p-md-2 p-lg-3 p-xl-5">I CHANGE!</button>

Author And Source

이 문제에 관하여(Section 12), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@awesomee/Section-12

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

[프로젝트 회고] - TwoSpoon

AWS에 기본 웹 애플리케이션 구축해보기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다