부트스트랩 레이아웃의 타이포그래피 스타일, 목록 스타일, 테이블 스타일 소개

이 글에서는 부트스트랩 레이아웃의 레이아웃 스타일, 목록 스타일, 테이블 스타일을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. 부트스트랩 관련 비디오 튜토리얼을 더 배우고 얻으려면 부트스트랩 튜토리얼을 방문하세요!

레이아웃 컨테이너

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 클래스를 추가하여 기본 스타일, 약간의 패딩 및 가로 구분선을 제공합니다. . <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 휴대폰1499dropshipping정보 색상 # 🎜🎜##🎜 🎜## 🎜🎜#xiaomi 휴대전화위험한 색상

	xiaomi 휴대 전화	1499	dropshipping
xiaomi 휴대전화	1499	dropshipping	warningcolor
1499	dropshipping		#🎜 🎜#
요약: 위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

위 내용은 부트스트랩 레이아웃의 타이포그래피 스타일, 목록 스타일, 테이블 스타일 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!