BootStrap入门

最新推荐文章于 2024-03-23 21:41:48 发布
最新推荐文章于 2024-03-23 21:41:48 发布
阅读量195 收藏
点赞数 1
分类专栏： html基础 边框设计 文章标签： bootstrap 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74637610/article/details/127703479
版权

BootStrap

贯穿案例展示–车位管理

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MI7mfHsK-1667629972296)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3ed09ab55ef84b298c042e39bd2df184~tplv-k3u1fbpfcp-watermark.image?)]

导入：为什么要使用BootStrap

​ Bootstrap，来自 Twitter，是一款受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

大家可以在github上下载：https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip

​ 要想使用BootStrap需要在页面上引用BootStrap的支持。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uQ4o4Irm-1667629972298)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/143f6cf17a3b4819b7ff153bc6fc796a~tplv-k3u1fbpfcp-watermark.image?)]

知识点

​ bootstrap简介,控制大小,控制颜色,12栅格排版.bootstrap常用表单样式、表格样式

BootStrap栅格layout

​ BootStrap将网页均分为12分（12个格子），响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VE0tagJn-1667629972298)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d6b60676171a43dbb983c685c48e8fec~tplv-k3u1fbpfcp-watermark.image?)]

使用栅格系统注意点
1 行必须放置在.container(固定宽度）或 .container-fluid （100% 宽度）中，以便获得适当的对齐alignment和内边距padding
2 使用行来创建列的水平组
3 内容应该放置在列内，唯有列可以是行的直接子元素
4 预定义的网格类，比如.row和.col-xs-x，可用于快速创建网格布局。
5 列通过内边距(padding)来创建列内容之间的间隙

col-lg-*   large  大型设备（大台式电脑，1200px 起） 
col-md-*   middle  中型设备（台式电脑，992px 起）
col-sm-*   small   小型设备（平板电脑，768px 起）
col-xs-*   x-small  超小设备（手机，小于 768px）
栅格样式描述
col-lg-*large 大型设备（大台式电脑，1200px 起
col-md-*middle 中型设备（台式电脑，992px 起）
col-sm-*small 小型设备（平板电脑，768px 起）
col-xs-*x-small 超小设备（手机，小于 768px）

BootStrap常用样式与标签

常用样式
样式描述
.container让元素在容器中水平居中
.col-md-4占几个栅格
.col-md-ofset-4左边空出几个栅格
.col-md-push-8向右浮动几个栅格
col-md-pull-2向左浮动几个栅格
参考代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
        <script src="js/jquery-3.5.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <style type="text/css">
		    .row div{
		        background-color: aqua;
		        border: 1px solid black;
		    }
		</style>
    </head>
<body>
    <div class="container">
        <!-- 行元素 -->
        <div class="row">
            <div class="col-md-4">4</div>
            <div class="col-md-4">4</div>
            <div class="col-md-4">4</div>
        </div>
        <!-- 行元素 -->
        <div class="row">
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
        </div>
        <!-- 行元素 -->
        <div class="row">
            <div class="col-md-6">6</div>
            <div class="col-md-6">6</div>
        </div>
        <!-- 行元素 -->
        <div class="row">
            <div class="col-md-3">3</div>
            <div class="col-md-4">4</div>
            <div class="col-md-5">5</div>
        </div>
        <!-- 网格偏移：右侧兄弟元素会被向右推移，但不会被覆盖-->
        <div class="row">
            <!-- 将该元素位置向右偏移2个位置，总占据3个格栅-->
            <div class="col-md-1 col-md-offset-2">1</div>
            <!-- 将该元素位置向右偏移3个位置，总占据4个格栅-->
            <div class="col-md-1 col-md-offset-3">1</div>
            <!-- 将该元素位置向右偏移3个位置，总占据5个格栅-->
            <div class="col-md-1 col-md-offset-4">1</div>
        </div>

        <!-- 网格排序：右侧兄弟元素不会被推移，可能会被兄弟元素覆盖-->
        <div class="row">
            <!-- 将该元素位置向右偏移3个位置，只占据1个位置，可能会被兄弟元素覆盖-->
            <!-- push：向右浮动，pull：向左浮动-->
            <div class="col-md-1 col-md-push-3" style="background-color: red;">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
        </div>

        <!-- 列嵌套-->
        <div class="row">
            <div class="col-md-2" style="background-color: red;">2</div>
		    <div class="col-md-4" style="background-color: blue;">4</div>
		    <div class="col-md-6" style="border: 0;">
                <div class="row" style="border: 0;">
                    <!-- 被嵌套的行又会再分出12个格栅-->
                    <div class="col-md-4" style="background-color: yellow;">子4</div>
                    <div class="col-md-4" style="background-color: yellow;">子4</div>
                    <div class="col-md-4" style="background-color: yellow;">子4</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

样式：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-do9w71DY-1667629972299)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/04551ead9abd4cba993c458c8b5e85e6~tplv-k3u1fbpfcp-watermark.image?)]

