이 글에서는 부트스트랩 레이아웃의 레이아웃 스타일, 목록 스타일, 테이블 스타일을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. 부트스트랩 관련 비디오 튜토리얼을 더 배우고 얻으려면 부트스트랩 튜토리얼을 방문하세요!
bootstrap 모든 웹페이지는 고정된 너비를 가져야 하며 컨테이너의 가로 및 세로 중앙에 위치하거나 컨테이너 너비의 100%를 차지한다고 믿습니다.
Bootstrap은 전역 글꼴 크기를 14px로, 줄 높이를 1.428(20px)로, 단락 줄 높이를 1/2(10px)로, 색상을 #333
으로 설정합니다. 1) 고정 너비
.container 클래스는 고정 너비의 컨테이너에 사용되며 반응형 레이아웃(가로 중심 정렬)을 지원합니다.
2) 백분율 너비
.container-fluid은 전체 시각화 창을 차지하는 100% 너비의 컨테이너에 사용됩니다. Text-center left
Align left .text-uppercase는 소문자를 대문자로 변환하는 데 사용됩니다.
.text-lowercase는 대문자를 소문자로 변환하는 데 사용됩니다.
.text-capitalize는 구현에 사용됩니다. 첫 글자는 대문자입니다.
태그는 "WWW" 또는 "NATO"와 같은 약어를 나타냅니다(검색 엔진 검색에 적합) ㅋㅋㅋ
<코드> ; 컴퓨터 소스 코드나 기타 기계를 나타내는 데 사용됩니다. 읽을 수 있는 텍스트 콘텐츠입니다. (음영 추가)
<p>일반적인 응용 프로그램은 컴퓨터의 소스 코드를 나타냅니다. (음영 및 테두리 추가)<span style="font-size:14px;color:#000000;"><em></em></span></p> <p><span style="color:#000000;"><span style="font-size:14px;">목록 스타일<span style="color:rgb(0,0,0);font-family:'PingFangSC-Regular', Verdana, Arial, '微软雅黑', '宋体';font-size:14px;text-align:left;background-color:rgb(253,252,248);"></span></span></span></p> <p> <span style="color:#000000;"> <span style="font-size:14px;">목록: 순서가 있는 목록, 순서가 없는 목록, 정의 목록. <span style="color:rgb(0,0,0);font-family:'PingFangSC-Regular', Verdana, Arial, '微软雅黑', '宋体';font-size:14px;text-align:left;background-color:rgb(253,252,248);"></span></span></span></p> <p style="text-align:left;">.sr-only <span style="font-family:'PingFangSC-Regular', Verdana, Arial, '微软雅黑', '宋体';color:rgb(0,0,0);">행, 열 또는 전체 테이블이 될 수 있는 요소 숨기기<span style="font-size:14px;background-color:rgb(253,252,248);"></span><p><span style="font-size:14px;color:#000000;"><em>.list-unstyled</em>는 목록 앞의 글머리 기호를 제거하고 목록의 기본 여백 값을 제거하는 데 사용됩니다.</span></p> <p><span style="font-size:14px;color:#000000;">.list-inline은 목록의 내용을 같은 줄에 정렬하고 작은 문자를 추가합니다. 패딩 값의 양</span> </p> <p><span style="font-size:14px;color:#000000;">.dl-horizontal</span><span style="font-size:14px;color:#ff6666;"> 정의 목록에 </span><span style="font-size:14px;color:#000000;">를 사용하고, 정의 제목과 정의 설명 정보를 같은 줄에 정렬하고, dt 태그와 dd 태그의 내용을 같은 줄에 정렬합니다. </span></p> <p><span style="color:rgb(0,0,0);"><span style="color:rgb(204,102,0);"><strong><span style="font-size:18px;"> 테이블 스타일 </span></strong></span><br></span></p> <p><span style="font-size:14px;color:#000000;"><em>.table</em> 모든 <table> 태그에 .table 클래스를 추가하여 기본 스타일, 약간의 패딩 및 가로 구분선을 제공합니다. . </span></p> <p><span style="font-size:14px;color:#000000;"><em>.table-bordered</em> 테이블과 그 안의 각 셀에 테두리 선을 추가합니다. </span></p> <p><span style="font-size:14px;color:#000000;"><em>.table-striped </em>각 행의 색상 변경 효과를 얻습니다. </span><span style="font-size:14px;color:#ff6666;"><pre class="brush:php;toolbar:false">table.table-striped tr:nth-child(odd){ background:red; } /*控制各行的颜色,odd控制下标为偶数的行,even控制下标为奇数的行*/.table-hover마우스 오버 효과 달성
table.table-hover tr:hover{
background:red;
}
/*控制各行的颜色,odd控制下标为偶数的行,even控制下标为奇数的行*/
.table-densed
.table-반응형 상위 요소 설정 반응형, 화면이 768px보다 작으면 주위에 테두리가 나타납니다
상태 클래스
tr, td 또는 th에만 설정할 수 있으며 테이블 태그에는 설정할 수 없습니다이러한 상태 클래스를 통해 행이나 셀에 색상을 설정할 수 있습니다
자세한 내용은 다음을 참조하세요. #🎜 🎜# 상품 가격
클래스
설명
인스턴스
.active 행이나 셀에 호버 색상 적용
시도해 보세요
.Warning
은 경고 작업을 나타냅니다
사용해 보세요
.danger
은 위험한 작업을 의미합니다.
해 보세요 성공 색상
활성 색상#🎜 🎜#
xiaomi 휴대 전화
1499
dropshipping
# 🎜🎜#xiaomi 휴대폰 1499 dropshipping 정보 색상
xiaomi 휴대전화xiaomi 휴대전화
1499
dropshipping
warningcolor #🎜 🎜## 🎜🎜#
1499
dropshipping
위험한 색상 #🎜 🎜#
요약: 위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.
위 내용은 부트스트랩 레이아웃의 타이포그래피 스타일, 목록 스타일, 테이블 스타일 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!