부트스트랩에 대한 일반적인 인터뷰 질문(요약)

이 기사에는 몇 가지 일반적인 부트스트랩 인터뷰 질문이 요약되어 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. 더 많은 부트스트랩 관련 튜토리얼을 배우고 얻으려면 부트스트랩 튜토리얼을 방문하세요!

1. 부트스트랩을 사용하는 이유

Bootstrap은 모바일 기기 우선순위, 우수한 브라우저 지원, 사용 편의성, 반응형 디자인 등의 장점을 갖고 있어 Bootstrap이 널리 사용되고 있습니다.

2. 헤드에 뷰포트 메타 태그 추가

부트스트랩에서 개발한 웹사이트를 모바일 친화적으로 만들고 적절한 그리기 및 터치 스크린 크기 조정을 보장하려면 뷰포트 메타 태그를 헤드에 추가해야 합니다. 웹페이지의

width 속성은 장치의 너비를 제어합니다. 귀하의 웹 사이트가 다양한 화면 해상도를 가진 장치에서 표시된다고 가정할 때 장치 너비로 설정하면 다른 장치에서도 올바르게 렌더링됩니다.

iinitial-scale=1.0;웹페이지가 로드될 때 크기 조정 없이 1:1 비율로 렌더링되는지 확인하세요.

모바일 브라우저에서는 viewport 메타 태그에 user-scalable=no를 추가하여 확대/축소 기능을 비활성화할 수 있습니다.

일반적으로 maximum-scale=1.0 은 user-scalable=no과 함께 사용됩니다. 확대/축소 기능을 비활성화한 후 사용자는 화면을 스크롤만 할 수 있으므로 웹사이트가 기본 애플리케이션처럼 보일 수 있으므로 다음 코드를 추가하세요.

<metaname="viewport" content="width=device-width,initial-scale=1">

3 다양한 크기의 장치의 경우 부트스트랩 설정 클래스 접두사는 무엇입니까? ?

초소형 장치 모바일(<768px): .col-xs-

소형 장치 태블릿(>=768px): .col-sm-

중형 장치 데스크톱(>=992px): . md-

대형 장치 데스크탑(>=1200px): .col-lg-

4.Bootstrap에서 반응형 테이블을 설정하는 방법은 무엇입니까?

Add class="table-Response"

5. Bootstrap을 사용하여 수직 양식을 만드는 기본 단계는 무엇입니까?

(1) 상위

요소에 role="form"을 추가합니다.

(2) class="form-group"을 사용하여 레이블과 컨트롤을 넣습니다. 최적의 간격 확보

