全局css样式与组件
作者：互联网
表单：
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="jane.doe@example.com">
</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>
运行如下：
关闭按钮
通过使用一个象征关闭的图标，可以让模态框和警告框消失。
×
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
三角符号
通过使用三角符号可以指示某个元素具有下拉菜单的功能。注意，向上弹出式菜单中的三角符号是反方向的。
<span class="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> <nav class="navbar navbar-default navbar-fixed-top"><!--navbar-fixed-top固定在顶部--> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-fire text-danger"></span></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="content" class="margin:51px; height:800px"> 77777 </div> </body>
标签：pull,right,样式,clearfix,block,mixin,组件,css,left 来源： https://www.cnblogs.com/ltc123/p/15655453.html