bootstrap之input-group&label样式

最新推荐文章于 2025-07-03 13:05:02 发布

原创最新推荐文章于 2025-07-03 13:05:02 发布 · 8.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #源码

bootstrap 专栏收录该内容

24 篇文章

订阅专栏

本文详细探讨了Bootstrap框架中input-group和label的样式。从源码层面解析了input-groups.less和labels.less，包括源码内容及在实际应用中的使用方法，帮助读者深入掌握这两部分的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、前言

现在开始介绍bootstrap的输入框组(input-group)和标签(label) 样式。

二、源码

1、input-groups.less

1.1、input-groups.less源码

 //
 // Input groups
 // --------------------------------------------------

 // Base styles
 // -------------------------
 .input-group {
   position: relative; // For dropdowns
   display: table;
   border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table

   // Undo padding and float of grid classes
   &[class*="col-"] {
     float: none;
     padding-left: 0;
     padding-right: 0;
   }

   .form-control {
     // Ensure that the input is always above the *appended* addon button for
     // proper border colors.
     position: relative;
     z-index: 2;

     // IE9 fubars the placeholder attribute in text inputs and the arrows on
     // select elements in input groups. To fix it, we float the input. Details:
     // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
     float: left;

     width: 100%;
     margin-bottom: 0;

     &:focus {
       z-index: 3;
     }
   }
 }

 // Sizing options
 //
 // Remix the default form control sizing classes into new ones for easier
 // manipulation.

 .input-group-lg > .form-control,
 .input-group-lg > .input-group-addon,
 .input-group-lg > .input-group-btn > .btn {
   .input-lg();
 }
 .input-group-sm > .form-control,
 .input-group-sm > .input-group-addon,
 .input-group-sm > .input-group-btn > .btn {
   .input-sm();
 }


 // Display as table-cell
 // -------------------------
 .input-group-addon,
 .input-group-btn,
 .input-group .form-control {
   display: table-cell;

   &:not(:first-child):not(:last-child) {
     border-radius: 0;
   }
 }
 // Addon and addon wrapper for buttons
 .input-group-addon,
 .input-group-btn {
   width: 1%;
   white-space: nowrap;
   vertical-align: middle; // Match the inputs
 }

 // Text input groups
 // -------------------------
 .input-group-addon {
   padding: @padding-base-vertical @padding-base-horizontal;
   font-size: @font-size-base;
   font-weight: normal;
   line-height: 1;
   color: @input-color;
   text-align: center;
   background-color: @input-group-addon-bg;
   border: 1px solid @input-group-addon-border-color;
   border-radius: @input-border-radius;

   // Sizing
   &.input-sm {
     padding: @padding-small-vertical @padding-small-horizontal;
     font-size: @font-size-small;
     border-radius: @input-border-radius-small;
   }
   &.input-lg {
     padding: @padding-large-vertical @padding-large-horizontal;
     font-size: @font-size-large;
     border-radius: @input-border-radius-large;
   }

   // Nuke default margins from checkboxes and radios to vertically center within.
   input[type="radio"],
   input[type="checkbox"] {
     margin-top: 0;
   }
 }

 // Reset rounded corners
 .input-group .form-control:first-child,
 .input-group-addon:first-child,
 .input-group-btn:first-child > .btn,
 .input-group-btn:first-child > .btn-group > .btn,
 .input-group-btn:first-child > .dropdown-toggle,
 .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
 .input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
   .border-right-radius(0);
 }
 .input-group-addon:first-child {
   border-right: 0;
 }
 .input-group .form-control:last-child,
 .input-group-addon:last-child,
 .input-group-btn:last-child > .btn,
 .input-group-btn:last-child > .btn-group > .btn,
 .input-group-btn:last-child > .dropdown-toggle,
 .input-group-btn:first-child > .btn:not(:first-child),
 .input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
   .border-left-radius(0);
 }
 .input-group-addon:last-child {
   border-left: 0;
 }

 // Button input groups
 // -------------------------
 .input-group-btn {
   position: relative;
   // Jankily prevent input button groups from wrapping with `white-space` and
   // `font-size` in combination with `inline-block` on buttons.
   font-size: 0;
   white-space: nowrap;

   // Negative margin for spacing, position for bringing hovered/focused/actived
   // element above the siblings.
   > .btn {
     position: relative;
     + .btn {
       margin-left: -1px;
     }
     // Bring the "active" button to the front
     &:hover,
     &:focus,
     &:active {
       z-index: 2;
     }
   }

   // Negative margin to only have a 1px border between the two
   &:first-child {
     > .btn,
     > .btn-group {
       margin-right: -1px;
     }
   }
   &:last-child {
     > .btn,
     > .btn-group {
       z-index: 2;
       margin-left: -1px;
     }
   }
 }

