Bootstrap的引用样式
2018-09-08 18:46 更新
通过设置 display: inline-block; 并添加少量的内补(padding),将所有元素放置于同一行。
语法:
<ul class="list-inline"> <li>…</li> </ul>案例:
<ul class="list-inline"> <li>Lorem ipsum</li> <li>Phasellus iaculis</li> &n bsp; <li>Nulla volutpat</li> </ul>运行结果:
有的时候,我们可能需要一个所有控件都在一行中的表单,比如图3-21所示的登录。要实现这种内联样式效果,只需要在普通的form元素上应用一个.form-inline样式,即可将表单内的元素设置为内联样式。
水平线上的唯一因素就是要控制元素的显示方式为display: inline-block,所以只需要为相应的子元素设置display属性即可。但需要注意的是,该.form-inline样式只能在大于768像素的浏览器上才能应用。源码如下:
// 源码1927行 @media (min-width: 768px) { /* 大于768像素的浏览器才生效*/ .form-inline .form-group { display: inline-block; /* 内联样式显示*/ margin-bottom: 0; vertical-align: middle; } .form-inline .form-control { display: inline-block; /* 内联样式显示,但由于form-control样式设置了100%的宽度,所以没什么用*/ width: auto; vertical-align: middle; } .form-inline .radio, .form-inline .checkbox { display: inline-block; padding-left: 0; margin-top: 0; /* 确保上下居中*/ margin-bottom: 0; vertical-align: middle; } .form-inline .radio input[type="radio"], .form-inline .checkbox input[type="checkbox"] { float: none; /* 不使用浮动定位*/ margin-left: 0; } .form-inline .has-feedback .form-control-feedback { top: 0; } }要注意,由于默认的样式为.form-control,且其input、select和textarea的宽度都是100%,所以在使用内联表单的时候是无效的,需要对这些控件元素单独设置宽度width,或者外面再加上一层带有.form-group样式的div元素。示例如下:
<form class="form-inline"> <div class="form-group"> <input type="text" class="form-control" placeholder="请输入你的用户名"> </div> <div class="form-group"> <input type="text" class="form-control" placeholder="请输入你的密码"> </div> <div class="checkbox"> <label><input type="checkbox">记住密码</label> </div> <button type="submit" class="btn btn-default">登录</button> </form>但这种情况下,如果再设置一个label的话,input又换行了。所以如果非要label的话,那就只能在input所在div元素的上边再加一个div元素用于包含label标签。比如:
<div class="form-group"> <label>用户名:</label> </div> <div class="form-group"> <input type="text" class="form-control" placeholder="请输入你的用户名"> </div>注意
如果没有为每个输入控件设置label,屏幕阅读器将无法正确识别。对于这种内联表单,可以通过为label设置.sr-only样式将其隐藏。比如:
<div class="form-group"> <label class="sr-only" for="account">登录用户名</label> <input type="text" class="form-control" id="account" placeholder="请输入你的用户名"> </div>
以上内容是否对您有帮助:
更多建议: