본문 바로가기
공부 기록/HTML & CSS

부트스트랩 연습(2) - Grid, Form, navbar

yurison 2023. 1. 18. 17:47

- XL size layout

- MD size layout & navbar

- SM size layout

.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap Grid and Form</title>
    <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="app2.css" />
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary shadow">
      <a class="navbar-brand" href="#">Yurison</a>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarNav"
        aria-controls="navbarNav"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse my-2 navbar-collapse" id="navbarNav">
        <div class="navbar-nav">
          <a class="nav-link active" href="#"
            >Home <span class="sr-only">(current)</span></a
          >
          <a class="nav-link" href="#">Features</a>
          <a class="nav-link" href="#">Pricing</a>
          <a
            class="nav-link disabled"
            href="#"
            tabindex="-1"
            aria-disabled="true"
            >Disabled</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-success my-2 my-sm-0" type="submit">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
              <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
            </svg>
          </button>
        </form>
      </div>
    </nav>
    <div class="container">
      <h1 class="display-1 text-center my-3">The Grid System</h1>
      <div class="row">
        <div class="col-6 bg-warning">6 UNITS</div>
        <div class="col-6 bg-secondary">6 UNITS</div>
      </div>
      <div class="row">
        <div class="col-8 bg-success">4 UNITS</div>
        <div class="col-4 bg-danger">8 UNITS</div>
      </div>
      <div class="row">
        <div class="col-4 bg-primary">4 UNITS</div>
        <div class="col bg-info">Auto Sized</div>
        <div class="col bg-primary">Auto Sized</div>
        <div class="col bg-info">Auto Sized</div>
      </div>
      <div class="row">
        <div class="col-3 bg-dark">3 UNITS</div>
        <div class="col-6 bg-light">6 UNITS</div>
        <div class="col-3 bg-dark">3 UNITS</div>
      </div>
    </div>

    <div class="container">
      <h2 class="display-4">Responsive Grid</h2>
      <div id="carouselExampleIndicators" class="carousel slide mb-3" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="./img/01.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="./img/02.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="./img/03.jpg" class="d-block w-100" alt="...">
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
      <div class="row">
        <div class="col-md-6 col-xl-4 lead lorem-text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui eaque
          quos recusandae quae perspiciatis nemo similique, magni porro iste in
          corporis ullam, sunt repudiandae inventore eligendi labore animi
          voluptate odio?
        </div>
        <div class="col-md-6 col-xl-4 lead lorem-text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui eaque
          quos recusandae quae perspiciatis nemo similique, magni porro iste in
          corporis ullam, sunt repudiandae inventore eligendi labore animi
          voluptate odio?
        </div>
        <div class="col-md-6 col-xl-4 lead lorem-text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui eaque
          quos recusandae quae perspiciatis nemo similique, magni porro iste in
          corporis ullam, sunt repudiandae inventore eligendi labore animi
          voluptate odio?
        </div>
      </div>
    </div>

    <div class="container">
      <h2 class="display-4">Grid Alignment</h2>
      <div class="row align-items-center">
        <div class="col-md-6 col-xl-4 lead lorem-text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui eaque
          quos recusandae quae perspiciatis nemo similique, magni porro iste in
          corporis ullam, sunt repudiandae inventore eligendi labore animi
          voluptate odio?
        </div>
        <div class="col-md-6 col-xl-4 lead shadow lorem-text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui eaque
          quos recusandae quae perspiciatis nemo similique, magni porro iste in
          corporis ullam, sunt repudiandae inventore eligendi labore animi
          voluptate odio? Lorem ipsum dolor sit amet consectetur adipisicing
          elit. Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </div>
        <div class="col-md-6 col-xl-4 lead lorem-text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui eaque
          quos recusandae quae perspiciatis nemo similique, magni porro iste in
          corporis ullam, sunt repudiandae inventore eligendi labore animi
          voluptate odio?
        </div>
      </div>
    </div>

    <div class="container">
      <h2 class="display-4">Forms</h2>
      <form action="#nowhere">
        <div class="form-row">
          <div class="form-group forms col-md-6">
            <label for="id">* Id</label>
            <input
              type="text"
              class="form-control"
              id="id"
              placeholder="User Id"
            />
          </div>
          <div class="form-group forms col-md-6">
            <label for="pwd">* Password</label>
            <input
              type="password"
              class="form-control"
              id="pwd"
              placeholder="Password"
            />
          </div>
        </div>
        <div class="form-group forms">
          <label for="email">* Email</label>
          <input
            type="email"
            class="form-control"
            id="email"
            placeholder="Email"
          />
        </div>
        <div class="form-row">
          <div class="form-group col-md-4">
            <label for="city">* City</label>
            <input type="text" class="form-control" id="city" />
          </div>
          <div class="form-group col-md-4 col-sm-6">
            <label for="state">* State</label>
            <select name="state" id="state" class="form-control">
              <option value="AL">Alabama</option>
              <option value="AK">Alaska</option>
            </select>
          </div>
          <div class="form-group col-md-4 col-sm-6">
            <label for="zip">* Zip code</label>
            <input type="text" class="form-control" id="zip" />
          </div>
        </div>
        <div class="custom-control custom-checkbox">
          <input
            type="checkbox"
            class="custom-control-input"
            id="customCheck1"
          />
          <label class="custom-control-label" for="customCheck1"
            >Check this custom checkbox</label
          >
        </div>
        <div class="form-group row">
          <div class="col-sm-10">
            <button type="submit" class="btn btn-primary px-3">Sign in</div>
        </div>
      </form>
    </div>

    <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>
  </body>
