Bootstrap

1. bootstrap.css를 불러오고, 해당 파일에 정의된 버튼, 레이아웃등을 가져와서 사용

2. 클래스로 간단하게 불러와서 사용

 

적용방법

1. 헤더에 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css">

2. 다운 받은 다음 <link rel"stylesheet" href="./bootstrap.min.css">

<a class="btn btn-default">이름</a> => 버튼

<a class="btn btn-danger"> =>빨간색 버튼

&nbsp; => 의미없는 공백

 

버전 3와 4의 차이(위는 3)

css 와 화면 그리드에서 px(3) -> em(4)

IE8 이하 버전 지원 종료(4)

 

3이용 이유- 사용 가능한 기반 플러그인들 많음

관리자 페이지 사용 가능

summernote 사용 가능

 

레이아웃

다 더하면 12, 한줄은 12로 되어 있다.

<div class="col-sm-4"></div> => bold의 숫자들의 합이 12가 되도록, 12 넘으면 다음줄로 넘어감

화면 사이즈	표현
768px 보다 클때	col-sm-
970px 보다 클때	col-md
1170px  보다 클때	col-lg
768px  보다 작을 때	col-xs-

ex) 768px 작을때는 1, 768px 이상에서는 2, 970px이상에서는 3

<div class="col-sm-6 col-md-4"></div> *3

 

콤포넌트

bootstrapk.com reference

btn btn-default(흰)/btn-primary(파)/btn-success(초)/btn-danger(빨)/btn-info(하)/btn-warning(주)

 

테이블

<div class="table table-bordered table-hover"

 

패널

<div class="panel panel-default">

      <div class="panel-heading">

      </div>

      <div class="panel-body">

      </div>

</div>

 

폼

<li class="form-inline">

    <input type="text" class="form-control">

 type="password" or 

생년월일

<select name="" id="" class="form-control">

    <option value="" ></option

약관

<li class="form-inline">

    <input type="checkbox" id="agree">

    <label for="agree">

 

네비게이션

JQuery+ bootstrap.min.js 두가지를 필요로함

JQuery CDN version 3 헤어 부분 JQuery 먼저 나와야함 순서상

<script>JQuery code</script>

bootstrap.min.js

<script>bootstrap.min.js</script>

 

<nav class="navbar navbar-default( or inverse)">

     <div class="container-fluid">

         <div class"navbar-header">

              <button type="button" class="collapsed navbar-toggle" data-toggle="collapse" data-target="#nav_menu" aria-expanded="false">

                    <span class="sr-only">

                    <span class="icon-bar">*3      

         <div class="collaps navbar-collaps" id="nav_menu">

              <ul class="nav navbar-nav">

                   <li class="active"> //활성화

 

font awesome(icon 필요할경우)

<a class="btn btn-lg btn-primary btn-blcok">

   <i class="fa fa-facebook" aria-hidden="true"></i>

   페이스북 로그인

</a>

fontawesome.com에서 icon 검색해서 넣음

 

페이지네이션 페이지 리스트

 

sb-admin:관리자 페이지1. bootstrap.css를 불러오고, 해당 파일에 정의된 버튼, 레이아웃등을 가져와서 사용

 

2. 클래스로 간단하게 불러와서 사용

 

 

 

적용방법

 

1. 헤더에 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css">

 

2. 다운 받은 다음 <link rel"stylesheet" href="./bootstrap.min.css">

 

<a class="btn btn-default">이름</a> => 버튼

 

<a class="btn btn-danger"> =>빨간색 버튼

 

&nbsp; => 의미없는 공백

 

 

 

버전 3와 4의 차이(위는 3)

 

css 와 화면 그리드에서 px(3) -> em(4)

 

IE8 이하 버전 지원 종료(4)

 

 

 

3이용 이유- 사용 가능한 기반 플러그인들 많음

 

관리자 페이지 사용 가능

 

summernote 사용 가능

 

 

 

레이아웃

 

다 더하면 12, 한줄은 12로 되어 있다.

 

<div class="col-sm-4"></div> => bold의 숫자들의 합이 12가 되도록, 12 넘으면 다음줄로 넘어감

 

화면 사이즈 표현

768px 보다 클때 col-sm-

970px 보다 클때 col-md

1170px 보다 클때 col-lg

768px 보다 작을 때 col-xs-

ex) 768px 작을때는 1, 768px 이상에서는 2, 970px이상에서는 3

 

<div class="col-sm-6 col-md-4"></div> *3

 

 

 

콤포넌트

 

bootstrapk.com reference

 

btn btn-default(흰)/btn-primary(파)/btn-success(초)/btn-danger(빨)/btn-info(하)/btn-warning(주)

 

 

 

테이블

 

<div class="table table-bordered table-hover"

 

 

 

패널

 

<div class="panel panel-default">

 

      <div class="panel-heading">

 

      </div>

 

      <div class="panel-body">

 

      </div>

 

</div>

 

 

 

폼

 

<li class="form-inline">

 

    <input type="text" class="form-control">

 

 type="password" or 

 

생년월일

 

<select name="" id="" class="form-control">

 

    <option value="" ></option

 

약관

 

<li class="form-inline">

 

    <input type="checkbox" id="agree">

 

    <label for="agree">

 

 

 

네비게이션

 

JQuery+ bootstrap.min.js 두가지를 필요로함

 

JQuery CDN version 3 헤어 부분 JQuery 먼저 나와야함 순서상

 

<script>JQuery code</script>

 

bootstrap.min.js

 

<script>bootstrap.min.js</script>

 

 

 

<nav class="navbar navbar-default( or inverse)">

 

     <div class="container-fluid">

 

         <div class"navbar-header">

 

              <button type="button" class="collapsed navbar-toggle" data-toggle="collapse" data-target="#nav_menu" aria-expanded="false">

 

                    <span class="sr-only">

 

                    <span class="icon-bar">*3      

 

         <div class="collaps navbar-collaps" id="nav_menu">

 

              <ul class="nav navbar-nav">

 

                   <li class="active"> //활성화

 

 

 

font awesome(icon 필요할경우)

 

<a class="btn btn-lg btn-primary btn-blcok">

 

   <i class="fa fa-facebook" aria-hidden="true"></i>

 

   페이스북 로그인

 

</a>

 

fontawesome.com에서 icon 검색해서 넣음

 

 

 

페이지네이션 페이지 리스트

 

 

 

sb-admin:관리자 페이지