Bootstrap输入框和导航组件

我就是我 2022-06-12 04:46 243阅读 0赞

# 输入框组件 #

> 文本输入框就是可以在input元素前后加上文字或按钮，可以实现对表单控件的扩展

<div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control">
    </div>

<div class="input-group">
        <input type="text" class="form-control">
        <span class="input-group-addon"></span>
    </div>

<div class="input-group">
        <span class="input-group-addon">$</span>
        <input type="text" class="form-control">
        <span class="input-group-addon">.00</span>
    </div>

<div class="input-group input-group-lg">

<div class="input-group">
        <span class="input-group-addon"><input type="checkbox"></span>
        <input type="text" class="form-control">
    </div>
    <div class="input-group">
        <span class="input-group-addon"><input type="radio"></span>
        <input type="text" class="form-control">
    </div>

<div class="input-group">
        <span>
            <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                下拉菜单
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">首页</a></li>
                <li><a href="#">咨询</a></li>
                <li><a href="#">产品</a></li>
                <li><a href="#">关于</a></li>
            </ul>
        </span>
        <input type="text" class="form-control">
    </div>

# 导航组件 #

> Bootstrap提供了一组导航组件，用于实现Web页面的栏目操作

<ul class="nav nav-tabs">
        <li class="active"><a href="#">首页</a></li>
        <li><a href="#">咨询</a></li>
        <li><a href="#">产品</a></li>
        <li><a href="#">关于</a></li>
    </ul>

<ul class="nav nav-pills">
        <li class="active"><a href="#">首页</a></li>
        <li><a href="#">咨询</a></li>
        <li><a href="#">产品</a></li>
        <li><a href="#">关于</a></li>
    </ul>

<ul class="nav nav-pills nav-stacked">
    
    <ul class="nav nav-tabs nav-justified">
    
    <li class="disabled"><a href="#">关于</a></li>

<ul class="nav nav-tabs">
        <li class="active"><a href="#">首页</a></li>
        <li><a href="#">咨询</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                下拉菜单
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#">菜单一</a></li>
                <li><a href="#">菜单二</a></li>
            </ul>
        </li>
        <li><a href="#">关于</a></li>
    </ul>

![输入框和导航][SouthEast]

# 导航条组件 #

> 作为导航页头的响应式基本组件

<nav class="navbar navbar-default">
        ...
    </nav>
    
    <nav class="navbar navbar-inverse">
        ...
    </nav>

<nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">标题</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">咨询</a></li>
                <li><a href="#">产品</a></li>
                <li class="disabled"><a href="#">关于</a></li>
            </ul>
        </div>
    </nav>

<nav class="navbar navbar-default">
        <div class="container"></div>
            <div class="navbar-header">
                <a href="#" class="navbar-brand">标题</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">咨询</a></li>
                <li><a href="#">产品</a></li>
                <li class="disabled"><a href="#">关于</a></li>
            </ul>
            <form action="" class="navbar-form navbar-right">
                <div class="input-group">
                    <input type="text" class="form-control">
                    <div class="input-group-btn">
                        <button class="btn btn-default" type="submit">提交</button>
                    </div>
                </div>
            </form>
            
            <button class="btn btn-default navbar-btn navbar-left">按钮</button>
            
            <button class="btn btn-default navbar-btn navbar-right">按钮</button>
            
            <p class="navbar-text">我是一段文本</p>
            
            <p class="navbar-text"><a href="#" class="navbar-link">非导航链接</a></p>
        </div>

<nav class="navbar navbar-default navbar-fixed-top">
    
    <nav class="navbar navbar-default navbar-fixed-bottom">
    
    <nav class="navbar navbar-default navbar-static-top">

![nav导航条组件][nav]

[SouthEast]: /images/20220612/dc7344d9d55649118bfe2b29084356a3.png
[nav]: /images/20220612/999d0e7446a948d881edf92508274b03.png