</html>

.css

.display-1 {
  font-size: 4rem;
  font-weight: 200;
}

.col-6,
.col-4,
.col-8,
.col-3,
.col {
  height: 2rem;
  font-weight: 100;
  color: white;
  margin: 0.5vh 0;
  padding-top: 0.3vh;
}

.bg-light,
.bg-dark {
  text-align: center;
  font-weight: 600;
  color: #ccc;
}

.display-4 {
  font-size: 2rem;
  margin-top: 3rem;
  padding: 0 1rem;
  border-top: 3px solid blueviolet;
  border-bottom: 1px solid blueviolet;
  color: blueviolet;
}

.container {
  padding: 0;
}

.row {
  padding: 0 1rem;
}

.lorem-text {
  color: black;
  margin: 1vh 0;
}

.forms,
.custom-checkbox {
  margin: 0 1rem;
}

.btn-primary {
  color: #fff;
  background-color: blueviolet;
  border-color: blueviolet;
  margin-top: 1rem;
}

.btn-primary:hover {
  color: #fff;
  background-color: rgb(93, 21, 161);
  border-color: rgb(93, 21, 161);
}

.col-md-6 {
  margin: 0.5rem 0;
}

.form-row {
  padding: 0 1rem;
}

.bg-primary {
  background-color: blueviolet !important;
}

.bg-info {
  background-color: rgb(188, 117, 255) !important;
}

.btn-outline-success {
  color: white;
  border-color: rgb(93, 21, 161);
}

.btn-outline-success:hover {
  color: white;
  background-color: rgb(93, 21, 161);
  border-color: rgb(93, 21, 161);
}

.navbar-brand {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 90%;
}

Bootstrap Icons

https://icons.getbootstrap.com

 

Bootstrap Icons

Official open source SVG icon library for Bootstrap

icons.getbootstrap.com

'공부 기록 > HTML & CSS' 카테고리의 다른 글

부트스트랩 연습(1)  (0) 2023.01.18
간단한 실습(2) - Price Table (반응형 디자인과 reset CSS)  (0) 2023.01.18
간단한 실습(1) - Photo site  (0) 2023.01.18
Button :hover  (0) 2023.01.18
Form  (0) 2023.01.18

'공부 기록/HTML & CSS' Related Articles

티스토리툴바