BootStrap-CSS样式_布局组件_导航栏中的(表单按钮文本链接对齐方式)

导航栏中的表单

使用 .navbar-form class。这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为。使用对齐方式选项来决定导航栏中的内容放置在哪里。

导航栏中的按钮

使用 class .navbar-btn 向不在 <form> 中的 <button> 元素添加按钮，按钮在导航栏上垂直居中。.navbar-btn 可被使用在 <a> 和 <input> 元素上。不要在 .navbar-nav 内的 <a> 元素上使用 .navbar-btn，因为它不是标准的 button class。

导航栏中的文本

使用 class .navbar-text。这通常与 <p> 标签一起使用，确保适当的前导和颜色。

非导航链接

如果您不想在常规的导航栏导航组件内使用标准的链接，那使用 class navbar-link 来为默认的和倒转的导航栏选项添加适当的颜色。

组件对齐方式

使用实用工具 class .navbar-left 或 .navbar-right 向左或向右对齐导航栏中的导航链接、表单、按钮或文本这些组件。这两个 class 都会在指定的方向上添加 CSS 浮动。

代码实例：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>导航栏表单按钮文本</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body style="padding:50px;">
     <h2>3.导航栏中的表单</h2>
     <!-- navbar-form样式：在导航栏中设置表单from -->
    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">W3Cschool</a>
        </div>
        <div>
            <form action="" 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">提交</button>
            </form>
        </div>
    </nav>

    <h3>4.导航栏中的按钮</h3>
    <!-- navbar-btn样式：在nav中单独设置按钮，加navbar-btn -->
    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">W3Cschool</a>
        </div>
        <div>
            <form action="" 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">提交</button>
            </form>
            <button type="button" class="btn btn-default navbar-btn">
                导航栏按钮
            </button>
        </div>
    </nav>

    <h3>5.导航栏中的文本</h3>
    <!-- navbar-text样式：设置文本 -->
    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">W3Cschool</a>
        </div>
        <div>
            <form action="" 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">提交</button>
            </form>
            <button type="button" class="btn btn-default navbar-btn">
                导航栏按钮
            </button>
            <p class="navbar-text">This is Navgation Text</p>
            
        </div>
    </nav>

    <h3>6.导航栏中的链结</h3>
    <!-- navbar-link样式：设置连接，显示和文本样式一直 -->
      <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">W3Cschool</a>
        </div>
        <div>
            <p class="navbar-text">This is Navgation Text
                <a href="#" class="navbar-link">测试</a>
            </p>
    </div>
    </nav>
    <h3>7.导航栏中内容的对齐方式</h3>
    <!-- 
    navbar-left样式：在导航栏中左对齐
    navbar-right样式：在导航栏中右对齐 
    -->
    <nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</a>
   </div>
   <div>
      <ul class="nav navbar-nav navbar-left">
         <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               Java 
               <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
               <li><a href="#">jmeter</a></li>
               <li><a href="#">EJB</a></li>
               <li><a href="#">Jasper Report</a></li>
               <li class="divider"></li>
               <li><a href="#">分离的链接</a></li>
               <li class="divider"></li>
               <li><a href="#">另一个分离的链接</a></li>
            </ul>
         </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
         <button type="submit" class="btn btn-default">
            向左对齐-提交按钮  
         </button>
      </form> 
      <p class="navbar-text navbar-left">向左对齐-文本</p>
   
      <ul class="nav navbar-nav navbar-right">
         <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               Java <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
               <li><a href="#">jmeter</a></li>
               <li><a href="#">EJB</a></li>
               <li><a href="#">Jasper Report</a></li>
               <li class="divider"></li>
               <li><a href="#">分离的链接</a></li>
               <li class="divider"></li>
               <li><a href="#">另一个分离的链接</a></li>
            </ul>
         </li>
      </ul>
      <form class="navbar-form navbar-right" role="search">
         <button type="submit" class="btn btn-default">
            向右对齐-提交按钮
         </button>
      </form> 
      <p class="navbar-text navbar-right">向右对齐-文本</p>
   </div>
    <script src="../js/jquery-1.11.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</body>
</html>

显示效果：

BootStrap-CSS样式_布局组件_导航栏中的(表单按钮文本链接对齐方式)

猜你喜欢