Bootstrap快速上手

衡与墨的博客

分类

开源分享

关于我

Bootstrap快速上手

认识Bootstrap

简单介绍Bootstrap

Bootstrap是 Twitter 公司开发的一个基于HTML CSS JavaScript的技术框架，是当下最流行的前端框架之一，在GitHub上拥有了超过13万的star。Bootstrap有以下优点：

** Boostrap上手快，实用性高，适合不同技术水平的人 **
** 跨设备、跨浏览器、适合移动开发 **
** 代码开源https://github.com/twbs/bootstrap/，包含众多的衍生库、插件 **
** 与jQuery完美融合 **
** 用户体验好，UI优雅简洁，风格一致 **
** 轻量化，打包后就只有几十KB **

Bootstrap最大的优点是它的定制化，通过使用自定义工具，可以自由的选择想要的元素和组件，并且定义每个颜色的具体数值，所有不需要的代码都会被去掉，以节省下载流量。

Bootstrap的几种不同版本

bootstrap-3.3.7-dist.zip 编译并压缩后的 CSS、JavaScript 和字体文件。不包含文档和源码文件。适用于生产环境使用。
bootstrap-3.3.7.zip Less、JavaScript 和字体文件的源码，并且带有文档。需要 Less 编译器和一些设置工作。适合学习。在docs文件夹下包含着Bootstrap的参考文档，在docs/examples文件夹下包含Bootstrap应用示例。在img文件夹中包含着
bootstrap-sass-3.3.7.tar.gz 这是 Bootstrap 从 Less 到 Sass 的源码移植项目，用于快速地在 Rails、Compass 或只针对 Sass 的项目中引入。

下载Bootstrap v3：https://v3.bootcss.com/getting-started/#download

Bootstrap快速构建网站在线工具：http://www.ibootstrap.cn/

方便学习和开发Bootstrap的软件：HBuilder X(良心国产，堪比vscode、sublime)、DreamWeaver CC 2018（两个软件都支持实时查看效果）

Bootstrap的构成

页面布局，栅格系统、重置背景、链接样式等脚手架功能
页面排版，页面排版、代码、表格、表单、按钮样式、图标集等css样式
基本组件，标签、导航、警告、页面标题等常用界面组件
jQuery插件，实现工具提示、弹出提示、模态对话框等交互性的提示
动态样式语言Less、sass
jQuery UI Bootstrap

定制Bootstrap

访问https://v3.bootcss.com/customize/:

选择你需要的组件、jQuery插件，通过修改Less变量可以修改颜色，设置完成之后点击页面最底部的编译并下载就好了。

Bootstrap的安装

在html的header部分添加css链接：

<link href="bootstrap/css/bootstrap.css" type="text/css" />
<!--这个是包含bootstrap基本样式的css文件-->

<link href="bootstrap/css/bootstrap-reponsive.css" type="text/css" />
<!--这个是包含bootstrap响应式布局的css样式-->

<link href="bootstrap/css/self.css" type="text/css" />
<!--这个是项目的自定义样式，用来覆盖Bootstrap中的一些默认样式，便于定义自己的样式 />

在<body></body>的尾部添加js文件链接：

<script src="http://code.jquery.com/jquery.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>

Hello world

可以通用的模板：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>hello bootstrap</title>
        <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css" type="text/css" charset="utf-8">
        <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-responsive.css" type="text/css" charset="utf-8">
        
        <link rel="stylesheet" href="hello_world.css" type="text/css" charset="utf-8">
    </head>
    
    <body>
        <h1 class="btn btn-success btn-large"><span class="glyphicon glyphicon-user glyphicon-white"></span>hello world, this is bootstrap</h1>
        
        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    </body>
</html>

使用Bootstrap实现一个简单的tabs功能