BootStrap常用组件

按钮组件
语法:
  <input type=button class="btn" value="我是按钮">
提示：
   btn是所有按钮的基本样式

class参数说明：
   第一个参数：btn为按钮的基本样式
   第二个参数为按钮的颜色样式
     语境⾊彩：
        btn-default 默认-⽩⾊
        btn-success 绿⾊
        btn-danger 红色
         ..
  第三个参数为按钮的大小
  
按钮还有一种默认为整行的效果，称为块级按钮 btn-block 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
        <script src="js/jquery-3.5.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
<body>
    <div class="container">
        <!-- 按钮样式-->
        <button class="btn">无样式按钮</button>
        <button class="btn btn-default">默认样式按钮</button>
        <button class="btn btn-info">info按钮</button>
        <button class="btn btn-warning">warn按钮</button>
        <button class="btn btn-danger">danger按钮</button>
        <button class="btn btn-primary">标准按钮</button>
        <button class="btn btn-link">link按钮</button>
    </div>
</body>
</html>

样式：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oGm1WlLq-1667629972299)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f2843183174e441fa87f9df053fe3c64~tplv-k3u1fbpfcp-watermark.image?)]

面板组件

​ 面板组件.panel提供基本的边界和内部，来包含内容

a、基本面板
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
        <script src="js/jquery-3.5.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
<body>
    <div class="container">
        <!--基础面板-->
        <div class="panel panel-default">
            <div class="panel-body">
                这是一个基础面板
            </div>
        </div>
    </div>
</body>
</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BKgACxSp-1667629972300)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f8b2148ecc9843db9f0fb33dae3398d0~tplv-k3u1fbpfcp-watermark.image?)]

b、带标题的面版

用.panel-heading可以简单地加入一个标题容器。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
        <script src="js/jquery-3.5.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
<body>
    <div class="container">		
		<div class="panel panel-default">
			<div class="panel-heading">
				面板标题
			</div>
			<div class="panel-body">
				面板内容
			</div>
		</div>
    </div>
</body>
</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uoFOfYP0-1667629972300)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dae043fbf69c4b8ca11fa42491505f83~tplv-k3u1fbpfcp-watermark.image?)]

导航条

​ 导航条是在您的应用或网站中作为导航标头的响应式元组件。它们在移动设备上可以折叠（并且可开可关），且在可用的视口宽度增加时变为水平展开模式。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
        <script src="js/jquery-3.5.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
<body>
    <div class="container">
        <!--导航条-->
		<div class="navbar navbar-default" role="navigation">
			<!--折叠显示按钮，当横向分辨率不够显示时则显示当前折叠导航-->
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
					<!--折叠按钮上面的3条短线，好看的-->
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<!--默认链接，不会折叠-->
				<a class="navbar-brand" href="#">Brand</a>
			</div>
				
			<!--当分辨率足够显示时，显示当前导航-->
			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">新闻</a></li>
					<li><a href="#">体育</a></li>
				</ul>
			</div>
		</div>
    </div>
</body>
</html>

未折叠情况（当分辨率足够显示时）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-waSrkTkB-1667629972301)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/405335d48f3349d7961880471db68602~tplv-k3u1fbpfcp-watermark.image?)]

折叠情况（当横向分辨率不够显示时则显示）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sKVw20eF-1667629972301)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cfb61eb344054f5db36bd6669f2d3c0a~tplv-k3u1fbpfcp-watermark.image?)]

标签式导航
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
        <script src="js/jquery-3.5.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
<body>
    <div class="container">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#">主页</a></li>
            <li><a href="#">科技</a></li>
            <li><a href="#">美食</a></li>
        </ul>
    </div>
</body>
</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kyyNJIj6-1667629972301)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8cee061730634da5ba4944f3b0eac41d~tplv-k3u1fbpfcp-watermark.image?)]

