Bootstrap输入框和导航组件

Bootstrap输入框和导航组件

一.下拉菜单

下拉菜单,就是点击一个元素或按钮,触发隐藏的列表显示出来。

按钮和菜单需要包裹在.dropdown 的容器里,而作为被点击的元素按钮需要设置datatoggle=”dropdown”才能有效。对于菜单部分,设置 class=”dropdown-menu”才能自动隐藏并添加固定样式。设置 class=”caret”表示箭头,可上可下。

示例效果:
Bootstrap输入框和导航组件_第1张图片

Bootstrap输入框和导航组件_第2张图片

代码:

<body>
    
    <div class="dropdown">  
    
        <button class="btn btn-default" 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>
    div>

    <br>
    <div class="dropdown">  
        <button class="btn btn-default" data-toggle="dropdown">
            下拉菜单
            <span class="caret">span> 
        button>
        <ul class="dropdown-menu">  
            <li class="dropdown-header">网站导航li> 
            <li> <a href="#">首页a>li>
            <li> <a href="#">咨讯a>li>
            <li class="divider"> <a href="#">产品a>li>
            <li class="disabled"> <a href="#">关于a>li> 
        ul>
    div>

    body>

二.输入框组件

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

例如实现下列的效果:

Bootstrap输入框和导航组件_第3张图片

代码示例:

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

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

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

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

    <br>
    <div class="input-group">
        <input class="form-control">
        <span class="input-group-btn">
            <button class="btn btn-default">提交button>
        span>
    div>

    <br>
    <div class="input-group">
        <input ttype="text" class="form-control">
            <div class="input-group-btn">  
                <button class="btn btn-default" 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>
            div>
        input>
    div>
    body>

三. 导航条组件

导航组件,用于实现 Web 页面的栏目操作,导航条是网站中作为导航页头的响应式基础组件。

示例效果:

这里写图片描述

代码:

    <body>
    
     
     
     
    <nav class="navbar navbar-default navbar-fixed-top"> 
        <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> <a href="#">关于a>li>
            ul>

            
            <button class="btn btn-default navbar-btn navbar-right">注册button>

            
            <form 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">搜索button>
                    div>
                div>
            form>

            
                <button class="btn btn-default navbar-btn navbar-left">登录button>
            <p class="navbar-text">我是一段文字<a href="#" class="navbar-link">链接地址a>p>
        div>
    nav>

    <br><br>
    <ol class="breadcrumb">
        <li><a href="#">首页a>li>
        <li><a href="#">产品列表a>li>
        <li class="active">时尚春款新装li>
    ol>

    body>

四. 分页组件

分页组件可以提供带有展示页面的功能。

使用演示:


    <ul class="pagination pagination-lg"> 
        <li><a href="#">«a>li>
        <li class="active"><a href="#">1a>li> 
        <li><a href="#">2a>li>
        <li><a href="#">3a>li>
        <li><a href="#">4a>li>
        <li class="disabled"><a href="#">5a>li> 
        <li><a href="#">»a>li>
    ul>

    <br>
    <ul class="pager"> 
        <li><a href="#">上一页a>li>
        <li><a href="#">下一页a>li>
    ul>
    <br>
    <ul class="pager"> 
        <li class="previous"><a href="#">上一页a>li>
        <li class="next"><a href="#">下一页a>li>
    ul>

五. 标签组件


    
    <h3>标签<span class="label label-default">newspan>h3>

六. 徽章组件


    <a href="#">未读信息信息<span class="badge">10span>a>
    <br>
    <button class="btn btn-success">
        提交<span class="badge">5span>
    button>
    <br>
    <ul class="nav nav-pills">
        <li><a href="active">首页<span class="badge">2span>a>li>
        <li><a href="">咨讯a>li>
    ul>

你可能感兴趣的:(Bootstrap)