在之前hello world的基础上增加代码，并在项目目录下建立img文件夹，放入图片。
注意的几个点：每个tab导航都指向了一个tab-pane内容，被选中的在class中添加active类。

        <!-- 简单的tabs功能 -->
        <ul class="nav nav-tabs">
            <li class="active"><a href="#tab1" data-toggle="tab">Tab1</a></li>
            <li><a href="#tab2" data-toggle="tab">Tab2</a></li>
            <li><a href="#tab3" data-toggle="tab">Tab3</a></li>
            <li><a href="#tab4" data-toggle="tab">Tab4</a></li>
        </ul>
        
        <!-- tab的内容 -->
        <div class="tab-content">
            <div class="tab-pane fade in active" id="tab1"><img src="img/1.jpg" alt=""></div>
            <div class="tab-pane fade" id="tab2"><img src="img/2.png" alt=""></div>
            <div class="tab-pane fade" id="tab3"><img src="img/3.png" alt=""></div>
            <div class="tab-pane fade" id="tab4"><img src="img/4.jpg" alt=""></div>
        </div>

效果：

点击Tab1/Tab2/Tab3/Tab4可以切换图片，同时具有淡入淡出效果。

Bootstrap基础

栅格系统

顾名思义，栅格系统就像窗户上的栏杆一样把窗口划分成等分的几个部分，用来方便网页的设计和开发。使用栅格设计的网页十分的有条理，看起来规范而整洁。
Bootstrap的栅格系统分为12列。
栅格分为固定式和流式两种，固定式意味着不管屏幕窗口的尺寸是多少，栅格的每一列都是固定的长度：

固定式：宽度为940px，每一列的宽度为60px，列之间的间距为20px。固定不变

<style type="text/css">
.row div {
    background-color:gray; /*如果不加的话，默认为白色，看不出栅格*/
    height:300px;
    text-align: center;
    line-height: 300px;
    font-size: 300%;
    color: white;
}
</style>

<!-- containner是外包围，是必须加的 -->
<div class="container">
    <!-- row表示各子组件都在同一行上 span* 代表着列的宽度占比:*/12 -->
    <div class="row">
        <div class="span2">2</div>
        <div class="span1">1</div>  
        <div class="span3">3</div>
        <div class="span6">6</div>
    </div>
</div>

结果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZvU4mdBZ-1646494688596)(Bootstrap三天快速上手_files/4.jpg)]

流式：会随着窗口的大小进行页面的伸缩

<style type="text/css">
.row div {
    background-color:gray; /*如果不加的话，默认为白色，看不出栅格*/
    height:300px;
    text-align: center;
    line-height: 300px;
    font-size: 300%;
    color: white;
}
</style>
<!-- 和固定式不同的地方就是原来使用的 container变成了container-fluid row 变成了row-fluid -->
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span2">2</div>
        <div class="span1 offset1">1</div>  
        <!-- 通过使用offset*来使得该组件向左偏移*列，固定式布局和流式布局都可以使用-->
        <div class="span3">3</div>  
        <div class="span6">6</div>
    </div>
</div>

结果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LWlQnXAw-1646494688596)(Bootstrap三天快速上手_files/3.jpg)]

缩放网页，会发现栅格的宽度会随着页面的大小改变，这就是流式布局的真义。

流式布局和固定布局的对比：

    <div class="container-fluid">
        <div class="row">
            <div class="span3">no-fluid-3</div>
            <div class="span4">no-fluid-4</div>
            <div class="span3">no-fluid-3</div>
        </div>
        <div class="row-fluid">
            <div class="span5">fluid6</div>
            <div class="span3">fluid3</div>
            <div class="span4">fluid4</div>
        </div>
    </div>

当窗口很小时，固定式会保持宽度不变，然后会自动的换行，而流式布局会都在一行内：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oLxVMivJ-1646494688597)(Bootstrap三天快速上手_files/5.jpg)]

当窗口足够大时，固定式布局的宽度不变，而流式布局还会增加：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u1Hnut5U-1646494688597)(Bootstrap三天快速上手_files/6.jpg)]

响应式布局

当一个页面能根据窗口的不同大小而体现出不同的布局时，就可以说这个页面是响应式的了。比如说博客园的网页在电脑上查看时，常用链接、最新评论等导航标签栏是出现在页面的左侧的：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vlvSKrIQ-1646494688597)(Bootstrap三天快速上手_files/7.jpg)]

