소금인형 - SW개발자?

'Web/Bootstrap'에 해당되는 글 9건

1. 

   Bootstrap를 이용한 마우스 오버시 Tooltip 설명 나오는 예제

   Bootstrap에서 마우스를 올릴때, 설명을 나타내는 Tooltip을 이쁘게 뜨게 하는 방법입니다. 방법은 간단합니다. 툴팁 관련 html 소스와 javascript를 추가해 주면됩니다. < html > Hover over me 다음과 같이 입력하면, 마우스를 올리때, 툴팁이 뜹니다. 사용되는 js와 css파일들 [ Tooptip 예제 ] Tooltip Hover over me 참고: https://www.w3schools.com/bootstrap/bootstrap_tooltip.asp
2. 

   Bootstrap 4 달력 : datetimepicker (Bootstrap 3버전 업그레이드 버전) 인기 달력

   Bootstrap 3에서 가장 인기 있는 달력이라면, 단연 Eonasdan 라이브러리 달력을 최고로 손꼽습니다. 해당 Bootstrap 3 Date/Time Picker v4.17.47까지 나와 있습니다. (01/14/2020) 진행 중인 프로젝트에 Bootstrap 4를 사용하게 되었는데, 과거 Eonasdan Date Picker가 Bootstrap 4를 지원을 하지 않게 되어서, Bootstrap 4에 지원되는 Date Picker가 필요하게 되었답니다. Bootstrap 4에 완전하게 지원되는 Date Picker인 Tempus Dominus를 찾게 되었죠. Tempus Dominus은 Eonasdan 라이브러리의 업그레이드된 버전이죠. Tempus Dominus 라이브러리: https://tem..
3. 

   Bootstrap 4에서 svg 아이콘 사용하기

   Bootstrap 4에서 svg 아이콘을 만들수 있습니다. Bytesize Icons https://github.com/danklammer/bytesize-icons/blob/master/README.md svg 아이콘들은 백터 형태이기 때문에 사이즈가 변화되어도, 이미지 처럼 깨짐이 없습니다. 카메라 아이콘 SVG 태그 여기서 width="20" height="20"으로 주면, 사이즈가 줄게 됩니다. stroke-width="3"를 주면 더 두꺼워 집니다. [ 모서리 부분을 값을 선택 ] Style stroke-linejoin stroke-linecap Round round round Bevel bevel butt Miter miter butt [ 두께를 다르게 하는 형태 ] Weight stroke-..
4. 

   Bootstrap 4 Display 유틸리티 - table columns 을 hide 처리하기

   Bootstrap 4을 사용을 시도해 보고 있는데, Utilites > Dispaly 를 이용해서, responsive display의 hide 처리를 할 수 있는 propety가 있어서, 태그에 ,에 .d-lg-block을 사용해 보려고 했답니다. [ .d-none .d-lg-block 을 사용 했을때, 테이블 깨지는 현상 발생 ] 테이블에 사용할때면, 이상하게 컬럼이 밀리고 깨는지는 형상이 났습니다. (원인은, .d-lg-block을 줬던 부분의 객체가 block형태로 변화되어서, 라인전체를 차지하려고 하기에 발생하는 현상입니다.) 알고 보니. d-lg-block은 block/inline 타입인 , 과 같은 요소에서만 사용을 하였더군요. (참고: https://getbootstrap.com/docs/..
5. 

   Bootstrap 토글 접기 Collapsible collapse 기능

   Bootstap에서 기본적으로 Toggle 버튼을 아주 쉽게 지원한다. Simple collapsible Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 만약에, #demo 영역을 처음에 보여줬다가 누르면 감추기를 원한다다면.class에 "in"을 추가하면, 처음에 나타나고, toggle버튼을 누르면 사라집니다. 참고:https://www.w..
6. 

   Bootstrap 반응형 테이블 FooTable (Plug In) 검색/페이지네이션 추가됨

   FootTable Bootstrap & jQuery환경에서반응형 테이블 형식으로 만들어주는 Plug In 프로그램. Pagination / 검색창 필드등이 됩니다. [그림 1. 반응형 테이블 생성] FooTableA responsive table plugin built on jQuery and made for Bootstrap.Fear not, it also works without Bootstrap! http://fooplugins.github.io/FooTable/index.html [파일들] 참고https://css-tricks.com/footable-a-jquery-plugin-for-responsive-data-tables/
7. 

   jQuery Bootgrid 간편한 그리드 표시 (페이지네이션, 검색 기능 PlugIn)

   jQuery Bootgrid는 Bootstrap + jQuery를 사용한 Grid를 라이브러리입니다. Bootstrap 환경에 Grid를 아래와 같이 검색과, 페이지네이션등 멋지게 변경할 수 있답니다. [그림 1. Bootgrid 화면] http://www.jquery-bootgrid.com/GettingStarted#intro jQuery Bootgrid 1.3.1 (Source Code)
8. 

   Bootstrap Table Grid sort 처리 - Datatables

   Bootstrap에 사용되는 테이블을 sort처리하기 DataTables 공식사이트: https://datatables.net/ 소스 설명: https://datatables.net/examples/styling/bootstrap.html예제: https://www.datatables.net/manual/styling/bootstrap-simple.html 소스파일: 사용시 주의 사항: 태그 안에 를 꼭 추가해 줘야 합니다. 소스 형식 $(document).ready(function() { $('#example').DataTable(); } ); NamePositionOfficeSalaryTiger NixonSystem ArchitectEdinburgh$320,800 // For demo to fit i..
9. 

   Bootstrap 스크롤된 페이지 위로 올라가기 ( Back to Top )

   출처: http://stackoverflow.com/questions/22413203/bootstrap-affix-back-to-top-link Now that I understand the Affix component better, I have come up with the solution. After specifying a top offset and adjusting the CSS, it's working nicely. The link will scroll into view and then "pin" to the bottom. For pages which do not have a scroll bar, the link is never enabled. I've updated the JS Fiddle (h..