이전 두 기사는 기본적으로 JS에 관한 구성 요소 사용 방법에 대해서만 이야기합니다. 이 블로그는 JS와 함께 논의해야합니다.
여러 구성 요소를 설명하겠습니다
1. 모달 박스
2. 스크롤 모니터링
3. 태그 페이지
4. 툴팁
5. 팝업 박스
6. 버튼
7. 스태킹
8. 회전 페이지
9. 사이드 바
CSS 및 JS를 먼저 가져 오십시오
<link rel = "Stylesheet"type = "text/css"href = "css/bootstrap.min.css"> <link rel = "Stylesheet"href = "// cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.cs"> <script src = "js/jquery-3.1.0.min.js"> </script> <script src = "js/bootstrap.min.js"> </script>
1. 모달 박스
우리는 보통 특정 규정을 로그인하거나 읽을 때이 모달 상자를 사용하므로 모달 박스는 매우 일반적입니다.
먼저 버튼을 쓰면 모달 상자를 엽니 다
<!-데이터-타겟은 모달 박스의 ID이며, 데이터-waythate = "@ime"은 우리가 전달하는 모달 상자의 태그와 값입니다-> <버튼 유형 = "버튼"data-toggle = "modal"data-target = "#mymodal"data-whateath = "@ime"> 모달 상자 열기 </button>
그런 다음 모달 상자를 작성하십시오
<div id = "myModal"robile = "대화 상자"aria-label = "myModallabel"aria-hidden = "true"> <!-이것은 작은 모달 상자입니다. Modal-Sm으로 Modal-LG는 큰 모달 박스입니다.> <div> <!-모달 박스 헤드-> <div> <!-오른쪽 상단 코너의 닫기 버튼-> <버튼 유형 = "버튼"data-dismiss = "modal"aria-label = "close"> <span aria-hidden = "true"> × </span button> <!-title-> title-> title-> title-> title-> 제목. 상자 내용-> <div> <!-모달 프레임 내용은 텍스트 또는 테이블이 될 수 있습니다-> <!-<p> hello </p>-> <form> <div> <label> username </label> <입력 유형 = "text"> </div> <div> <label> 암호 </label> <입력 유형 = "password"> </div> </div> <!-modal frem "-> mod frame" " data-dismiss = "modal"> 닫기 </button> <버튼 유형 = "버튼"> 저장 </button> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
버튼을 클릭 한 다음 모달 박스의 테이블에 매개 변수를 전달하면
버튼의 속성에 데이터 라벨을 추가하십시오
위의 데이터-everations =”@ime”이 예로 추가됩니다. 레이블이있는 매개 변수와 @ime의 값이 추가됩니다.
다음은 JS 작업입니다
// method $ ( "#myModal"). on ( "show.bs.Modal", function (e) {// var button을 열기 위해 클릭하는 버튼을 가져옵니다. modal.find ( ". Modal-Title"). Text ( "hello"+Receptient); // Body Modal.Find ( ". Modal-Body Input"). val (수신자)})의 입력 값을 변경합니다.2. 스크롤 모니터링
다른 내용으로 슬라이드하면 탭 페이지가 변경됩니다
먼저 신체 속성을 작성하십시오
<!-오프셋은 70으로 설정 되며이 값은 테스트 된 최고의 값입니다.
<body data-spy = "scroll"data-target = ". navbar"data-offset = "70">
그런 다음 탭을 작성하십시오
<!-탭 막대에 고정 된 표시된 내용의 상단-> <nav 역할 = "navigation"> <div> <div id = "myscrollspy"> ul> <!-태그의 연결은 아래 제목의 ID입니다-> <li> <a href = "#iwen"> iwen </a> <li> <a href = "#ime"> ime ". 태그의 드롭 다운 메뉴-> <li> <a href = "#"#"data-toggle ="dropdown "> 드롭 다운 메뉴 <Span> </span> </a> <ul 역할 ="menu "> <li> <a href ="#one "tabindex ="-1 "> one </a> </li> <li> <a href ="#two "#"</a> </a> </a> <li> <a href = "#3"tabindex = "-1"> Three </a> </li> </ul> </li> </ul> </div> </div> </nav>
그런 다음 내용을 작성하십시오
<h2 id = "iwen">@iwen </h2> <p> 이것은 사람입니다. 이것은 사람입니다 </p> <h2 id = "ime">@ime </h2> <p> 이것은 사람입니다 </p> <h2 id = "one">@one </h2> <p> 이것은 사람입니다. id = "two">@two </h2> <p> 이것은 사람입니다. 이것은 사람입니다 </p> <h2 id = "Three">@Three </h2> <p> 이것은 사람입니다. 이것은 사람입니다 </p> <h2 id = "Three"> Three "> Three </h2> <p> 이것은 사람입니다 </p>입니다.
효과가 더 분명 할 수 있도록 콘텐츠를 더 오래 쓰는 것이 좋습니다. 여기에 너무 많은 쓸모없는 단어를 쓰는 것은 편리하지 않습니다.
JS 방법을 작성할 수도 있습니다
// 메소드 $ ( "#myscrollspy"). on ( "activeate.bs.scrollspy", function (e) {alert ( "hello");})3. 태그 페이지
다른 태그를 클릭하여 다른 콘텐츠를 표시하십시오
먼저 태그 막대를 작성하십시오
<ul id = "mytab"> <!-태그 링크는 아래 탭-판의 ID에 해당합니다-> <li> <a href = "#home"data-toggle = "tab"> home </a> </a> </a> </li> <li> <a href = "#profile"data-toggle = "tab"> 프로필 </a> <li> <href = "id ="id = "id"id. data-toggle = "dropdown"> dropdown 메뉴 <span> </span> </a> <ul 역할 = "menu"> <!-일반 드롭 다운 메뉴와 달리 data-toggle = "tab"-> <li> <a href = "#one"tabindex = "-1"data-toggle = "tab"</li> <le> data-toggle = "tab"> two </a> </li> </ul> </li> </li> </ul>
그런 다음 다른 태그의 내용을 작성하십시오
<div id = "mytabcontent"> <div id = "home"> <p> home </p> <div id = "profile"> <p> 프로파일 </p> <div id = "one"> <p> one </p> <div id = "two"> <p> 두 </p>
JS로 표시된 탭 페이지를 초기화 할 수 있습니다
탭 페이지를 선택하는 방법에는 여러 가지가 있습니다
$ ( '#mytabs a [href = "#profile"]'). 탭 ( 'show') // $ ( '#mytabs a : first'). tab ( 'show') // 첫 번째 탭을 선택하십시오. $ page $ ( '#mytabs a : last'). Tab ( 'show') // $ ( '#mytabs li : eq (2)). (0이 첫 번째이기 때문에). 드롭 다운 메뉴의 탭 페이지 인 경우 숫자는 1 만 추가해야합니다.
4. 툴팁
<p> <!-제목 컨텐츠가 비어 있으면 Data-Original-Title의 내용이 표시됩니다. 배치는 디스플레이 위치이며, | 하단 | 왼쪽 | 오른쪽-> <!-데이터에서 매개 변수를 설정할 수 있습니다-**** ---> <data-animation = "false"id = "myToolTip"href = "#"#"data-toggle ="툴팁 "data-placement ="informate "data-original-title ="www.jk의 page < ".
그러면 JS로 초기화해야합니다. 그렇지 않으면 효과가 없습니다.
// 툴팁을 초기화하고 표시합니다
$ ( '[data-toggle = "ToolTip"]'). 툴팁 ();
5. 팝업 박스
팝업 박스는 툴팁과 비슷하지만 툴팁보다 더 풍부하고 더 일반적으로 사용됩니다.
<!-Data-Trigger = "Foucus"빈을 클릭하여 사라집니다. 추가하지 않으면 버튼을 클릭하여 사라집니다. 호버로 설정하면 이동 버튼이 표시됩니다. 제거 및 사라진-> <!-이 팝업 박스는 제목이 있으며 컨텐츠는 내용입니다-> <버튼 유형 = "버튼"데이터 트리거 = "foucus"data-parement = "attans"data-toggle = "popover"data-content = "content"> 팝업 상자 </button>
그런 다음 JS로 초기화하십시오
// 팝 오버 초기화
$ ( ". js-popover"). popover ();
6. 버튼
처음 두 기사는 버튼의 기본 스타일에 대해 이야기합니다. 이번에는 발전되어 버튼이로드 될 때 다른 텍스트를 표시 할 수 있습니다.
<!-로드 할 때 버튼의 텍스트를 설정할 수 있습니다-> <버튼 유형 = "버튼"Data-loading-text = "3S 용 Loding">로드 상태 </button>
그런 다음 JS를 사용하여 클릭 이벤트를 바인딩하십시오
// 바인딩 버튼의 클릭 이벤트 $ ( ".
7. 스태킹
스태킹 효과는 많은 화면 컨트롤을 절약 할 수 있으며, 이는 매우 실용적입니다.
버튼을 클릭하여 스택을 엽니 다.
<!-href는 컨텐츠의 ID입니다-> <data-toggle = "collapse"href = "#collapseexample"> 클릭 </a> </a> <div id = "Collapseexample"> <div> hello </div> </div>
이것은 패널 그룹의 스택입니다
<div id = "아코디언"역할 = "테이블리스트"> <div> <div role = "탭"id = "headingone"> <!-제목 표시-> <h4> <!-패널 그룹의 ID가 표시되면-> <dato-toggle = "data-toggle ="data-parent = "#Actionion"href = "#collapseone"</</> </>> </>> </</> <h4>. 숨어 있지 않고-> <div id = "collapseone"robile = "tabpanel"> <br> hello <br> hello <br> hello <br> hello <br> <br> </div> </div> </div> <div> <div robol = "id ="headingtwo "> <h4> <h4> <a data-toggle ="collapse "data-parent ="href = "href ="#averf = "#averf =" </h4> </div> <div id = "collapsetwo"role = "tabpanel"> <div> hello <br> hello <br> hello <br> hello <br> hello <br> <br> <br> <br> </div> </div> </div> <div> <div roble = "ab"id = "h4> <data-toggle ="data-parent = "#Asscertion" href = "#collapesthree"> item1 </a> </h4> </div> <div id = "collapsethree"role = "divpanel"> <br> hello <br> hello <br> <br> <br> <br> </div> </div> </div> </div> </div>
8. 회전 페이지
우리는 종종 웹 사이트 홈페이지에서 볼 수 있습니다.
<div id = "carousel-example-generic"> <!-이것은 아래의 세 개의 흰색 원입니다. 표시기-> <ol> <li data-target = "#carousel-example-generic"data-slide-to = "0"> </li> <li data-target = "#carousel-example-generic"data-slide-to = "1"> <li> <li> <li> Data-target = "#carousel-example-generic"data-slide-to = "2"> </li> </ol> <!-회전 페이지의 내용-> <div> <img src = "images/4.jpg"> <!-텍스트 추가-> <div> <h3> u3d <p> 새로운 버전 업그레이드 </p> </p> src = "images/2.jpg"> <div> <h3> u3d </h3> <p> 신제품 출시 </p> </div> </div> <div> <img src = "images/3.jpg"> <div> <h3> 사과 </h3> <p> apple </p> </p> </div> <! <! href = "#carousel-example-generic"data-slide = "prew"> <span> </span> </a> <a href = "#carousel-example-generic"data-slide = "left"> <span> </span> </a> </div>
간격을 설정하고 JS로 자동으로 시작할 수 있습니다
// 간격을 2s로 설정하고 자동으로 회전 목마 $ ( ". carousel"). carousel ({interal : 2000})9. 사이드 바
사이드 바의 주요 내용은 목록입니다
<!-너비를 설정하려면 전화 화면에 숨기기-> <div> <ul> <a href = "#"> hello </a> "#"> href = "href ="#"> hello </a> <a href ="#"> hello </a> <a href ="#"</a> href = "#"> hello </a> <a href = "#"> hello </a> <a href = "#"> hello </a> <a href = "#"> hello </a> </ul> </div>
다시 스타일을 작성하십시오
<style> .affixed-element-top.affix { /*하단에 있으면 하단으로 변경할 수 있습니다 : 10px;* / top : 10px; } .affixed-element-top.affix-bottom {위치 : 상대; } </style>JS를 추가하십시오
$ ( ". js-fixed-element-top"). affix ({오프셋 : {}})이것은 부스트랩의 기본 사용입니다. 마스터 한 후에는 좋은 웹 페이지를 만들 수 있습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.