Bootstrap 布局组件(全)(2)

通过向输入域添加前缀和后缀的内容,您可以向用户输入添加公共的元素。例如,您可以添加美元符号,或者在 Twitter 用户名前添加 @,或者应用程序接口所需要的其他公共的元素。

向 .form-control 添加前缀或后缀元素的步骤如下:

A、把前缀或后缀元素放在一个带有 class .input-group 的 <div> 中。

B、接着,在相同的 <div> 内,在 class 为 .input-group-addon 的 <span> 内放置额外的内容。

C、把该 <span> 放置在 <input> 元素的前面或者后面。

为了保持跨浏览器的兼容性,请避免使用 <select> 元素,因为它们在 WebKit 浏览器中不能完全渲染出效果。也不要直接向表单组应用输入框组的 class,输入框组是一个孤立的组件。

<form role="form"> <div> <span>$</span> <input type="text"placeholder="twitterhandle"> <span>.00</span> </div> </form>

(1)、输入框组的大小

您可以通过向 .input-group 添加相对表单大小的 class(比如 .input-group-lg、input-group-sm、input-group-xs)来改变输入框组的大小。输入框中的内容会自动调整大小。

(2)、复选框和单选插件

您可以把复选框和单选插件作为输入框组的前缀或者后缀元素

<div> <span> <input type="checkbox"> </span> <input type="text"> </div>

(3)、按钮插件

您也可以把按钮作为输入框组的前缀或者后缀元素,这个时候您就不是添加 .input-group-addon class,您需要使用class .input-group-btn 来包裹按钮。这是必需的,因为默认的浏览器样式不会被重写。

<div> <span> <button type="button"> Go! </button> </span> <input type="text"> </div>  

Bootstrap 布局组件(全)

 

(4)、带有下拉菜单的按钮

在输入框组中添加带有下拉菜单的按钮,只需要简单地在一个 .input-group-btn class 中包裹按钮和下拉菜单即可。

<div> <div> <button type="button" data-toggle="dropdown"> 下拉菜单 <span></span> </button> <ul> <li><a href="#">功能</a></li> <li><a href="#">另一个功能</a></li> <li><a href="#">其他</a></li> <li></li> <li><a href="#">分离的链接</a></li> </ul> </div> <input type="text"> </div>

(5)、分割的下拉菜单按钮

在输入框组中添加带有下拉菜单的分割按钮,使用与下拉菜单按钮大致相同的样式,但是对下拉菜单添加了主要的功能,

<div> <div> <button type="button" tabindex="-1"> 下拉菜单 </button> <button type="button" data-toggle="dropdown" tabindex="-1"> <span></span> <span>切换下拉菜单</span> </button> <ul> <li><a href="#">功能</a></li> <li><a href="#">另一个功能</a></li> <li><a href="#">其他</a></li> <li></li> <li><a href="#">分离的链接</a></li> </ul> </div> <input type="text"> </div>

6、Bootstrap 导航元素

使用相同的标记和基类 .nav。Bootstrap 也提供了一个用于共享标记和状态的帮助器类。改变修饰的 class,可以在不同的样式间进行切换。

(1)、表格导航或标签

创建一个标签式的导航菜单:

A、以一个带有 class .nav 的无序列表开始。

B、添加 class .nav-tabs。

<ul> <li><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">iOS</a></li> <li><a href="#">VB.Net</a></li> <li><a href="#">Java</a></li> <li><a href="#">PHP</a></li> </ul>

(2)、胶囊式的导航菜单

A、基本的胶囊式导航菜单

如果需要把标签改成胶囊的样式,只需要使用 class .nav-pills 代替 .nav-tabs 即可,其他的步骤与上面相同。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzswdy.html