全域性css樣式與元件
阿新 • • 發佈：2021-12-07
表單：
form-inline顯示在一行
form-horizontal水平排列的表單
caret三角符號
pull-left向左浮動
pull-right向右浮動
center-block內容塊居中
clearfix清除浮動
form-inline顯示在一行
<form class="form-inline"> <div class="form-group"> <label for="exampleInputName2">Name</label> <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe"> </div> <div class="form-group"> <label for="exampleInputEmail2">Email</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]"> </div> <button type="submit" class="btn btn-default">Send invitation</button></form>
執行如下：
form-horizontal水平排列的表單：
<body> <!-- <span class="glyphicon glyphicon-user"></span> --> <form action="#" method="get" class="form-horizontal"><!--form-inline 放在一行 --> <div class="form-group"> <label for="name" class="col-md-2 control-label">賬號</label> <div class="col-md-10"> <input type="text" id="name" name="name" placeholder="請輸入賬號" class="form-control"> </div> </div> <div class="form-group"> <label for="pwd" class="col-md-2 control-label">密碼</label> <div class="col-md-10"> <input type="password" name="pwd" id="pwd" placeholder="請輸入密碼" class="form-control"> </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <input type="reset" value="重置" class="btn btn-default"> <input type="submit" value="登入" class="btn btn-primary"> </div> </div> </form> </body>
執行如下：
關閉按鈕
通過使用一個象徵關閉的圖示，可以讓模態框和警告框消失。
×
<buttontype="button"class="close"aria-label="Close"><spanaria-hidden="true">×</span></button>
三角符號
通過使用三角符號可以指示某個元素具有下拉選單的功能。注意，向上彈出式選單中的三角符號是反方向的。
<spanclass="caret"></span>
快速浮動
通過新增一個類，可以將任意元素向左或向右浮動。!important被用來明確 CSS 樣式的優先順序。這些類還可以作為 mixin（參見 less 文件） 使用。
<div class="pull-left">...</div><div class="pull-right">...</div> // Classes.pull-left { float: left !important;}.pull-right { float: right !important;} // Usage as mixins.element { .pull-left();}.another-element { .pull-right();}
讓內容塊居中
為任意元素設定display: block屬性並通過margin屬性讓其中的內容居中。下面列出的類還可以作為 mixin 使用。
<div class="center-block">...</div> // Class.center-block { display: block; margin-left: auto; margin-right: auto;} // Usage as a mixin.element { .center-block();}
清除浮動
通過為父元素新增.clearfix類可以很容易地清除浮動（float）。這裡所使用的是 Nicolas Gallagher 創造的micro clearfix方式。此類還可以作為 mixin 使用。
<!-- Usage as a class --><div class="clearfix">...</div> // Mixin itself.clearfix() { &:before, &:after { content: " "; display: table; } &:after { clear: both; }} // Usage as a mixin.element { .clearfix();}
導航條
<body> <navclass="navbarnavbar-defaultnavbar-fixed-top"><!--navbar-fixed-top固定在頂部--> <divclass="container-fluid"> <!--Brandandtogglegetgroupedforbettermobiledisplay--> <divclass="navbar-header"> <buttontype="button"class="navbar-togglecollapsed"data-toggle="collapse"data-target="#bs-example-navbar-collapse-1"aria-expanded="false"> <spanclass="sr-only">Togglenavigation</span> <spanclass="icon-bar"></span> <spanclass="icon-bar"></span> <spanclass="icon-bar"></span> </button> <aclass="navbar-brand"href="#"><spanclass="glyphiconglyphicon-firetext-danger"></span></a> </div> <!--Collectthenavlinks,forms,andothercontentfortoggling--> <divclass="collapsenavbar-collapse"id="bs-example-navbar-collapse-1"> <ulclass="navnavbar-nav"> <liclass="active"><ahref="#">Link<spanclass="sr-only">(current)</span></a></li> <li><ahref="#">Link</a></li> <liclass="dropdown"> <ahref="#"class="dropdown-toggle"data-toggle="dropdown"role="button"aria-haspopup="true"aria-expanded="false">Dropdown<spanclass="caret"></span></a> <ulclass="dropdown-menu"> <li><ahref="#">Action</a></li> <li><ahref="#">Anotheraction</a></li> <li><ahref="#">Somethingelsehere</a></li> <lirole="separator"class="divider"></li> <li><ahref="#">Separatedlink</a></li> <lirole="separator"class="divider"></li> <li><ahref="#">Onemoreseparatedlink</a></li> </ul> </li> </ul> <formclass="navbar-formnavbar-left"> <divclass="form-group"> <inputtype="text"class="form-control"placeholder="Search"> </div> <buttontype="submit"class="btnbtn-default">Submit</button> </form> <ulclass="navnavbar-navnavbar-right"> <li><ahref="#">Link</a></li> <liclass="dropdown"> <ahref="#"class="dropdown-toggle"data-toggle="dropdown"role="button"aria-haspopup="true"aria-expanded="false">Dropdown<spanclass="caret"></span></a> <ulclass="dropdown-menu"> <li><ahref="#">Action</a></li> <li><ahref="#">Anotheraction</a></li> <li><ahref="#">Somethingelsehere</a></li> <lirole="separator"class="divider"></li> <li><ahref="#">Separatedlink</a></li> </ul> </li> </ul> </div><!--/.navbar-collapse--> </div><!--/.container-fluid--> </nav> <divclass="content"class="margin:51px;height:800px"> 77777 </div> </body>