300===Dev Framework/부트스트랩 사용

Bootstrap 사용법

블로글러 2020. 11. 23. 21:54

 

A 기본 세팅 getbootstrap.com/docs/4.5/getting-started/introduction/

-viewport tag는 모바일 스케일링에 필요  

<!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/bootstrap@4.5.3/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/bootstrap@4.5.3/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/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
    -->
  </body>
</html>

 

Data attributes

-only one set of data attribute can be used per element. 

Events

-custom events can be used for unique action. 

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) {
    return e.preventDefault() // stops modal from being shown
  }
})

Programmatic API

-Bootstrap plugins can be used through JS. 

-Asynchronously called

-Starts when transition is started but before it ends. 

$('.btn.danger').button('toggle').addClass('fat')

 

B Layout

-Grid System

: Uses containers, rows, columns to layout and align content.

: Built with flexbox and is fully responsive. 

 

 

-Containers

: used for the default grid system. 

: provide box to center, horizontally pad contents.

: rows are wrappers for columns. 

: size change using propotions default (defined in pixel except extra small) sm (small to extra large defined in pixels) -> md (medium to extra large defined in pixels -> lg -> xl -> fluid

 

                          Extra small<576px  Small≥576px        Medium≥768px     Large≥992px        Extra large≥1200px

.container 100% 540px 720px 960px 1140px
.container-sm 100% 540px 720px 960px 1140px
.container-md 100% 100% 720px 960px 1140px
.container-lg 100% 100% 100% 960px 1140px
.container-xl 100% 100% 100% 100% 1140px
.container-fluid 100% 100% 100% 100% 100%

: Bootstrap grid examples

getbootstrap.com/docs/4.5/examples/grid/#containers

 

Grid Template · Bootstrap

Containers Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint.

getbootstrap.com

:guide to flexbox

css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background

 

Responsive breakpoints

: media queries 

    -Used to create breakpoint for layout

 

728x90
저작자표시 비영리