티스토리 뷰

IT tech Coding/Bootstrap

[bootstrap] groupbox처럼 구현이 가능할까?

Coding Life 2022. 1. 10. 06:11
반응형

부트스트랩으로 아래와 같은 그룹박스 형태를 만들 수 있을지 찾아보았다.

groupbox  구현화면

부트스트랩에는 다양한 형태의 좋은 템플릿을 제공하지만, 결론적으로 말하자면, 위와 같은 형태는 제공하지 않는 것 같다. 혹시 있다면 댓글 부탁드립니다.

위와 같이 구성하려면 아래와 같은 코드가 필요하다.

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>

그룹박스관련 부트스트랩도 지원해 줬으면 하는 바램을 가져본다.

아무래도 더 활용할 수 있는 범위가 늘어나면 좋으니까요....

반응형
저작자표시 비영리 변경금지

'IT tech Coding > Bootstrap' 카테고리의 다른 글

Bootstrap 5: 새로운 시대의 웹 디자인 프레임워크  (0) 2023.10.08
bootstrap modal창 위에 또다른 modal창 띄우는 코드  (0) 2023.03.29
modal창 button 중복으로 눌리는 현상, 이거 해결하는데 정말 장난 아님  (0) 2023.03.09
[bootstrap] 화면 상단 장바구니 결재 등 구성하는 소스코드 php html  (0) 2022.11.03
[부트스트랩] 모달 값 전달하는 방법 버튼이나 A테그 사용해서 처리하는 방법  (0) 2022.09.22
댓글