而在手机查看时，它会出现在页面的末尾，同时各个组件也进行了缩放：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rWJWYyXe-1646494688597)(Bootstrap三天快速上手_files/9.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gL0QZHjC-1646494688598)(Bootstrap三天快速上手_files/8.jpg)]

这就是最标准的响应式布局。

以下是响应式布局的一些要点：

    <!-- 控制手机浏览器缩放：以原始大小展示，不允许缩放，防止iPhone浏览器自己缩放网页 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- 设置图片的最大宽度不超过组件的宽度，防止图片破坏网页 -->
    img { max-width: 100%;}
    
    <!-- 布局和组件都不能使用带有明确宽度的布局，应使用百分比 -->
    div { width: 100%; /*或者width: auto;*/}
    
    <!-- 网页字体不能使用绝对大小px，应该使用相对大小em -->
    body { font: normal 100% Helvetica, Arial, sans-serif; } /*默认大小*/
    h1 { font-size: 1.5em; } /*默认大小的1.5倍*/
    
    <!-- 使用浮动布局，当宽度不足时，后面的元素会自动在前面的元素的下方显示 -->
    .main { float: right; width: 70%;}
    .left-bar {float: left; width: 25%}
    
    <!-- 创建多个样式表，来使得在不同设备浏览时自动加载不同的样式，以实现不同的布局 -->
    <!-- 通过使用link元素的media属性来自动匹配布局：当设备屏幕宽度小于480px时自动加载mobile.css作为样式 -->
    <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="mobile.css">
    <!-- 也可以通过css3的Media Query把多个样式文件整合在一个文件里 -->
    @media only screen and (min-device-width: 320px) and (max-device-width: 480px){
        /*屏幕尺寸 320px - 480px的样式*/
    }
    @media only screen and (min-width:480px){
        /*页面尺寸大于480px*/
    }
    <!-- 通过orientation属性来锁定横屏和竖屏 -->
    @media screen and (orientation: landscape){/*横屏*/}
    @media screen and (orientationL: portrait){/*竖屏*/}
    <!-- 对于不支持css3的IE6/7/8可以通过加入js文件的方法来支持Media query和html5 -->
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!--[if lt IE 9]>
        <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
    <!-- 还可以通过jQuery来实现 -->
    $(doucment).ready(function(){
        $(window).bind("resize", function(){
            var window_size = $(window).width()
            if(window_size < 600){
                $("link[rel=stylesheet]").attr({href: "mobile.css"})
            }else{
                $("link[rel=stylesheet]").attr({href: "computer.css"})
            }
        })
    })
    
    <!-- 通过js判断屏幕宽度之后，来设置某些组件的display属性为none来自动隐藏内容，-->
    <!-- 防止页面在手机查看时内容过多，杂乱无章 -->
    div { display: none; }
    
    <!-- 禁止iPhone字体大小自动调整 -->
    html { -webkit-text-size-adjust: none; }

通过Bootstrap我们可以更加轻松的实现响应式布局：

<!-- 首先引入响应式bootstrap css 文件 -->
<link href="bootstrap/css/bootstrap-responsive.css" type="text/css" />

然后使用container-fluid 和 row-fluid来设置流式布局，
最后通过选择不同的类样式来显示或隐藏组件：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zlb5NCFS-1646494688598)(Bootstrap三天快速上手_files/10.jpg)]

一个简单的Bootstrap响应式布局示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="view-port" content="width=device-width, initial-scale=1.0">
        <title>test responsive</title>
        <link rel="stylesheet" href="bootstrap/css/bootstrap.css" type="text/css" charset="utf-8">
        <link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.css" type="text/css" charset="utf-8">
        <style type="text/css">
            .container-fluid > .row-fluid div{
                height: 400px;
                line-height: 400px;
                font-size: 150%;
            }
        </style>
    </head>
    <body>
        <div class="container-fluid text-center">
            <div class="hero-unit" style="background: #DDDDDD; min-width: 300px;">Tittle</div>
            <div class="row-fluid">
                <div class="span3 hidden-phone" style="background: #5EADCC;">left sidebar</div>
                <div class="span9" style="background: #808080; min-width: 300px;">content</div>
            </div>
        </div>
        
        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="bootstrap/js/bootstrap.js"></script>
    </body>