胶囊式
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
        <script src="js/jquery-3.5.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
<body>
    <div class="container">
        <ul class="nav nav-pills">
            <li class="active"><a href="#">主页</a></li>
            <li><a href="#">科技</a></li>
            <li><a href="#">美食</a></li>
        </ul>
    </div>
</body>
</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PUA1MLoH-1667629972302)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4331688e5c4f471eb4db8929254e1219~tplv-k3u1fbpfcp-watermark.image?)]

面包屑式导航
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
        <script src="js/jquery-3.5.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
<body>
    <div class="container">
        <ul class="breadcrumb">
            <li class="active"><a href="#">主页</a></li>
            <li><a href="#">科技</a></li>
            <li><a href="#">美食</a></li>
        </ul>
    </div>
</body>
</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EeIdJQ4G-1667629972302)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/24babbae411b4907815d99d128a624e1~tplv-k3u1fbpfcp-watermark.image?)]

分页式导航
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
        <script src="js/jquery-3.5.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
<body>
    <div class="container">
        <ul class="pagination">
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
        </ul>
    </div>
</body>
</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SSKiFzIw-1667629972303)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e49b592b305643578ba924867b2489a1~tplv-k3u1fbpfcp-watermark.image?)]

翻页式导航
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
        <script src="js/jquery-3.5.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
<body>
    <div class="container">
        <ul class="pager">
            <li><a href="#">上一页</a></li>
            <li><a href="#">下一页</a></li>
        </ul>
    </div>
</body>
</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FN0h9409-1667629972303)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c03853a210a94962b1e208b224589af1~tplv-k3u1fbpfcp-watermark.image?)]

表单

​ 将表单放置于.navbar-form之内可以呈现很好的垂直对齐，并在较窄的viewport中呈现折叠状态。使用对齐选项可以确定其在导航条上出现的位置。

分类：
垂直表单 vertical（默认） class="form-vertical"
内联 [所有的表单元素显示在⼀⾏内] inline class="form-inline"
⽔平表单 horizontal [分两列，标签，元素] class="form-horizontal"
 |-label与input元素放在⼀个div class为form-group以及control-label
 |-表单元素放在<div class="col-md-x">内部，并在表单元素指定 class为form-control
image-20220913081142932 image-20220913081201634 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单の表单控件、文本框、文本域、下拉框</title>
    <!-- 导入boostrap的css样式 -->
    <link type="text/css" rel="stylesheet" href="./bootstrap/css/bootstrap.min.css"/>
</head>
<body>
    <!-- 
        表单样式：
        1.文本框:
        form-control
        .input-lg  .input-sm:控制表单大小
     -->
    <form>
        <p>
            用户名：<input/>
        </p>
        <p>
            学历：<select>
                <option>大专</option>
                <option>大专</option>
                <option>大专</option>
            </select>
        </p>
        <p>
            用户名：<textarea></textarea>
        </p>
    </form>
    <form>
        <div class="row">
            <div class="col-md-3">
                用户名：<input class="form-control"/>
                用户名：<input class="form-control input-lg"/>
                用户名：<input class="form-control input-sm"/>
            </div>
        </div>
        <p>
            学历：<select class="form-control">
                <option>大专</option>
                <option>大专</option>
                <option>大专</option>
            </select>
        </p>
        <p>
            用户名：<textarea class="form-control"></textarea>
        </p>
    </form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单の单选框、复选框</title>
    <!-- 导入boostrap的css样式 -->
    <link type="text/css" rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
</head>

<body>
    <div class="container">
        <div>
            <div>
                兴趣爱好：
                <div class="checkbox">
                    <input type="checkbox" />爱好1
                </div>
                <div class="checkbox">
                    <input type="checkbox" />爱好1
                </div>
                <div class="checkbox">
                    <input type="checkbox" />爱好1
                </div>
            </div>
        </div>
        <div>
            <div>
                兴趣爱好：
                <label class="checkbox-inline">
                    <input type="checkbox" />爱好1
                </label>
                <label class="checkbox-inline">
                    <input type="checkbox" />爱好1
                </label>
                <label class="checkbox-inline">
                    <input type="checkbox" />爱好1
                </label>
            </div>
        </div>

        <div>
            <div>
                兴趣爱好：
                <div class="radio">
                    <input type="radio" />爱好1
                </div>
                <div class="radio">
                    <input type="radio" />爱好1
                </div>
                <div class="radio">
                    <input type="radio" />爱好1
                </div>
            </div>
        </div>


        <div>
            <div>
                兴趣爱好：
                <label class="radio-inline">
                    <input type="radio" />爱好1
                </label>
                <label class="radio-inline">
                    <input type="radio" />爱好1
                </label>
                <label class="radio-inline">
                    <input type="radio" />爱好1
                </label>
            </div>
        </div>
    </div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单の表单布局</title>
    <!-- 导入boostrap的css样式 -->
    <link type="text/css" rel="stylesheet" href="./bootstrap/css/bootstrap.css" />
