(文章已過時)Bootstrap3.2.0-元件樣式input(input-group)、textarea、checkbox、inline checkbox、radio buttons、inline radio button、select、form-control-static、size、jumbotron

Posted on Edited on In Views: Disqus:

 

一、input

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h2>Form control: input</h2>
        <p>The form below contains two input elements; one of type text and one of type password:</p>
        <form role="form">
            <div class="form-group">
                <label for="usr">Name:</label>
                <input type="text" class="form-control" id="usr">
            </div>
            <div class="form-group">
                <label for="pwd">Password:</label>
                <input type="password" class="form-control" id="pwd">
            </div>
        </form>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

最基本的Bootstrap與input元素配合如上樣式，

Bootstrap並沒有特別對input元素加任何樣式。

form-group與form-control樣式參考如下

.form-group {
    margin-bottom: 15px
}

.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
}

 

二、input style 2

再來看跟input-group與input-group-addon樣式如何配合

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h2>Form control: input</h2>
        <p>The form below contains two input elements; one of type text and one of type password:</p>
        <form role="form">
            <div class="form-group">
                <div class="input-group">
                    <input type="text" name="your-name" value="" size="40" id="name" class="form-control" placeholder="您的稱呼">
                    <span class="input-group-addon" id="basic-addon1">先生</span>
                </div>
            </div>
        </form>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

跟input-group有關的樣式

.input-group {
    position: relative;
    display: table;
    border-collapse: separate;
}

跟input-group底下form-control有關的樣式

.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-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group-addon, .input-group-btn, .input-group .form-control {
    display: table-cell;
}

.input-group .form-control {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0;
}

跟input-group-addon有關的樣式