</html>

结果：

小屏幕状态下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QOSwsInT-1646494688598)(Bootstrap三天快速上手_files/11.jpg)]
在这里插入图片描述
大屏幕状态下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q1gnXlOC-1646494688599)(Bootstrap三天快速上手_files/12.jpg)]
在这里插入图片描述

Bootstrap css样式

基本

Bootstrap自动对HTML原有的样式进行了优化，在导入Bootstrap之后，这些样式就会默默的起作用，哪怕你不使用Bootstrap内的任何一个类样式。

例如对于HTML的标题，Bootstrap进行了样式的优化：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2b4kRwUE-1646494688599)(Bootstrap三天快速上手_files/13.jpg)]

Bootstrap还提供了small标签：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1tWVmqKC-1646494688599)(Bootstrap三天快速上手_files/14.jpg)]

Bootstrap定义的全局font-size为14px，line-height为2-px，color为#333333，background-color为#ffffff。

Bootstrap定义的段落p自带底部边距：p { margin: 0 0 10px 0;}

文本强调

<h1><small>强调类工具</small></h1>
<p class="muted">class="muted"，提示性文本</p>
<p class="text-warning">class="text-warning"，警告类文本</p>
<p class="text-error">class="text-error"，错误类文本</p> 
<p class="text-info">class="text-info"，通知类文本</p> 
<p class="text-success">class="text-success"，成功类文本</p> 


<em>使用em标签设置斜体</em><br>
<b>使用b标签显示视觉上的强调</b><br>
<strong>使用strong标签进行语义上的强调</strong><br>

显示效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U9Q50cHG-1646494688599)(Bootstrap三天快速上手_files/16.jpg)]

文本对齐

/*顾名思义*/
.text-left { text-align: left; } /*左对齐*/
.text-right {... }
.text-center { ... }

略缩词

    <!-- 当鼠标指针移动到Bootstrap上方时会显示提示“推特公司开源的前端框架”的消息提示 -->
    <p>
        <abbr title="推特公司开源的前端框架">Bootstrap</abbr>是很棒的框架！
    </p>

表格优化

<table><tr><td>等表格元素也进行了优化，增加了行间距、设置了居中
<table class="table table-striped table-bordered table-hover table-condensed">

<!-- table-striped设置了斑马纹，table-bodered设置了圆形边框，table-hover设置鼠标悬停时有选中效果
table-condensed设置单元格内行间距缩小，更为紧凑 -->
    <tr><th>排名</th> <th>歌曲名</th><th>歌手名</th></tr>
    <tr><td>1</td><td>我，一个人</td><td>付辛博</td> </tr>
    <tr><td>2</td><td>他们</td><td>张惠妹</td></tr>
    <tr><td>3</td><td>伤不起</td><td>郁可唯</td></tr>
    <tr><td>4</td><td>如果有如果</td><td>邓福如</td></tr>
    <tr><td>5</td><td>狂想曲</td><td>萧敬腾</td></tr>
    <tr><td>6</td><td>越来越想爱上你</td><td>SD5行堂</td></tr>
    <tr><td>7</td><td>妈妈咪呀!</td><td>张靓颖</td></tr>
    <tr><td>8</td><td>除下吊带前</td><td>薛凯琪</td></tr>
    <tr><td>9</td><td>如梦令（电影《大武生》主题曲）</td><td>韩庚</td></tr> 
    <tr><td>10</td><td>因为爱情</td><td>陈奕迅</td></tr> 
</table>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uwmsT2jS-1646494688600)(Bootstrap三天快速上手_files/15.jpg)]

通过设置success、error、warning、info样式可以分别表示成功、危险、警告、默认的样式：

<table class="table table-bordered">
    <tr> <th>样式类</th><th>说明</th></tr>
    <tr class="success"><td>success</td><td>表示成功或积极的行为。</td> </tr>
    <tr class="error"><td>error</td><td>表示一个危险或存有潜在危险的行为。</td></tr>
    <tr class="warning"><td>warning</td><td>表示警告，可能需要注意。</td></tr>
    <tr class="info"><td>info</td><td>作为一个默认样式的一个替代样式。</td></tr>