1.2、input-groups.less应用

 <!--输入框组(使用 table 布局，使得 input 宽度为 100%)-->
 <div style="padding: 100px 100px 10px;">
   <form class="bs-example bs-example-form" role="form">
     <div class="input-group input-group-lg">
       <span class="input-group-addon">@</span>
       <input type="text" class="form-control" placeholder="twitterhandle">
     </div>
     <br>
     <div class="input-group">
       <input type="text" class="form-control">
       <span class="input-group-addon">.00</span>
     </div>
     <br>
     <div class="input-group input-group-sm">
       <span class="input-group-addon">$</span>
       <input type="text" class="form-control">
       <span class="input-group-addon">.00</span>
     </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 type="text" class="form-control">
       <span class="input-group-btn">
         <button class="btn btn-default" type="button">Go!</button>
       </span>
     </div>
     <br>
     <!--带有下拉菜单的按钮-->
     <div class="input-group">
       <input type="text" class="form-control">
       <div class="input-group-btn">
         <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
           下拉菜单<span class="caret"></span>
         </button>
         <ul class="dropdown-menu pull-right">
           <li>
             <a href="#">功能</a>
           </li>
           <li>
             <a href="#">另一个功能</a>
           </li>
           <li>
             <a href="#">其他</a>
           </li>
           <li class="divider"></li>
           <li>
             <a href="#">分离的链接</a>
           </li>
         </ul>
       </div>
     </div>
     <br>
     <!--分割的下拉菜单按钮-->
     <div class="input-group">
       <input type="text" class="form-control">
       <div class="input-group-btn">
         <button type="button" class="btn btn-default" tabindex="-1">下拉菜单</button>
         <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
           <span class="caret"></span>
           <span class="sr-only">切换下拉菜单</span>
         </button>
         <ul class="dropdown-menu pull-right">
           <li>
             <a href="#">功能</a>
           </li>
           <li>
             <a href="#">另一个功能</a>
           </li>
           <li>
             <a href="#">其他</a>
           </li>
           <li class="divider"></li>
           <li>
             <a href="#">分离的链接</a>
           </li>
         </ul>
       </div>
     </div>
   </form>
 </div>

2、labels.less

2.1、labels.less源码

 //
 // Labels(标签)
 // --------------------------------------------------
 .label {
   display: inline;
   padding: .2em .6em .3em;
   font-size: 75%;
   font-weight: bold;
   line-height: 1;
   color: @label-color;
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
   border-radius: .25em;

   // Add hover effects, but only for links
   a& {
     &:hover,
     &:focus {
       color: @label-link-hover-color;
       text-decoration: none;
       cursor: pointer;
     }
   }

   // Empty labels collapse automatically (not available in IE8)
   &:empty {
     display: none;
   }

   // Quick fix for labels in buttons
   .btn & {
     position: relative;
     top: -1px;
   }
 }

 // Colors
 // Contextual variations (linked labels get darker on :hover)

 .label-default {
   .label-variant(@label-default-bg);
 }

 .label-primary {
   .label-variant(@label-primary-bg);
 }

 .label-success {
   .label-variant(@label-success-bg);
 }

 .label-info {
   .label-variant(@label-info-bg);
 }

 .label-warning {
   .label-variant(@label-warning-bg);
 }

 .label-danger {
   .label-variant(@label-danger-bg);
 }

2.2、labels.less应用

 <span class="label label-default">默认标签</span>
 <span class="label label-primary">主要标签</span>
 <span class="label label-success">成功标签</span>
 <span class="label label-info">信息标签</span>
 <span class="label label-warning">警告标签</span>
 <span class="label label-danger">危险标签</span>