- 분류 전체보기 (302)
250x250
Notice
Recent Posts
Recent Comments
Link
반응형
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- 힙덤프
- CSS
- BFS
- scanner
- Union-find
- 스택
- dfs
- sql
- alter
- string
- javascript
- spring boot
- map
- priority_queue
- date
- List
- set
- union_find
- Properties
- Calendar
- math
- NIO
- html
- JPA
- 스프링부트
- Java
- 큐
- deque
- 리소스모니터링
- GC로그수집
Archives
- Today
- Total
매일 조금씩
01/19 - Bootstrap(2) : 사용법 본문
728x90
반응형
UI
jQuery Core - DOM($)
jQuery UI - manager / jQuery Mobile (hybrid, mobile web) - client
W2UI
...
*highcharts
java - jfreechart
네이버 데이터랩
bootstrap
- template
https://startbootstrap.com/templates
web 1.0 -> web 2.0
- PC / 태블릿 / 스마트폰 = 반응성 => bootstrap
grid(12)
... 이렇게 쓸게 많아지고 복잡해지니까 이걸 쉽게 정리해놓은 라이브러리를 제공한다.
angular.js
react.js
vue.js
(Typescript)
문법검사 - Microsoft (Typescript) -> js
Bootstrap
bootstrap4 에서 bootstrap5로 가면서 많이 바뀌었다.
여기서 참고 하는 자료들은 bootstrap4인데 난 bootstrap5를 사용하므로 참고하는데에 버전차이로 문제가 많았다.
대부분 data-toggle같은 앞에 data가 들어가는 속성명은 전부 data-bs-toggle처럼 data 다음에 bs를 넣어주면 해결이 됐고 그래도 안될 경우 bootstrap5의 해당 기능으로 검색하면 내부 클래스명이 변경 된 것을 확인 가능하고 그걸 참고 해서 수정하면 모두 해결이 됐다.
어제에 이어서..
실습3) Colors
클래스명으로 텍스트의 색상 지정이 가능하다.
> ex05.jsp
<div class="container-fluid">
<p class="text-muted">Text Color</p>
<p class="text-primary">Text Color</p>
<p class="text-success">Text Color</p>
<p class="text-info">Text Color</p>
<p class="bg-primary text-white">This text is important.</p>
<p class="bg-success text-white">This text indicates success.</p>
<p class="bg-info text-white">This text represents some information.</p>
<p class="bg-warning text-white">This text represents a warning.</p>
<p class="bg-danger text-white">This text represents danger.</p>
<p class="bg-secondary text-white">Secondary background color.</p>
<p class="bg-dark text-white">Dark grey background color.</p>
<p class="bg-light text-dark">Light grey background color.</p>
</div>
실습4) tables
클래스명으로 테이블 디자인 지정이 가능한다.
- .table : 가장 기본 테이블
- .table-dark
- .table-striped
- .table-hover
- 등...
가장 기본 테이블인 .table과 같이 적용하면 디자인이 적용 된다. ex) class="table table-hover"
적용이 안되는 디자인은 버전이 안맞아서 그런것이므로 js와 css 태그를 함께 가져와서 적용시키면 된다.
너비에 따라 스크롤바 넣기도 가능하다.
| .table-responsive-sm | < 576px |
| .table-responsive-md | < 768px |
| .table-responsive-lg | < 992px |
| .table-responsive-xl | < 1200px |
실습5) Images
> ex06.jsp
가장먼저 이미지 파일을 담을 images폴더를 WebContent안에 만든다.
그다음 images폴더에 이미지 파일을 넣는다. img 태그에 적용하는 클래스명은 다음과 같다.
- .rounded-1 : 아주 살짝 모서리 둥글게
- .rounded-circle : 동그라미 안에 사진들어가게
- .img-thumbnail : 사진 주변에 액자처럼 테두리
- .float-right, .float-left : 사진을 좌, 우에 놓고 싶을 때
- .mx-auto d-block : 사진을 가운데에 놓고 싶을 때
- 등등..
<div class="container-fluid">
<img src="./images/paris.jpg" /><br />
<img src="./images/paris.jpg" class="rounded-1"/><br />
<img src="./images/paris.jpg" class="rounded-circle"/><br />
<img src="./images/paris.jpg" class="img-thumbnail"/><br />
<img src="./images/paris.jpg" class="mx-auto d-block"/><br />
</div>
실습5) Jumbotron
큰영역에 데이터를 보이는 것이다. 전면부 이미지 같은것.
div에 클래스로 .jumbotron를 해주면된다.
실습6) Jumbotron
> ex07.jsp
.alert 와 함께
.alert-success
.alert-info
.alert-warning
.alert-danger
.alert-primary
....
<div class="container-fluid">
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Success!!</strong>Alert Message
</div>
<div class="alert alert-warning alert-dismissable fade show" role="alert">
<strong>Holy guacamole!!</strong>You should ~
<button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
</div>
</div>
실습7) Buttons
> ex08.jsp
이것도 역시 다양한 디자인을 제공한다.
<div class="container-fluid">
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
</div>이것 외에도 size, block, able/disable 등 많다.
이런것도 된다.
ex09.jsp
<div class="container-fluid">
<button type="button" class="btn btn-primary">Primary</button>
<a href="#" class="btn btn-info">Info</a><br /><br />
<input type="button" class="btn btn-info" value="Info" /><br /><br />
<input type="submit" class="btn btn-info" value="Info" /><br /><br />
</div>클릭하면 테두리가 블러 처리됨
실습8) Button Groups
> ex10.jsp
<div class="container-fluid">
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Google</button>
</div>
<div class="btn-group-vertical btn-group-lg">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Google</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle"
data-toggle="dropdown">Sony</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Tablet</a> <a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
</div>Nesting Button Groups & Dropdown Menus
또한 가능하다.
ex10.jsp 실행시키면 다음과같다.
실습9) Bages
> ex11.jsp
<div class="container-fluid">
<h1>
Example heading <span class="badge badge-secondary">New</span>
</h1>
<h2>
Example heading <span class="badge badge-secondary">New</span>
</h2>
<h3>
Example heading <span class="badge badge-secondary">New</span>
</h3>
<h4>
Example heading <span class="badge badge-secondary">New</span>
</h4>
<h5>
Example heading <span class="badge badge-secondary">New</span>
</h5>
<h6>
Example heading <span class="badge badge-secondary">New</span>
</h6>
<br /> <span class="badge badge-primary">Primary</span> <span
class="badge badge-secondary">Secondary</span> <span
class="badge badge-success">Success</span> <span
class="badge badge-danger">Danger</span> <span
class="badge badge-warning">Warning</span> <span
class="badge badge-info">Info</span> <span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span> <br /> <br />
<button type="button" class="btn btn-primary">
Messages <span class="badge badge-light">4</span>
</button>
</div>
실습10) Progress bars
> ex12.jsp
<div class="container-fluid">
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div>
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
<div class="progress">
<div class="progress-bar bg-success" style="width:40%">
Free Space
</div>
<div class="progress-bar bg-warning" style="width:10%">
Warning
</div>
<div class="progress-bar bg-danger" style="width:20%">
Danger
</div>
</div>
</div>
실습11) Spinners
> ex13.jsp
로딩같은거
Spinnger Buttons
<div class="container-fluid">
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
Loading...
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span>
Loading...
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span>
Loading...
</button>
</div>
실습11) Pagination
> ex14.jsp
Active State
이거랑 테이블 게시판에 적용하면 좋다.
<div class="container-fluid">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</div>
실습12) List Groups
> ex15.jsp
리스트에 뱃지까지 표시되는 것
List Group with Badges
<div class="container-fluid">
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Inbox
<span class="badge badge-primary badge-pill">12</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Ads
<span class="badge badge-primary badge-pill">50</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Junk
<span class="badge badge-primary badge-pill">99</span>
</li>
</ul>
</div>
실습13) Cards
> ex16.jsp
Card Images
<div class="container-fluid">
<div class="card" style="width: 400px">
<img class="card-img-top" src="./images/img_avatar1.png" style="width:100%"/>
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">소개 내용</p>
<a href="#" class="btn btn-primary">바로가기</a>
</div>
</div>
</div>
실습14) Dropdowns
> ex17.jsp
Dropdown header
dropdown이 header에 따라 분류되어 있는것
버전업 되어있어서 홈페이지코드에 적힌 CDN 말고 내가 직접 가져온 CDN을 쓰고 하려면
data-bs-toggle 해야함
수업은 bootstrap4로 진행하고 있고
우리가 사용하는 CDN은 bootstrap5이다.
<div class="container-fluid">
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<h5 class="dropdown-header">Dropdown header</h5>
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
<h5 class="dropdown-header">Dropdown header</h5>
<a class="dropdown-item" href="#">Another link</a>
</div>
</div>
</div>
실습15) Collapse
> ex18.jsp
Accordion
bootstrap5
- data-bs-toggle
- data-bs-target
- data-bs-parent
<div class="container-fluid">
<button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
내용 1<br />
내용 1<br />
내용 1<br />
내용 1<br />
</div>
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="card-link" data-bs-toggle="collapse" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
<div class="card-body">
Lorem ipsum..
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-bs-toggle="collapse" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
<div class="card-body">
Lorem ipsum..
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-bs-toggle="collapse" href="#collapseThree">
Collapsible Group Item #3
</a>
</div>
<div id="collapseThree" class="collapse" data-bs-parent="#accordion">
<div class="card-body">
Lorem ipsum..
</div>
</div>
</div>
</div>
</div>
실습16) Navs
> ex19.jsp
Toggleable / Dynamic Tabs
Nav tab의 href와 tab의 id 값이 매치되어야 한다.
<div class="container-fluid">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active"
data-bs-toggle="tab" href="#home">Home</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab"
href="#menu1">Menu 1</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab"
href="#menu2">Menu 2</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active">
<br>
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="container tab-pane fade">
<br>
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="container tab-pane fade">
<br>
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
</div>
실습17) Navbar
> ex20.jsp
Navbar는 Container에 안들어간다. nav는 Container에 들어간다.
브랜드 로고를 넣은 navbar만들기.
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand/logo -->
<a class="navbar-brand" href="#">
<img src="./images/bird.jpg" alt="logo" style="width:40px;">
</a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
실습18) Forms
> ex21.jsp
Inline Form with Utilities
<div class="container">
<form class="from-inline" action="/action_page.php">
<label for="email2" class="mb-2 mr-sm-2">Email:</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="email2" placeholder="Enter email" namee="email">
<label for="pwd2" class="mb-2 mr-sm-2">Password:</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="pwd2" placeholder="Eneter password" name="pswd">
<div class="form-check mb-2 mr-sm-2">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" name="remember"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>
<br /><br />
<form action="/action_page.php" class="was-validated">
<div class="form-group">
<label for="uname">Username:</label>
<input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember" required> I agree on blabla.
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Check this checkbox to continue.</div>
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
Form Validation
- .valid-feedback : 값 입력하면 칸이 초록색
- .invalid-feedback : 값 입력 전 칸이 빨간색
실습19) Input Groups
> ex22.jsp
Input Group Buttons
- .input-group-prepend : input group 맨 앞에 붙이기
- .input-group-append : input group 맨 뒤에 붙이기
<div class="container">
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-primary" type="button">Basic Button</button>
</div>
<input type="text" class="form-control" placeholder="Some text">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-append">
<button class="btn btn-success" type="submit">Go</button>
</div>
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Something clever..">
<div class="input-group-append">
<button class="btn btn-primary" type="button">OK</button>
<button class="btn btn-danger" type="button">Cancel</button>
</div>
</div>
</div>
실습20) Custom Forms
> ex23.jsp
bootstrap5 에서 바꼈다.
custom에서 전부 form 으로 바꼈다.
- Custom Switch → Check & radios
- Custom Range → Range
- Custom File Upload → Form control
<div class="container">
<!-- Custom Switch -->
<form action="/action_page.php">
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" id="switch1"
name="example"> <label class="form-check-label"
for="switch1">Toggle me</label>
</div>
<br>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<br />
<br />
<!-- Custom Range -->
<form>
<label for="customRange1" class="form-label">Example range</label> <input
type="range" class="form-range" id="customRange1">
</form>
<br />
<br />
<!-- Custom File Upload -->
<div class="mb-3">
<label for="formFile" class="form-label">Default file input
example</label> <input class="form-control" type="file" id="formFile">
</div>
<div class="mb-3">
<label for="formFileMultiple" class="form-label">Multiple
files input example</label> <input class="form-control" type="file"
id="formFileMultiple" multiple>
</div>
</div>
실습21) carousel
> ex24.jsp
<div id="demo" class="carousel slide" data-bs-ride="carousel" >
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./images/la.jpg" />
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
<div class="carousel-item">
<img src="./images/chicago.jpg" />
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="carousel-item">
<img src="./images/ny.jpg" />
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<ul class="carousel-indicators">
<li data-bs-target="#demo" data-bs-slide-to="0" class="active">
<li data-bs-target="#demo" data-bs-slide-to="1">
<li data-bs-target="#demo" data-bs-slide-to="2">
</ul>
<a href="#demo" class="carousel-control-prev" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#demo" class="carousel-control-next" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
실습22) Modal
> ex25.jsp
confirm 창 같은거 띄우는거
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-bs-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
실습23) Tooltip
> ex26.jsp
tooltip을 쓰겠다고 아래코드처럼 javascript에서 jQuery로 써줘야한다.
<script type="text/javascript">
$(document).ready(function(){
$('[data-bs-toggle="tooltip"]').tooltip();
});
</script>tooltip으로 보여지는 메세지는 title속성이다.
tooltip의 위치는 data-bs-placement 이다.
<div class="container-fluid">
<a href="#" data-bs-toggle="tooltip" title="Hooray!">Hover over me</a>
</div>
<br /><br />
<div class="container">
<h3>Tooltip Example</h3>
<p>The data-placement attribute specifies the tooltip position.</p>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Hooray!">Top</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Hooray!">Bottom</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="Hooray!">Left</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="Hooray!">Right</a>
</div>
저번에 했던 jQuery로 model2 게시판 만들기
(완성)
완성했으면 다른 라이브러리인 bootstrap으로 만들어 보기
728x90
반응형
'빅데이터 플랫폼 구축을 위한 자바 개발자 양성과정' 카테고리의 다른 글
| 01/21 ! - MyBatis(2) : myBatis로 model1 게시판 만들기, myBatis - annotation 방식, Maven 환경설정 (0) | 2021.02.25 |
|---|---|
| 01/20 ! - MyBatis(1) : MyBatis 설정파일(mapper)을 xml로 자바,웹 프로젝트 구현 (0) | 2021.02.25 |
| 01/18 - W2ui, Bootstrap(1) : javascript를 지원하는 다양한 라이브러리 (0) | 2021.01.31 |
| 01/15 - jQuery UI(2) : 사용법, jQuery UI로 model2 게시판 구현하기 (0) | 2021.01.31 |
| 01/14 - jQuery + Ajax , jQuery UI (1) (0) | 2021.01.31 |
'빅데이터 플랫폼 구축을 위한 자바 개발자 양성과정' Related Articles
more