.input-group-addon:last-child {
    border-left: 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-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group-addon {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px
}
.input-group-addon,.input-group-btn {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle
}
.input-group-addon,.input-group-btn,.input-group .form-control {
    display: table-cell
}

使用input-group時會與input-group-addon配合，才能達到上圖呈現。

範例：input-group、input-group-btn

 

三、textarea

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <h2>Form control: textarea</h2>
        <p>The form below contains a textarea for comments:</p>
        <form role="form">
            <div class="form-group">
                <label for="comment">Comment:</label>
                <textarea class="form-control" rows="5" id="comment"></textarea>
            </div>
        </form>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>

</html>

也有resize:none樣式可用

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <h2>Form control: textarea</h2>
        <p>The form below contains a textarea for comments:</p>
        <form role="form">
            <div class="form-group">
                <label for="comment">Comment:</label>
                <textarea class="form-control" rows="5" id="comment" style="resize:none;"></textarea>
            </div>
        </form>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>

</html>

 

四、checkbox

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <h2>Form control: checkbox</h2>
        <p>The form below contains three checkboxes. The last option is disabled:</p>
        <form role="form">
            <div class="checkbox">
                <label><input type="checkbox" value="">Option 1</label>
            </div>
            <div class="checkbox">
                <label><input type="checkbox" value="">Option 2</label>
            </div>
            <div class="checkbox disabled">
                <label><input type="checkbox" value="" disabled>Option 3</label>
            </div>
        </form>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>

</html>

 

五、checkbox style 2

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <h2>Form control: inline checkbox</h2>
        <p>The form below contains three inline checkboxes:</p>
        <form role="form">
            <label class="checkbox-inline">
                <input type="checkbox" value="">Option 1
            </label>
            <label class="checkbox-inline">
                <input type="checkbox" value="">Option 2
            </label>
            <label class="checkbox-inline">
                <input type="checkbox" value="">Option 3
            </label>
        </form>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>

</html>

 

六、radio

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <h2>Form control: radio buttons</h2>
        <p>The form below contains three radio buttons. The last option is disabled:</p>
        <form role="form">
            <div class="radio">
                <label><input type="radio" name="optradio">Option 1</label>
            </div>
            <div class="radio">
                <label><input type="radio" name="optradio">Option 2</label>
            </div>
            <div class="radio disabled">
                <label><input type="radio" name="optradio" disabled>Option 3</label>
            </div>
        </form>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>

</html>

 

七、radio style 2

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <h2>Form control: inline radio buttons</h2>
        <p>The form below contains three inline radio buttons:</p>
        <form role="form">
            <label class="radio-inline">
                <input type="radio" name="optradio">Option 1
            </label>
            <label class="radio-inline">
                <input type="radio" name="optradio">Option 2
            </label>
            <label class="radio-inline">
                <input type="radio" name="optradio">Option 3
            </label>
        </form>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>

</html>

 

八、select

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <h2>Form control: select</h2>
        <p>The form below contains two dropdown menus (select lists):</p>
        <form role="form">
            <div class="form-group">
                <label for="sel1">Select list (select one):</label>
                <select class="form-control" id="sel1">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                </select>
                <br>

                <label for="sel2">Mutiple select list (hold shift to select more than one):</label>
                <select multiple class="form-control" id="sel2">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
            </div>
        </form>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>

</html>

 

九、form-control-static

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <h2>Horizontal form with static control</h2>
        <form class="form-horizontal" role="form">
            <div class="form-group">
                <label class="control-label col-sm-2" for="email">Email:</label>
                <div class="col-sm-10">
                    <p class="form-control-static">someone@example.com</p>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2" for="pwd">Password:</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="pwd" placeholder="Enter password">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-default">Submit</button>
                </div>
            </div>
        </form>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>

</html>

 

十、control states

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <h2>Horizontal form: control states</h2>
        <form class="form-horizontal" role="form">

            <div class="form-group">
                <label class="col-sm-2 control-label">Focused</label>
                <div class="col-sm-10">
                    <input class="form-control" id="focusedInput" type="text" value="Click to focus...">
                </div>
            </div>

            <div class="form-group">
                <label for="inputPassword" class="col-sm-2 control-label">Disabled</label>
                <div class="col-sm-10">
                    <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
                </div>
            </div>

            <fieldset disabled>
                <div class="form-group">
                    <label for="disabledTextInput" class="col-sm-2 control-label">Disabled input and select list (Fieldset disabled)</label>
                    <div class="col-sm-10">
                        <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
                    </div>
                </div>
                <div class="form-group">
                    <label for="disabledSelect" class="col-sm-2 control-label"></label>
                    <div class="col-sm-10">
                        <select id="disabledSelect" class="form-control">
                            <option>Disabled select</option>
                        </select>
                    </div>
                </div>
            </fieldset>

            <div class="form-group has-success has-feedback">
                <label class="col-sm-2 control-label" for="inputSuccess">Input with success and glyphicon</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputSuccess">
                    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
                </div>
            </div>
            <div class="form-group has-warning has-feedback">
                <label class="col-sm-2 control-label" for="inputWarning">Input with warning and glyphicon</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputWarning">
                    <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
                </div>
            </div>
            <div class="form-group has-error has-feedback">
                <label class="col-sm-2 control-label" for="inputError">Input with error and glyphicon</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputError">
                    <span class="glyphicon glyphicon-remove form-control-feedback"></span>
                </div>
            </div>
        </form>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

 

Bootstrap Form Control States
INPUT FOCUS: When an input receives focus, the outline of the input is removed and a box-shadow is applied
DISABLED INPUTS: If you need to disable an input, add the disabled attribute
DISABLED FIELDSETS: Add the disabled attribute to a <fieldset> to disable all the controls within
READONLY INPUTS: Add the readonly attribute to an input to prevent user input
VALIDATION STATES: Bootstrap includes validation styles for error, warning, and success messages. To use, add .has-warning, .has-error, or .has-success to the parent element
ICONS: You can add feedback icons with the .has-feedback class and the right icon
HIDDEN LABELS: Add the .sr-only class on the label for form controls with no visible label

 

十一、input sizing

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <h2>Input Sizing</h2>
        <p>The form below shows input elements with different heights using .input-lg and .input-sm:</p>
        <form role="form">
            <div class="form-group">
                <label for="inputdefault">Default input</label>
                <input class="form-control" id="inputdefault" type="text">
            </div>
            <div class="form-group">
                <label for="inputlg">input-lg</label>
                <input class="form-control input-lg" id="inputlg" type="text">
            </div>
            <div class="form-group">
                <label for="inputsm">input-sm</label>
                <input class="form-control input-sm" id="inputsm" type="text">
            </div>
            <div class="form-group">
                <label for="sel1">Default select list</label>
                <select class="form-control" id="sel1">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                </select>
            </div>
            <div class="form-group">
                <label for="sel2">input-lg</label>
                <select class="form-control input-lg" id="sel2">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
            </div>
            <div class="form-group">
                <label for="sel3">input-sm</label>
                <select class="form-control input-sm" id="sel3">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
            </div>
        </form>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

 

十二、input sizing style 2

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <h2>Input Sizing</h2>
        <p>You can quickly size labels and form controls within a Horizontal form by adding .form-group-lg or .form-group-sm to the div class="form-group" element:</p>
        <form class="form-horizontal" role="form">
            <div class="form-group form-group-lg">
                <label class="col-sm-2 control-label" for="lg">form-group-lg</label>
                <div class="col-sm-10">
                    <input class="form-control" type="text" id="lg">
                </div>
            </div>
            <div class="form-group form-group-sm">
                <label class="col-sm-2 control-label" for="sm">form-group-sm</label>
                <div class="col-sm-10">
                    <input class="form-control" type="text" id="sm">
                </div>
            </div>
        </form>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

 

十三、jumbotron

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Case</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  </head>

  <body>
    <div class="container">
      <div class="jumbotron">
        <h1>My first Bootstrap website!</h1>      
        <p>This page will grow as we add more and more components from Bootstrap...</p>      
      </div>
    </div>

    <div class="container">
      <p>This is a paragraph.</p>      
      <p>This is another paragraph.</p>      
      <p>This is a paragraph.</p>      
      <p>This is another paragraph.</p>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>

 

參考資料：

Bootstrap Forms三種layout

http://getbootstrap.com/components/#input-groups