</table>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UAO2uj6u-1646494688600)(Bootstrap三天快速上手_files/17.jpg)]

输入框input

<!-- 基本效果 -->
<input type="text" placeholder="文本框默认值">
<br>

<!-- 不同长度 -->
<label><input class="input-mini" type="text" placeholder=".input-mini"></label>
<label><input class="input-small" type="text" placeholder=".input-small"></label>
<label><input class="input-medium" type="text" placeholder=".input-medium"></label>
<label><input class="input-large" type="text" placeholder=".input-large"></label>
<label><input class="input-xlarge" type="text" placeholder=".input-xlarge"></label>
<label><input class="input-xxlarge" type="text" placeholder=".input-xxlarge"></label>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ffBX8kYn-1646494688600)(Bootstrap三天快速上手_files/19.jpg)]

    <!-- 后缀文本 -->
    <form class="form-search">
      <div class="input-append">
        <input type="text" class="span3 search-query">
        <button type="submit" class="btn">快速搜索</button>
      </div>
    </form>
    
    <br>
    
    <!-- 前缀文本 -->
    <div class="input-prepend">
        <span class="add-on">email</span>
        <input type="text" class="span2" placeholder="xxxxx@xx.xx">
    </div>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xEZaOkue-1646494688600)(Bootstrap三天快速上手_files/18.jpg)]

按钮

Bootstrap自带的一些按钮样式：

<button class="btn">默认</button>
<button class="btn btn-info">信息</button>
<button class="btn btn-primary">主要</button>
<button class="btn btn-success">成功</button>
<button class="btn btn-warning">警告</button>
<button class="btn btn-danger">危险</button>
<button class="btn btn-inverse">反向</button>
<button class="btn btn-link">链接</button>

<br>
<br>

<button class="btn btn-info btn-large">大号按钮</button>
<button class="btn btn-info">默认大小</button>
<button class="btn btn-info btn-small">小号按钮</button>
<button class="btn btn-info btn-mini">迷你按钮</button>

<br>
<br>

<button type="button" class="btn btn-large" disabled="disabled">属性禁用</button>
<button type="button" class="btn btn-large disabled">类样式禁用</button>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GcvTZzeV-1646494688601)(Bootstrap三天快速上手_files/22.jpg)]


<!-- 按钮下拉选择 -->
<div class="input-prepend input-append">
    <input type="button" class="btn" value="Email" />
    <input type="text" />
    <div class="btn-group">
        <button class="btn">@163.com</button>
        <button class="btn" data-toggle="dropdown" tabindex="-1">
            <span class="caret"></span>
        </button>        
        <ul class="dropdown-menu">
            <li><a href="#">@126.com</a></li>
            <li><a href="#">@sohu.com</a></li>
            <li><a href="#">@qq.com</a></li>
            <li><a href="#">@263.net</a></li>
            
        </ul>
    </div>
    <button class="btn">登录</button>
</div>

效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OgvfLvCG-1646494688601)(Bootstrap三天快速上手_files/20.jpg)]

图片

<div class="row-fluid">
    <div class="text-center span3"> <img src="../../img/1.jpg">
        <h3>正常效果</h3>
    </div>
    <div class="text-center span3"> <img src="../../img/1.jpg" class="img-rounded" title="圆角图片">
        <h3>圆角效果</h3>
    </div>
    <div class="text-center span3"> <img src="../../img/1.jpg" class="img-circle" title="圆形图片">
        <h3>圆形效果</h3>
    </div>
    <div class="text-center span3"> <img src="../../img/1.jpg" class="img-polaroid" title="镶边图片">
        <h3>镶边效果</h3>
    </div>
</div>

实际的效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J5viRVew-1646494688601)(Bootstrap三天快速上手_files/23.jpg)]

图标

在菜鸟教程网站的图标列表页面可以看到Bootstrap3的图标和类名对照表。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RRDfCABH-1646494688601)(Bootstrap三天快速上手_files/24.jpg)]

