이 기사는 참조에 대한 Bootstrap3 Responsive 웹 사이트 개발 코드를 공유합니다. 특정 내용은 다음과 같습니다
나는 Bootstrap3을 처음으로 사용했으며 모바일을 매우지지하고 모바일 및 PC를 지원하는 웹 사이트를 신속하게 개발할 수 있음을 발견했습니다.
다음은이 기사의 예인 특정 코드입니다.
타임 라인은 외국 웹 사이트에서 제공되며 사용 된 CSS는 다음과 같습니다.
. 타임 라인 {목록 스타일 : 없음; 패딩 : 20px 0 20px; 위치 : 상대;}. 타임 라인 : 전 {top : 0; 하단 : 0; 위치 : 절대; 콘텐츠: " "; 너비 : 3px; 배경색 : #eeeeee; 왼쪽 : 50%; 마진 왼쪽 : -1.5px;}. 타임 라인> li {마진-바닥 : 20px; 위치 : 상대;}. 타임 라인> li : 전, .Timeline> li : {content : ""; 디스플레이 : 테이블;}. 타임 라인> li : {clear :}. 타임 라인> li : 전, .Timeline> li : {content : ""; 디스플레이 : 테이블;}. 타임 라인> li : {clear : 둘 다;}. 타임 라인> li>. 타임 라인-패널 {너비 : 46%; 플로트 : 왼쪽; 테두리 : 1px 고체 #d4d4d4; Border-Radius : 2px; 패딩 : 20px; 위치 : 상대; -webkit-box-shadow : 0 1px 6px rgba (0, 0, 0, 0.175); Box-Shadow : 0 1px 6px rgba (0, 0, 0, 0.175); } .timeline> li> .Timeline-Panel : 이전 {위치 : 절대; 상단 : 26px; 오른쪽 : -15px; 디스플레이 : 인라인 블록; 테두리 : 15px 고체 투명; 왼쪽 경계 : 15px Solid #CCC; 국경 오른쪽 : 0 Solid #CCC; 국경-바닥 : 15px 고체 투명; 콘텐츠: " "; } .timeline> li> .Timeline-Panel : {위치 : 절대; 상단 : 27px; 오른쪽 : -14px; 디스플레이 : 인라인 블록; 테두리 : 14px 고체 투명; 왼쪽 경계 : 14px 고체 #fff; 경계 오른쪽 : 0 솔리드 #fff; 국경-바닥 : 14px 고체 투명; 내용 : "";}. 타임 라인> li> .Timeline-badge {color : #fff; 너비 : 50px; 높이 : 50px; 라인 높이 : 50px; 글꼴 크기 : 1.4EM; 텍스트 정렬 : 센터; 위치 : 절대; 상단 : 16px; 왼쪽 : 50%; 마진 왼쪽 : -25px; 배경색 : #999999; Z- 인덱스 : 100; 국경-오른쪽 라디우스 : 50%; 경계 왼쪽-라디우스 : 50%; 국경-오른쪽-래디 우스 : 50%; 국경-바닥-왼쪽 라디우스 : 50%; Border-Bottom-Left-Radius : 50%;}. 타임 라인> Li.Timeline-inverted> .Timeline-Panel {Float : Right;}. 타임 라인> Li.Timeline-inverted> .Timeline-Panel : 이전 {Border-Left-width : 0; 국경 오른쪽 폭 : 15px; 왼쪽 : -15px; 오른쪽 : auto;}. 타임 라인> li.timeline-inverted> .Timeline-panel : {border-left-width : 0; 국경 오른쪽 폭 : 14px; 왼쪽 : -14px; 오른쪽 : auto;}. 타임 라인 -Badge.primary {배경색 : #2E6DA4! 중요;}. 타임 라인 -Badge.Success {배경 색상 : #3F903F! 중요;}. Timeline-Badge. ! 중요;}. 타임 라인 -Badge.info {배경색 : #5BC0DE! 중요;}. 타임 라인 타이틀 {margin-top : 0; 색상 : 상속;}. 타임 라인-바디> P, .Timeline-Body> ul {마진-바닥 : 0;}. 타임 라인-바디> P + P {margin-top : 5px;}@media (max-width : 767px) {ul.timeline : {왼쪽 : 40px; } ul.timeline> li> .Timeline -Panel {너비 : calc (100% -90px); 너비 : -Moz -Calc (100% -90px); 너비 : -webkit -calc (100% -90px); } ul.Timeline> li> .Timeline-Badge {왼쪽 : 15px; 왼쪽 마진 : 0; 상단 : 16px; } ul.timeline> li> .Timeline-Panel {float : 오른쪽; } ul.timeline> li> .Timeline-panel : {border-left-width : 0; 국경 오른쪽 폭 : 15px; 왼쪽 : -15px; 오른쪽 : 자동; } ul.Timeline> li> .Timeline-Panel : {Border-Left-width : 0; 국경 오른쪽 폭 : 14px; 왼쪽 : -14px; 오른쪽 : 자동; }}} <ul> <li> <li> <i> </i> </div> <div> <h4> Anthony Robin ・ 소개 </h4> <p> <small> <i> </i> </p> </div> <div> <p> 그는 자체 제작 경력에서 성공적인 청구서이며 오늘날 가장 성공적인 세계 급여 개발 전문가입니다. 그는 전문 팀, 기업 대통령 및 국가 책임자를 지원하여 잠재력을 자극하고 다양한 어려움과 최저점을 극복합니다. 그는 많은 왕실 가족에게 조언했으며 전 미국 대통령 클린턴과 다이아나 공주가 개인 컨설턴트로 고용되었습니다. 그는 남아프리카 대통령 마라, 전 소비에트 고르바초프 대통령, 세계 테니스 챔피언 Andre Agassi를 포함한 많은 세계 유명 인사들에게 조언했다. </p> </div> </li> <li> .................................. </li> </ul>이 과정에서 나는 Android 4.0에서 너비를 발견했다 : -webkit -calc (100% -90px); 지원은 그다지 좋지 않았으며 타임 라인 디스플레이는 정상이 아닙니다. 나중에 JS와 함께 해결되었습니다.
$ (function () {$ (wind 90); else {$ ( 'Div.Tim.Panel'). CSS ( 'width', '46%');생식 이미지 :
여전히 심도있게 배우고 싶다면 여기를 클릭하여 두 가지 흥미로운 주제를 배우고 첨부 할 수 있습니다. 부트 스트랩 학습 자습서 부트 스트랩 실용 튜토리얼
위는 Bootstrap3 Responsive 웹 사이트의 주요 제작 코드입니다. 나는 그것이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.