</head>

<body>
    <div class="container">
        <!-- 
            表单布局样式：
            .form-horizontal:设置垂直表单
            .form-inline:设置内联表单，水平显示
         -->
        <form class="form-horizontal" action="#" method="post" role="form">
            <div class="form-group">
                <label for="uname" class="control-label col-md-2">用户名</label>
                <div class="col-md-4">
                    <input name="username" id="uname" class="form-control" placeholder="请输入用户名" />
                </div>
            </div>
            <div class="form-group">
                <label for="upwd" class="control-label col-md-2">密码</label>
                <div class="col-md-4">
                    <input name="userpwd" type="password" id="upwd" class="form-control" />
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-2">性别</label>
                <div class="col-md-4">
                    <label class="radio-inline">
                        <input name="sex" type="radio" class="radio" />男
                    </label>
                    <label class="radio-inline">
                        <input name="sex" type="radio" class="radio" />女
                    </label>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-2">兴趣爱好</label>
                <div class="col-md-4 checkbox-inline">
                    <label class="checkbox-inline">
                        <input name="hobby" type="checkbox" class="checkbox" />琴
                    </label>
                    <label class="checkbox-inline">
                        <input name="hobby" type="checkbox" class="checkbox" />棋
                    </label>
                    <label class="checkbox-inline">
                        <input name="hobby" type="checkbox" class="checkbox" />书
                    </label>
                    <label class="checkbox-inline">
                        <input name="hobby" type="checkbox" class="checkbox" />画
                    </label>

                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-2">所在地</label>
                <div class="col-md-4">
                    <select class="form-control">
                        <option>湖北</option>
                        <option>湖南</option>
                        <option>河北</option>
                        <option>河南</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-4 col-md-offset-3">
                    <button class="btn btn-danger">保存</button>
                </div>
            </div>
        </form>
        <form class="form-inline" action="#" method="post" role="form">
            <div class="form-group">
                <label for="uname" class="control-label col-md-4">用户名</label>
                <div class="col-md-6">
                    <input name="username" id="uname" class="form-control input-group-lg" placeholder="请输入用户名" />
                </div>
            </div>
            <div class="form-group">
                <label for="upwd" class="control-label col-md-3">密码</label>
                <div class="col-md-6">
                    <input name="userpwd" type="password" id="upwd" class="form-control input-group-sm" />
                </div>
            </div>
        </form>
    </div>
</body>

</html>

如果你没有为输入框添加label标签，屏幕阅读器将会遇到问题。对于导航条内的表单，可以通过.sr-only class隐藏label标签。

贯穿案例，bootstrap改进以下页面：

1.物业登录界面

2.业主登录界面

3.楼栋浏览界面

4.房间浏览界面(点击某楼栋进入房间列表)

5.新增 : 业主/家庭成员浏览界面.

课程小结

知识框架图

​ 现场提问，用XMind现场总结，再次加深学生印象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sVgGzQkC-1667629972304)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/375ab4cdaa4249949128dc81ea83a78f~tplv-k3u1fbpfcp-watermark.image?)]

课后作业

需求定义

使用BootStrap重制登陆和注册页面

需求分解

参考上一篇

原型设计

参考上一篇

参考文献

