이 글의 내용은 추천에 관한 것입니다. bootstrap4에서 일반적으로 사용되는 스타일에 대한 소개로, 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
Background
저는 최근 소규모 학습 프로젝트를 수행할 때 bootstrap4를 여러 번 사용했기 때문에 향후 검토를 위해 여기에 부트스트랩을 정리하겠습니다. (무료 동영상 강좌 추천: bootstrap tutorial)
bootstrap4 설치
f9ba78e6ee608a4cca8d7a927f90afcc be22f17e17bf8643020513b87fa46c5a2cacc6d41bbb37262a98f745aa00fbf0 764024de193b62b10426d4fc6738c9f12cacc6d41bbb37262a98f745aa00fbf0 ace482f13b4c0348df2a0e1268233d2b2cacc6d41bbb37262a98f745aa00fbf0
Container and Grid system
container Container-fluid //Container class 전자는 고정 너비이고 후자는 100% 너비입니다
Text 레이아웃
display //标题类 1-4 small //小文本 <abbr> //文本底部下面一条虚线边框
Color
text-muted 柔和 text-primary 重要 text-success 成功 text-info 提示 text-warning 警告 text-danger 危险 text-secondary 副标题 text-dark 深灰色文字 text-light 浅灰色 text-white 白色
Form
table //默认样式 table-striped //条纹表格 table-bordered //边框表格 table-hover //鼠标悬停 table-dark //黑色背景表格 table-responsive //响应式表格
Picture
rounded //圆角效果 rounded-circle //椭圆效果 img-thumbnail //图片缩略图效果 img-fluid //图片响应式效果 超大屏幕 jumbotron // 屏幕 jumbotron-fluid //没有圆角的全屏幕
정보 프롬프트 상자
alert-success //成功提示信息 alert-dismissable class="close" data-dismiss="alert" //关闭提示框
Button
btn-primary //主要按钮 btn-secondary //次要按钮 btn-success //成功按钮 btn-info //信息按钮 btn-danger //危险 btn-outline-primary //按钮边框 btn-sm btn-lg //小大号按钮 btn-block //块级按钮 active //可用 disabled //禁用
버튼 그룹
btn-group //按钮组 btn-group-lg|sm|xs 控制按钮组大小 btn-group-vertical 垂直按钮组
진행률 표시줄
progress //添加一个p progress-bar //在上面的p中添加一个progress-bar的p
페이지 매기기
pagination //ul元素上添加 page-item //在li元素上添加page-item
목록 그룹
list-group //列表组 list-group-item //列表li list-group-item-action
Cards
card、card-header、card-body、card-footer card-img-top //图片 card-body、card-title、card-text //图片卡片 card-img-overlay//设置图片为背景
드롭다운 메뉴
dropdown //下拉菜单默认 button设置dropdown-toggle data-toggle=“dropdown” //下拉button dropdown-menu //下拉菜单 a设置样式dropdown-item
탐색 모음
navbar、navbar-expand-sm、bg-light ul:navbar-nav li:nav-item
양식
form-group label for email input class form-control
모달 상자
button设置 data-toggle="modal" data-target="#myModal" b7cdcb0ee4bc36411fa74e4e5b84f4e316b28748ea4df4d9c2150843fecfba68 522dee5a9e032a609c190d198a2bc97a16b28748ea4df4d9c2150843fecfba68 b1f4a67446def6c49a9f0aa21517b1ac16b28748ea4df4d9c2150843fecfba68 0b561c7c414147a96bbbb8cc10c3d06d 561426e822a73b81b8a9d4ad3ad91e91模态框头部0f6dfd1e3624ce5465eb402e300e01ae 6e52c62ccaa796a4ccb90a0458fc6482×65281c5ac262bf6d81768915a4a77ac0 16b28748ea4df4d9c2150843fecfba68 6e1ceff927595656120650f97442eabc模态框内容..16b28748ea4df4d9c2150843fecfba68 fcea287e1681f6566fd9116658b8e4f0c92346fd5668c72f0e5c132a5c66d4da关闭65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68
프롬프트 상자
rrreerrree위 내용은 권장 사항: bootstrap4에서 일반적으로 사용되는 스타일 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!