新一期的干货来了BootStrap该怎么用乐字节java4

表单

                            如果须要更多材料点击下方图片加好友支付⬇（注明来意）
                   
​ 表单次要性能是用来与用户做交换的一个网页控件，良好的表单设计可能让网页与用户更好的沟通。表单中常见的元素次要包含：文本输入框、下拉抉择框、单选按钮、复选按钮、文本域和按钮等。

表单控件

​ .form-control .input-lg（较大）.input-sm（较小）

输入框 text

​ .form-control

<div class="col-sm-3">
    <input type="text" name=""id="" class="form-control" />
    <input type="text" name=""id="" class="form-control input-lg" />
    <input type="text" name=""id="" class="form-control input-sm" />
</div>

下拉抉择框 select

​ 多行抉择设置：multiple=”multiple”

<div class="col-sm-3">
    <select class="form-control">
        <option> 北京 </option>
        <option> 上海 </option>
        <option> 深圳 </option>
    </select>
    <select class="form-control" multiple="multiple">
        <option> 北京 </option>
        <option> 上海 </option>
        <option> 深圳 </option>
    </select>
</div>

文本域 textarea

<div class="col-sm-3">
    <textarea class="form-control" rows="3"></textarea>
</div>

复选框 checkbox

​ 垂直显示：.checkbox

​ 程度显示：.checkbox-inline

<!-- 垂直显示 -->
<div>
    <div class="checkbox">
        <label><input type="checkbox" > 游戏 </label>
    </div>
    <div class="checkbox">
        <label><input type="checkbox" > 学习 </label>
    </div>
</div>
<!-- 程度显示 -->
<div>
    <label class="checkbox-inline">
        <input type="checkbox" > 游戏
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" > 学习
    </label>
</div>

单选框 radio

​ 垂直显示：.radio

​ 程度显示：.radio-inline

<!-- 垂直显示 -->
<div>
    <div class="radio">
        <label><input type="radio" > 男 </label>
    </div>
    <div class="radio">
        <label><input type="radio" > 女 </label>
    </div>
</div>
<!-- 程度显示 -->
<div>
    <label class="radio-inline">
        <input type="radio" > 男
    </label>
    <label class="radio-inline">
        <input type="radio" > 女
    </label>
</div>

按钮

1）应用 button 实现

​ 根底款式：btn

<button class="btn"> 按钮 </button>

​ 附加款式：btn-primary btn-info btn-success btn-warning btn-danger btn-link btn-default

<button class="btn btn-danger"> 按钮 </button>
<button class="btn btn-primary"> 按钮 </button>
<button class="btn btn-info"> 按钮 </button>
<button class="btn btn-success"> 按钮 </button>
<button class="btn btn-default"> 按钮 </button>
<button class="btn btn-warning"> 按钮 </button>
<button class="btn btn-link"> 按钮 </button>

2）多标签反对：应用 a div 等制作按钮

<a href="##" class="btn btn-info">a 标签按钮 </a>
<span class="btn btn-success">span 标签按钮 </span>
<div class="btn btn-warning">div 标签按钮 </div>

3）按钮大小

​ 应用 .btn-lg、.btn-sm 或 .btn-xs 就能够取得不同尺寸的按钮

<button class="btn btn-primary btn-xs"> 超小按钮.btn-xs</button>
<button class="btn btn-primary btn-sm"> 小型按钮.btn-sm</button>
<button class="btn btn-primary"> 失常按钮 </button>
<button class="btn btn-primary btn-lg"> 大型按钮.btn-lg</button> 

4）按钮禁用

​ 办法 1：在标签中增加 disabled 属性

<button class="btn btn-danger" disabled="disabled"> 禁用按钮 </button>

​ 办法 2：在元素标签中增加类名 ”disabled”

<button class="btn btn-danger disabled"> 禁用按钮 </button>

​ 在 class 属性中增加 disabled 只是款式上禁用了，并不是真正的禁用了此按钮！

表单布局

​ 根本的表单构造是 Bootstrap 自带的，个别的表单控件主动接管一些全局款式。上面列出了创立根本表单的步骤：

• 向父 <form> 元素增加 role=”form”。
• 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必须的。
• 向所有的文本元素 <input>、<textarea> 和 <select> 增加 class =”form-control”。

程度表单

​ 同一行显示 form-horizontal

​ 配合 Bootstrap 框架的网格零碎

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="email" class="control-label col-sm-2"> 邮箱 </label>
        <div class="col-sm-10">
            <input type="email" class="form-control" placeholder="请输出邮箱"/>
        </div>
    </div>
    <div class="form-group">
        <label for="pwd" class="control-label col-sm-2"> 明码 </label>
        <div class="col-sm-10">
            <input type="pwd" class="form-control" placeholder="请输出明码" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2">
            <div class="checkbox">
                <label>
                    <input type="checkbox" /> 记住明码
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button class="btn btn-default"> 提交 </button>
        </div>
    </div>
</form>

内联表单

​ 将表单的控件都在一行内显示 form-inline

​ 留神 label 不会显示，存在的意义：如果没有为输出控件设置 label 标签，屏幕阅读器将无奈正确辨认。

<form class="form-inline">
    <div class="form-group">
        <label for="email" > 邮箱 </label>
        <input type="email" class="form-control" placeholder="请输出邮箱"/>
    </div>
    <div class="form-group">
        <label for="pwd" > 明码 </label>
            <input type="pwd" class="form-control" placeholder="请输出明码" />
    </div>
    <div class="form-group checkbox">
        <label><input type="checkbox" /> 记住明码 </label>
    </div>
    <div class="form-group">
        <button class="btn btn-default"> 提交 </button>
    </div>
</form>

缩略图

​ 缩略图在电商类的网站很常见，最罕用的中央就是产品列表页面。缩略图的实现是配合网格零碎一起应用。同时还能够让缩略图配合题目、形容内容，按钮等。

<div class="container">
    <div class="row">
        <div class="col-md-3">
               <div class="thumbnail">
                   <img src="img/IMG_0131.JPG" alt="...">
                   <h3> 高圆圆 </h3>
                   <p> 出生于北京市，中国边疆影视女演员、模特。</p>
                   <button class="btn btn-default">
                    <span class="glyphicon glyphicon-heart"></span> 喜爱 </button>
                   <button class="btn btn-info">
                    <span class="glyphicon glyphicon-pencil"></span> 评论
                </button>
               </div>
        </div>
    </div>
</div>

面板

​ 默认的 .panel 组件所做的只是设置根本的边框（border）和内补（padding）来蕴含内容。

​ .panel-default：默认款式

​ .panel-heading：面板头

​ .panel-body：面板主体内容

<div class="panel panel-success">
    <div class="panel-heading">
        ......
    </div>
    <div class="panel-body">
        ......
    </div>
</div>