第二百三十四节，Bootstrap表单和图片

Bootstrap表单和图片

学习要点：

　　1.表单

　　2.图片

本节课我们主要学习一下 Bootstrap 表单和图片功能，通过内置的 CSS 定义，显示各种丰富的效果。

一．表单

Bootstrap 提供了一些丰富的表单样式供开发者使用。

1.基本格式

实现基本的表单样式

form-control样式class类，写在里,设置输入框样式(Bootstrap)
form-group样式class类，写在输入框外面的

里,设置输入框与输入框之间的样式(Bootstrap)

<form>
    <div class="form-group">
        <label>电子邮件label>
        <input type="email" class="form-control" placeholder="请输入您的电子邮件">
    div>
    <div class="form-group">
        <label>密码label>
        <input type="password" class="form-control" placeholder="请输入您的密码">
    div>
form>

注：只有正确设置了输入框的 type 类型，才能被赋予正确的样式。支持的输入框控件包括：text、password、datetime、datetime-local、date、month、time、week、 number、email、url、search、tel 和 color。

2.内联表单

让表单左对齐浮动，并表现为 inline-block 内联块结构，当小于 768px，会恢复独占样式

form-inline样式class类，写在

里,让表单左对齐浮动，并表现为 inline-block 内联块结构，当小于 768px，会恢复独占样式(Bootstrap)

<form class="form-inline">
    <div class="form-group">
        <label>电子邮件label>
        <input type="email" class="form-control" placeholder="请输入您的电子邮件">
    div>
    <div class="form-group">
        <label>密码label>
        <input type="password" class="form-control" placeholder="请输入您的密码">
    div>
form>

大于768px

小于768px

3.表单合组

前后增加片段，给输入框前后加上片段

input-group-addon样式class类，写在input同级的

里,给输入框加一个片段(Bootstrap)
input-group样式class类，写在input父级的

里,将输入框和片段合并(Bootstrap)

<form class="form-inline">
    <div class="form-group">
        <label>电子邮件label>
        <input type="email" class="form-control" placeholder="请输入您的电子邮件">
    div>
    <div class="form-group">
        <label>密码label>
        <input type="password" class="form-control" placeholder="请输入您的密码">
    div>

    <label>金额label>
    <div class="input-group">
        <div class="input-group-addon">￥div>
        <input type="text" class="form-control">
        <div class="input-group-addon">.00div>
    div>
form>

4.水平排列

让表单内的元素保持水平排列

form-horizontal样式class类，写在里,让表单内的元素保持水平排列(Bootstrap)
col-sm-2样式class类，写在里,给输入框的标题设置所占比例(Bootstrap)
col-sm-10样式class类，写在input的父级

里,给输入框设置所占比例(Bootstrap)
control-label样式class类，写在里,让输入框标题和form元素同步(Bootstrap)

<form class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-2 control-label">电子邮件label>
        <div class="col-sm-10">
            <input type="email" class="form-control" placeholder="请输入您的电子邮件">
        div>
    div>

    <div class="form-group">
        <label class="col-sm-2 control-label">电子邮件label>
        <div class="col-sm-10">
            <input type="text" class="form-control" placeholder="请输入名称">
        div>
    div>
form>

大屏

小屏

注：这里用到了 col-sm 栅格系统，后面章节会重点讲解，而 control-label 表示和父元素样式同步。

5.复选框和单选框

设置复选框，为区块一行

checkbox样式class类，写在input外层

里,设置复选框为区块一行样式(Bootstrap)

    <div class="checkbox">
        <label>
            <input type="checkbox">体育
        label>
    div>
    <div class="checkbox">
        <label>
            <input type="checkbox">音乐
        label>
    div>

设置禁用的复选框

disabled样式class类，写在input外层

里,禁止复选框文字选择(Bootstrap)

    <div class="checkbox disabled">
        <label>
            <input type="checkbox" disabled>体育
        label>
    div>
    <div class="checkbox">
        <label>
            <input type="checkbox">音乐
        label>
    div>

设置内联一行显示的复选框

checkbox-inline样式class类，写在input外层里,设置内联一行显示的复选框(Bootstrap)

    <label class="checkbox-inline disabled">
        <input type="checkbox" disabled>体育
    label>


    <label class="checkbox-inline">
        <input type="checkbox">音乐
    label>

设置单选框区块一行显示

radio样式class类，写在input外层

里,设置单选框区块一行显示(Bootstrap)

    <div class="radio">
        <label>
            <input type="radio" name="sex">男
        label>
    div>
        <div class="radio">
        <label>
            <input type="radio" name="sex">女
        label>
    div>

设置单选框内联一行显示

radio-inline样式class类，写在input外层

里,设置单选框内联一行显示(Bootstrap)

    <div class="radio-inline">
        <label>
            <input type="radio" name="sex">男
        label>
    div>
        <div class="radio-inline">
        <label>
            <input type="radio" name="sex">女
        label>
    div>

注意：禁用单选框和禁用复选框一样

6.下拉列表

设置下拉列表

form-control样式class类，写在里,大尺寸输入框(Bootstrap)
input-sm样式class类，写在里,小尺寸输入框(Bootstrap)

    <div class="form-group has-success has-feedback">
        <label class="col-sm-2 control-label">电子邮件label>
        <div class="col-sm-10">
            <input type="text" class="form-control input-lg" placeholder="请输入名称">
            <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">电子邮件label>
        <div class="col-sm-10">
            <input type="text" class="form-control" placeholder="请输入名称">
            <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">电子邮件label>
        <div class="col-sm-10">
            <input type="text" class="form-control input-sm" placeholder="请输入名称">
            <span class="glyphicon glyphicon-remove form-control-feedback">span>
        div>
    div>

注：也可以设置父元素 form-group-lg、form-group-sm，来调整。

二．图片

Bootstrap 提供了一些丰富的图片样式供开发者使用。

1.图片形状

img-rounded样式class类，写在里,设置图片圆角样式(Bootstrap)
img-circle样式class类，写在里,设置图片圆形，图片时正方形的就是圆形，图片时长方形的就是椭圆(Bootstrap)
img-thumbnail样式class类，写在里,设置图片缩略图样式(Bootstrap)

<img src="img/pic.png" alt="图片" class="img-rounded">
<img src="img/pic.png" alt="图片" class="img-circle">
<img src="img/pic.png" alt="图片" class="img-thumbnail">

2响应式图片

img-responsive样式class类，写在里,设置图片响应式(Bootstrap)

<img src="img/pic.png" alt="图片" class="img-thumbnail img-responsive">
<img src="img/pic.png" alt="图片" class="img-thumbnail img-responsive">
<img src="img/pic.png" alt="图片" class="img-thumbnail img-responsive">

Python

第二百三十四节，Bootstrap表单和图片

相关

学习《Python编程从入门到实践》PDF+代码训练

python-----面向对象简单理解

python多线程控制

Sublime 的安装、汉化、配置、Python环境和插件

python——time strftime() 函数表示当地时间

python 初识函数

python 函数对象嵌套闭包

Python栈溢出——设置python栈大小

python-面向对象-01课堂笔记

python爬虫

Python 之父的解析器系列之五：左递归 PEG 语法

Python 为了提升性能，竟运用了共享经济

标签