집 >웹 프론트엔드 >부트스트랩 튜토리얼 >부트스트랩에서 요소를 숨기는 방법
부트스트랩에서 요소를 숨기는 방법: 1. 해당 코드 파일을 엽니다. 2. 요소에 "display:none;" 또는 "visibility:hidden;"을 추가하여 요소를 숨깁니다.
이 튜토리얼의 운영 환경: windows7 시스템, bootstrap3 버전, Dell G3 컴퓨터.
DIV 표시 및 숨기기 팁
부트스트랩의 12포인트 그리드를 사용하여 시연
style="display: none;" 숨긴 후 점유된 페이지 공간 해제
document.getElementById("typediv1").style.display="none";//隐藏 document.getElementById("typediv1").style.display="";//显示
방법:
<div class="form-group"> <div class="col-lg-3 col-sm-6"> <label class="col-sm-4 control-label">{{taskId}}</label> <div class="col-md-8"> <input type="text" id="xxx" class="form-control"> </div> </div> <div class="col-lg-3 col-sm-6" style="display:none;"> <label class="col-sm-4 control-label">{{msgId}} </label> <div class="col-sm-8" > <input type="text" id="xxx" class="form-control"> </div> </div> <div class="col-lg-3 col-sm-6"> <label class="col-sm-4 control-label">{{createTime}}</label> <div class="xxx input-group col-sm-8" > <input type="text" id="xxx" class="xxx"> <span class="input-group-addon"> <i class="fa fa-clock-o bigger-110"></i> </span> </div> </div> <div class="col-lg-3 col-sm-6"> <label class="col-sm-4 control-label">{{to}}</label> <div class="xxxe input-group col-sm-8"> <input id="xxx" class="xxx"> <span class="input-group-addon"> <i class="fa fa-clock-o bigger-110"></i> </span> </div> </div> </div>
style="max-width:90%" 隐藏后不释放空间 document.getElementById("typediv1").style.visibility="hidden";//隐藏 document.getElementById("typediv1").style.visibility="visible";//显示
Code :
<div class="form-group"> <div class="col-lg-3 col-sm-6"> <label class="col-sm-4 control-label">{{taskId}}</label> <div class="col-md-8"> <input type="text" id="xxx" class="form-control"> </div> </div> <div class="col-lg-3 col-sm-6" style="visibility:hidden;"> <label class="col-sm-4 control-label">{{msgId}} </label> <div class="col-sm-8" > <input type="text" id="xxx" class="form-control"> </div> </div> <div class="col-lg-3 col-sm-6"> <label class="col-sm-4 control-label">{{createTime}}</label> <div class="xxx input-group col-sm-8" > <input type="text" id="xxx" class="form-control xxx"> <span class="input-group-addon"> <i class="fa fa-clock-o bigger-110"></i> </span> </div> </div> <div class="col-lg-3 col-sm-6"> <label class="col-sm-4 control-label">{{to}}</label> <div class="xxx input-group col-sm-8"> <input id="xxx" class="form-control xxx"> <span class="input-group-addon"> <i class="fa fa-clock-o bigger-110"></i> </span> </div> </div> </div>
추천 관련 튜토리얼: "부트스트랩 튜토리얼"
위 내용은 부트스트랩에서 요소를 숨기는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!