BootStrap个人笔记

最新推荐文章于 2023-03-29 10:27:26 发布

原创最新推荐文章于 2023-03-29 10:27:26 发布 · 712 阅读

1 ·

CC 4.0 BY-SA版权

Bootstrap 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了BootStrap中form-control类如何美化表单控件，包括宽度、边框、圆角等效果，并讨论了control-label的作用，以及在登录界面的应用。同时，文章还提到了使用BootStrap实现轮播图的基本方法，引用了相关教程链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

①form-control作用：

美化了一下，宽度占据整个屏幕，具体描述如下：

表单控件加上类form-control后，效果为：

宽度为100%
设置边框为浅灰色
控件具有4px的圆角
设置阴影效果，元素得到焦点时，阴影和边框效果会发生变化
设置placeholder的颜色为#999
所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

②control-label 作用：

control-label的文本采用右对齐方式，在右边有输入框的情况下. label的文字向右靠，其他的作用暂时没发现

form-group的作用就是使元素之间有间距，具体是设置了margin-bottom属性，一般form的子元素一定要加上

此外，附上简单的登录界面：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<script type="text/javascript" src="plugin/jquery-3.1.1.min.js" ></script>
	<link rel="stylesheet" href="plugin/css/bootstrap.min.css" />

	</head>
	<body>
		
		<div style="margin-top: 150px;">
			<form class="form-horizontal" role ="form" >
				<div class="form-group">
					<label class="col-md-4 control-label">用户名</label>
					<div class="col-md-4">
						<input type="text" class="form-control" placeholder="输入用户名"/>
					</div>
				</div>
				<div class="form-group">
					<label class="col-md-4 control-label">密码</label>
					<div class="col-md-4">
						<input type="password" class="form-control" placeholder="输入密码"/>
					</div>
				</div>
				<div class="form-group">
					<div class="col-md-offset-4 col-md-8">
					<label>
						<input type="checkbox" />记住密码
					</label>
					</div>
				</div>
				<div class="form-group">
					<div class="col-md-offset-4 col-md-8">
						<button type="submit" class="btn btn-info">登录</button>
					</div>
				</div>
			</form>
		</div>		
	</body>
</html>

③Bootstrap实现轮播图：

借鉴了别人的博客，实际上很简单

https://blog.youkuaiyun.com/coderbruis/article/details/78280164

<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div id="carouselMenu" class="carousel slide">
                <ol class="carousel-indicators">
                    <li data-target="#carouselMenu" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselMenu" data-slide-to="1" ></li>
                    <li data-target="#carouselMenu" data-slide-to="2" ></li>
                    <li data-target="#carouselMenu" data-slide-to="3" ></li>
                    <li data-target="#carouselMenu" data-slide-to="4" ></li>
                    <li data-target="#carouselMenu" data-slide-to="5" ></li>
                    <li data-target="#carouselMenu" data-slide-to="6" ></li>
                    <li data-target="#carouselMenu" data-slide-to="7" ></li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active"><img src="jdimage/1.jpg" alt=""/></div>
                    <div class="item"><img src="jdimage/2.jpg" alt=""/></div>
                    <div class="item"><img src="jdimage/3.jpg" alt=""/></div>
                    <div class="item"><img src="jdimage/4.jpg" alt=""/></div>
                    <div class="item"><img src="jdimage/5.jpg" alt=""/></div>
                    <div class="item"><img src="jdimage/6.jpg" alt=""/></div>
                    <div class="item"><img src="jdimage/7.jpg" alt=""/></div>
                    <div class="item"><img src="jdimage/8.jpg" alt=""/></div>
                </div>
                <a class="carousel-control left" href="#carouselMenu" data-slide="prev">‹</a>
                <a class="carousel-control right" href="#carouselMenu" data-slide="next">›</a>
            </div>
        </div>
    </div>
</div>

JS部分

<script type="text/javascript">
    $(function(){
        /*
        * interval为每个轮播项之间的切换时间
        * wrap定义是否循环轮播
        *
        * */
        $("#carouselMenu").carousel({
            interval: 5000,
            wrap: true
        });
    })
</script>