(3) 모든 텍스트 요소 , , <select>에 class="form-control"을 추가합니다. </p> <p><strong>6. Bootstrap을 사용하여 가로 형태를 만드는 기본 단계는 무엇입니까? </strong></p> <p>(1) 상위 <form> 요소에 class="form-horizontal"을 추가합니다. </p> <p>(2) class="form-group"을 사용하여 <p> (3) 라벨에 class="control-label"을 추가합니다. </p> <p></p>7. Bootstrap을 사용하여 양식 컨트롤에 대한 도움말 텍스트를 만드는 방법은 무엇입니까? <p><strong></strong>class="help-block"으로 스팬 태그 또는 p 태그를 추가하세요. </p> <p></p>8. Bootstrap을 사용하여 버튼을 활성화하거나 비활성화하는 방법은 무엇입니까? <p><strong></strong>활성화 버튼: 버튼에 .active 클래스 추가 </p> <p>비활성화 버튼: 비활성화="disabled" 속성을 버튼에 추가</p> <p></p>9 Bootstrap에는 <img>에 대한 클래스가 있나요? <p><strong></strong>(1).img-rounded 사진에 둥근 모서리를 추가하세요</p> <p>(2).img-circle 사진을 둥근 모양으로 바꿔보세요</p> <p>(3).img-thumbnail 썸네일 기능</p> <p>(4).img - 반응형 이미지 응답성(부모 요소까지 잘 확장됨)</p> <p></p>10. 부트스트랩에서 요소 부동 및 부동 요소 지우기와 관련된 클래스는 무엇입니까? <p><strong></strong> (1) class="pull-left" 요소는 왼쪽으로 부동 </p> <p> (2) class="pull-right" 요소는 오른쪽으로 부동 </p> <p> (3) class="clearfix" 클리어 부동 </p> <p></p> 11. 스크린 리더 외에 다른 장치의 요소를 숨기는 클래스는 무엇입니까? <p><strong></strong>class="sr-only"</p> <p></p>12. Bootstrap에서 드롭다운 메뉴를 만드는 방법은 무엇입니까? <p><strong></strong>(1) 드롭다운 메뉴를 class="dropdown"의 <p>로 래핑합니다. </p> <p>(2) 드롭다운 메뉴를 실행하는 버튼에 class="btn dropdown-toggle" id를 추가합니다. ="dropdownMenu1" data-toggle="dropdown"</p> <p>(3) 드롭다운 메뉴를 래핑하는 ul을 추가합니다. class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"</p> <p>(4 ) 드롭다운 메뉴 목록에서 항목에 role="presentation"을 추가합니다. 그 중 드롭다운 메뉴 제목에 class="dropdown-header"를 추가하고, 옵션 부분에 tabindex="-1"을 추가해야 합니다. </p> <p></p>13. Bootstrap에서 버튼 그룹을 만드는 방법은 무엇입니까? 그리고 가로버튼 그룹과 세로버튼 그룹의 우선순위는 어떻게 되나요? <p><strong></strong> (1) class="btn-group" <p>을 사용하여 버튼 그룹을 래핑합니다. class="btn-group-vertical"은 수직 버튼 그룹을 설정할 수 있습니다. </p> <p>(2) btn-group의 우선순위는 btn-group-vertical의 우선순위보다 높습니다. </p> <p></p>14. 부트스트랩에서 버튼의 드롭다운 메뉴를 설정하는 방법은 무엇입니까? <p><strong><p> 버튼과 드롭다운 메뉴를 .btn 그룹에 배치하기만 하면 됩니다. </p> <p><strong>15. Bootstrap에서 입력 상자 그룹을 만드는 방법은 무엇입니까? </strong></p> <p> (1) class="input-group"을 사용하여 <p>에 접두사 또는 접미사 요소를 넣습니다. </p> <p> (2) < ;p>, class="input-group-addon"의 <span> </p> <p> 안에 추가 콘텐츠를 배치합니다. (3) <input> . </p> <p><strong>16. 부트스트랩의 탐색이란 무엇인가요? </strong></p> <p> (1) 탐색 요소: class="nav nav-tabs"가 있는 탭 탐색과 class="nav nav-pills"가 있는 캡슐 탭 탐색이 있습니다.# 🎜🎜## 🎜🎜# (2) 탐색 모음: class="navbar navbar-default" role="navigation"; </p> <p> (3) 이동 경로 탐색: class="breadcrumb"#🎜🎜 #</p> <p>17. 부트스트랩에서 페이징 클래스를 설정하시겠습니까? </p> <p><strong>기본 페이징: class="pagination"</strong></p>기본 페이징: class="pager"<p></p>#🎜🎜 #18. Bootstrap에서 레이블을 표시하는 데 어떤 클래스가 사용됩니까? <p></p> <p>class="label"<strong></strong></p>19. Bootstrap에서 배지를 만드는 방법은 무엇입니까? <p></p> <p><span class="badge">26</span><strong></strong></p>20. 초대형 화면의 역할은 무엇인가요? 부트스트랩에서? <p></p> <p> class="jumbotron"으로 설정하면 점보 화면을 만들 수 있습니다. 이 구성 요소는 제목 크기를 늘리고 여백을 추가할 수 있습니다. <strong></strong>요약: 위 내용은 이 글의 전체 내용이며, 모든 분들의 공부에 도움이 되길 바랍니다. </p></strong></p><p>위 내용은 부트스트랩에 대한 일반적인 인터뷰 질문(요약)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">bootstrap</a> <a href="javascript:void(0);">select</a> <a href="javascript:void(0);">class</a> <a href="javascript:void(0);">default</a> <a href="javascript:void(0);">外边距</a> <a href="javascript:void(0);">viewport</a> <a href="javascript:void(0);">input</a> <a href="javascript:void(0);">ul</a> <a href="javascript:void(0);">table</a><div class="clear"></div></div><div class="nphpQianSheng"><span>성명：</span><div>이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="부트스트랩 레이아웃의 타이포그래피 스타일, 목록 스타일, 테이블 스타일 소개" href="http://m.php.cn/ko/faq/411585.html">부트스트랩 레이아웃의 타이포그래피 스타일, 목록 스타일, 테이블 스타일 소개</a></span><span>다음 기사：<a class="dBlack" title="부트스트랩 레이아웃의 타이포그래피 스타일, 목록 스타일, 테이블 스타일 소개" href="http://m.php.cn/ko/faq/411588.html">부트스트랩 레이아웃의 타이포그래피 스타일, 목록 스타일, 테이블 스타일 소개</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="http://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ko/faq/348757.html" title="HTML 지식 요약" class="aBlack">HTML 지식 요약</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/348804.html" title="HTML을 빨리 배우는 방법" class="aBlack">HTML을 빨리 배우는 방법</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/348873.html" title="html xhtml xml의 차이점" class="aBlack">html xhtml xml의 차이점</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/348884.html" title="src와 href 속성의 차이점" class="aBlack">src와 href 속성의 차이점</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/348902.html" title="HTML5 및 CSS 대체 사용 정보" class="aBlack">HTML5 및 CSS 대체 사용 정보</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/ko/"><b class="icon1"></b><p>집</p></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><p>강의</p></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><p>Q&A</p></a></li><li><a href="http://m.php.cn/ko/login"><b class="icon5"></b><p>나의</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/ko/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ko/"><b class="icon1"></b><span>집</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><span>강의</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/article.html"><b class="icon3"></b><span>기사</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><span>Q&A</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/dic.html"><b class="icon6"></b><span>사전</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course/type/99.html"><b class="icon7"></b><span>수동</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/xiazai/"><b class="icon8"></b><span>다운로드</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/faq/zt" title="주제"><b class="icon12"></b><span>주제</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/ko/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ko/" >집</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/article.html" class="hover">기사</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/course.html" >강의</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/faq/zt" >주제</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/xiazai" >다운로드</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/game" >게임</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/dic.html" >사전</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>