Bootstrap的图标使用很简单，如：

<!-- Bootstrap 1 的图标是icon开头的 -->
<i class="icon-serach"></i>
<span class="icon-user"></span>

<!-- Bootstrap 3 的图标是 glyphicon开头的，而且要添加类glyphicon-->
<span class="glyphicon glyphicon-serach"></span>
<i calss="glyphicon glyphicon-user"></i>

效果如下（都是一样的）：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pJVIJ0ph-1646494688602)(Bootstrap三天快速上手_files/25.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CkK89nQg-1646494688602)(Bootstrap三天快速上手_files/26.jpg)]

定制图标

在菜鸟教程的图标定制页面可以定制图标（不同的颜色、大小、阴影等）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nk9JDbcw-1646494688602)(Bootstrap三天快速上手_files/27.jpg)]

<span class="glyphicon glyphicon-asterisk" style="color: rgb(102, 140, 60); font-size: 49px;"> Asterik</span>

定制效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f1d5OgVw-1646494688602)(Bootstrap三天快速上手_files/28.jpg)]

图标按钮

<ul class="nav nav-pills">
  <li class="active"><a href="#"><i class="icon-home icon-white"></i> 首页</a></li>
  <li><a href="#"><i class="icon-book"></i> 资料</a></li>
  <li><a href="#"><i class="icon-pencil"></i> 写日志</a></li>
  <li><a href="#"><i class=" icon-film"></i> 视频</a></li>
</ul>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SDg0Hlw8-1646494688603)(Bootstrap三天快速上手_files/29.jpg)]

表单图标

<div class="control-group">
    <label class="control-label" for="inputIcon">邮箱</label>
    <div class="controls">
        <div class="input-prepend"> <span class="add-on"><i class="icon-envelope"></i></span>
            <input class="span2" id="email" type="text">
        </div>
    </div>
    <label class="control-label" for="inputIcon">密码</label>
    <div class="controls">
        <div class="input-prepend"> <span class="add-on"><i class="icon-lock"></i></span>
            <input class="span2" id="pass" type="text">
        </div>
    </div>
</div>

<!-- 这里添加add-on 是为了使得图标更加契合表单项 -->

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Fek3SQwU-1646494688603)(Bootstrap三天快速上手_files/30.jpg)]

记得加add-on，不加的话会变成这样子：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TsHvHW1b-1646494688603)(Bootstrap三天快速上手_files/31.jpg)]

文本区域

<form role="form">
  <div class="form-group">
    <label for="name">文本框</label>
    <textarea class="form-control" rows="3" style="max-width: 80%;"></textarea>
  </div>
</form>

<!-- 一个细节是，“form-control”样式的表单控件宽度为100%或auto -->
<!-- 这时cols属性不再起作用，要修改文本域的列数可以通过使用max-width或者min-width来限制 -->

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BE5eiLjk-1646494688604)(Bootstrap三天快速上手_files/32.jpg)]

单选框、复选框

<form action="">
    <input type="radio" name="sex" value="male">Male<br>
    <input type="radio" name="sex" value="female">Female
</form>

<form action="">
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
    <input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nU59gxiE-1646494688604)(Bootstrap三天快速上手_files/33.jpg)]

下拉选择

综合

<form class="form-actions">
    <label>用户名：
        <input type="text" id="userName" class="span4"/>
    </label>
    <label>密　码：
        <input type="password" id="userPsw" class="span4"/>
    </label>
    <button type="reset" class="btn span1">取消</button>
    <button type="submit" class="btn span3 btn-primary">确定登录</button>    
</form>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lDKtPgUb-1646494688604)(Bootstrap三天快速上手_files/21.jpg)]

其他


<address>用来显示地址

<blockquote>用来显示引用

<code>、<pre>代码段增加了灰色背景、灰色边框

...

版权声明

本文章由作者“衡于墨”创作，转载请注明出处，未经允许禁止用于商业用途

本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。

发布时间：2019年04月30日 23:45:54

评论区#

还没有评论哦，期待您的评论！

备案号：

闽ICP备19015193号-1

关闭特效

版权声明

评论区#

引用发言