十八岁清纯男大学生
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
BootStrap入门案例.zip
10-11
这个“BootStrap入门案例.zip”压缩包包含了多个文件，它们提供了关于使用Bootstrap学习的基础教程和实例。 首先，让我们逐一了解这些文件： 1. **01_BootStrap_HelloWorld.html** - 这个文件很可能是Bootstrap的...
bootstrap实现单选，多选，问卷调查
啊猿的博客
05-30 626
1、单选 <div class="radio disabled" id = "onequestion"> <p>1、你的爱好是什么？</p> <label class="checkbox-inline"> <input type="radio" name="one" value="A"> A、唱 </label> <label class="checkbox-inline"> <input type
Bootstrap 上传文件或者图片的使用，亲测有效
Little_Code的博客
01-13 8553
多文件上传
BootStrap FileInput 文件上传组件使用指南
最新发布
2401_83817171的博客
03-23 1050
showCaption | Boolean | 是否显示被选文件的简介 | true || minImageHeight | String | 图片的最小高度 | null || showPreview | Boolean | 是否显示预览区域 | true || minImageWidth | String | 图片的最小宽度 | null || showCancel | Boolean | 是否显示取消按钮 | true |
springboot+mybatispuls+bootstrap实现图片上传
2202_75372051的博客
05-09 494
【代码】springboot+mybatispuls+bootstrap实现图片上传。
bootstrap 背景
亿辰空间
03-17 1559
#div-parent {  position:relative; } #div-child-right {  position:absolute;  top:0;  right:0;  width:200px; } #div-child-left {  position:absolute;  top:0;  left:0;  width:200px; } .
BootStrap入门教程
07-22
资源名称：BootStrap入门教程资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
bootstrap入门
08-09
bootstrap入门.md 适合零基础初学者，讲解详细，易于理解
BOOTSTRAP入门经典
05-17
热门Web开发 Javascript框架 HTML CSS网站建设 网页设计制作 零基础读者杰出Bootstrap教程 全面涵盖常见组件的使用方法 书中代码真实有效可运行
bootstrap入门教程
04-16
### Bootstrap入门教程知识点详解 #### 一、Bootstrap简介 Bootstrap是一款非常受欢迎的前端框架，它由Twitter的一群工程师为了提高内部产品的分析与管理能力而创建。最初的目标是为Twitter的产品开发一套易于使用...
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
12-10
整合前的准备步骤 1.搭建好基础框架，本文用的是SSM(Spring+SpringMVC+Mybatis)，这里的过程就不在本文中讲了，之前我做个一个demo(ssm整合+用户模块)，可以参考这个搭建好。 2.下载bootstrap fileinput组件源码： https://github.com/kartik-v/bootstrap-fileinput/ 搭建后的效果图 图1. 图2. 图3. 图4. 图5. 在需要编写的jsp页面引入组件 本工程的路径界面如下： 在jsp引入组件需要的js,css，如下代码: <!-- jq --> <script type="text/j
BootstrapFileInput 图片上传插件 详解
12-23
插件描述：支持上传文件预览，ajax同步或异步上传，拖曳文件上传等炫酷的功能. 参考示例：http://www.jq22.com/jquery-info5231
Bootstrap图片上传源码
10-19
Bootstrap图片上传拖拽排序代码，Bootstrap图片上传拖拽排序代码基于Bootstrap4.1.0制作，有图片上传，添加删除列，鼠标拖拽排序等功能。
bootstrap图片上传和预览
10-27
bootstrap图片上传和预览
bootstrap 图片上传
03-16
图片上传
bootstrap 图片上传入门
qq_38688799的博客
04-16 1万+
Bootstrap 图片上传入门 导入图片上传 css js **下载地址 ：**https://github.com/kartik-v/bootstrap-fileinput 这里我们先放一个 图片控件 再放一个点击修改头像Button <img style="width:100px;height:100px" id="imgEmdImg" class="img-circle"&g...
BootStrap笔记-文本颜色&链接颜色&背景颜色
IT1995的博客
01-17 2352
代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CN_TEST1</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- bootstra
BootStrap
JOHN
06-27 127
可以根据浏览器设备不同而自动改变图片，文字布局，不会造成横向溢出，进而改善用户体验。（1）不能固定元素宽度，必需使用流式布局(默认文档流+浮动)+弹性布局（2）文字和图片大小随容器大小变化（3）使用媒体查询技术获取设备类型及相关参数，例如判断设备是否为显示屏，以及查询显示屏大小。..................
Bootstrap File Input，最好用的文件上传组件
热门推荐
沉默王二
01-29 24万+
本篇介绍如何使用bootstrap fileinput.js（最好用的文件上传组件）来进行图片的展示，上传，包括springMVC后端文件保存。
BootStrap入门：打造响应式前端布局
"BootStrap入门教程.pdf" Bootstrap是一款由Twitter的工程师Mark Otto和Jacob Thornton设计和构建的前端框架，旨在提供一套易用、优雅、灵活和可扩展的工具，以提升产品的分析和管理效率。在GitHub开源后，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值