IT tech Coding/Bootstrap
[bootstrap] groupbox처럼 구현이 가능할까?
Coding Life
2022. 1. 10. 06:11
부트스트랩으로 아래와 같은 그룹박스 형태를 만들 수 있을지 찾아보았다.
부트스트랩에는 다양한 형태의 좋은 템플릿을 제공하지만, 결론적으로 말하자면, 위와 같은 형태는 제공하지 않는 것 같다. 혹시 있다면 댓글 부탁드립니다.
위와 같이 구성하려면 아래와 같은 코드가 필요하다.
CSS 파일
fieldset.groupbox-border {
border: 1px groove #ddd !important;
padding: 0 1.4em 1.4em 1.4em !important;
margin: 1.2em 1.2em 1.2em 1.2em !important;
-webkit-box-shadow: 0px 0px 0px 0px #000;
box-shadow: 0px 0px 0px 0px #000;
}
legend.groupbox-border {
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
width:auto;
padding:0px 10px 0px 10px;
border-bottom:none;
}위의 CSS파일을 동작하게 만드는 HTML파일
<fieldset class="groupbox-border">
<legend class="groupbox-border">Visit Information</legend>
<div class="control-group">
<label class="control-label input-label" for="startTime">Start :</label>
<div class="controls bootstrap-timepicker">
<input type="text" class="datetime" type="text" id="startTime" name="startTime" placeholder="Start Time" />
<i class="icon-time"></i>
</div>
</div>
</fieldset>
부트스트랩을 활용한다면 panel의 기능을 활용해서 아래와 같이 구성할 수 있다.
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Panel</h2>
<div class="panel panel-default">
<div class="panel-body">A Basic Panel</div>
</div>
</div>
</body>
</html>또 다른 Panel 구현 bootstrap (결과화면)
위의 표현 코드(부트스트랩 이용)
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
<div class="panel panel-primary">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content blah <br/>blah <br/>blah <br/>blah <br/>blah <br/>blah <br/>blah <br/>blah <br/>blah <br/>blahblah <br/>blah <br/>blah <br/>blah <br/>blah <br/>blah <br/>blah <br/>blah <br/>blah <br/>blah
</div>
</div>그룹박스관련 부트스트랩도 지원해 줬으면 하는 바램을 가져본다.
아무래도 더 활용할 수 있는 범위가 늘어나면 좋으니까요....
반응형