Bootstrap基础

King_FLYz

已于 2023-03-30 09:23:31 修改

阅读量1.3k

点赞数 1

于 2021-12-16 19:16:45 首次发布

本文链接：https://blog.csdn.net/hm342133194/article/details/121981804

版权


我会记录一下学习bootstrap时经常会使用的一些东西在这里面

什么是bootstrap？

前端框架，优点是简洁且灵活，基于HTML、CSS和JavaScript

如何引入bootstrap？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<!-- href属性内的代码是bootstrap的地址 -->

引入了bootstrap后就可以使用bootstrap内的一些css样式，如果不喜欢其中样式的属性可以自定义新的样式（自定义的样式放在插入bootstrap下面进行覆盖）

栅格系统

<div>
    <h1>使用栅格系统</h1>
    <!-- column sm小尺寸 -->
    <div class="col-sm-2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem.
    </div>
    <div class="col-sm-2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem.
    </div>
    <div class="col-sm-2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem.
    </div>
    <div class="col-sm-2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem.
    </div>
</div>

<head>
    <style type="text/css">
        .kyzr{
            float: left;
            width: 25%;
        }
    </style>
    <title></title>
</head>
<body>
    <div id="">
        <h1>不使用栅格系统</h1>
        <div class="kyzr">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem.
        </div>
        <div class="kyzr">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem.
        </div>
        <div class="kyzr">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem.
        </div>
        <div class="kyzr">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem.
        </div>
    </div>
</body>

表单

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <style type="text/css">
            .container-small{
                max-width: 500px;   
            }
        </style>
        <title></title>
    </head>
    <body>
        <form action="" class="container container-small" method="">
            <h1>注册</h1>
            <div class="form-inline form-group">
                <div class="form-group">
                    <label>姓</label>
                    <input type="text" class="form-control" />
                </div>
                <div class="form-group">
                    <label>名</label>
                    <input type="text" class="form-control" />
                </div>
            </div>
            <div class="form-group">
                <label>充值金额</label>
                <div class="input-group">
                    <!-- 在input输入框内部最左侧添加一个提示字体 -->
                    <div class="input-group-addon">￥</div>
                    <input type="text" class="form-control" />                  
                </div>
            </div>
            <div class="form-group">
                <label>来自</label>
                <select class="form-control">
                    <option value ="1">导哥村</option>
                    <option value ="1">强子村</option>
                </div>
            </div>
        </form>
    </body>
</html>

按钮

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <style type="text/css">
            
        </style>
        <title></title>
    </head>
    <body>
        <div class="well">
            <p>
                <button class="btn btn-default">戳我一下</button>
                <button class="btn btn-primary">戳我一下</button>
                <button class="btn btn-danger">戳我一下</button>
                <button class="btn btn-warning">戳我一下</button>
                <button class="btn btn-info">戳我一下</button>
                <a href="" class="btn btn-danger">连接测试</a>
                <input type="submit" class="btn btn-danger" value="input测试" />
            </p>
            <p>
                <button class="btn btn-primary btn-lg">戳我一下</button>
                <button class="btn btn-primary">戳我一下</button>
                <button class="btn btn-primary btn-sm">戳我一下</button>
                <button class="btn btn-primary btn-xs">戳我一下</button>
            </p>
            <p>
                <button class="btn btn-default btn-block">戳我一下</button>
            </p>
        </div>
    </body>
</html>

按钮组

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    </head>
    <body>
        <div class="well">
            <!-- 分组放置按钮 无间距 -->
            <div class="btn-toolbar">
                <div class="btn-group">
                    <button class="btn btn-default">戳我一下</button>
                    <button class="btn btn-primary">戳我一下</button>
                    <button class="btn btn-danger">戳我一下</button>
                </div>
                <div class="btn-group">
                    <button class="btn btn-default">戳我一下</button>
                    <button class="btn btn-primary">戳我一下</button>
                    <button class="btn btn-danger">戳我一下</button>
                </div>
            </div>
        </div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    </head>
    <style type="text/css">
        body{
            max-width: 500px;
            margin: 0 auto;
        }
    </style>
    <body>
        <ul class="nav nav-tabs">
            <li class="active"><a href="">登录</a></li>
            <li><a href="">注册</a></li>
            <li><a href="">忘记密码</a></li>
        </ul>
        <br>
        <ul class="nav nav-pills">
            <li><a href="">登录</a></li>
            <li><a href="">注册</a></li>
            <li><a href="">忘记密码</a></li>
        </ul>
    </body>
</html>

导航栏

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    </head>
    <style type="text/css">
        
    </style>
    <body>
        <div class="navbar navbar-default">
            <div class="navbar-header">
                <a class="navbar-brand" href="">
                    心理咨询系统
                </a>
            </div>
            <form action="" class="navbar-form navbar-left" method="">
                <div class="form-group">
                    <input type="text" class="form-control" name="" id="" value="" />
                    <input type="submit" class="btn btn-default" name="" id="" value="搜索" />
                </div>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="">登录</a></li>
                <li><a href="">注册</a></li>
                <li><a href="">联系我们</a></li>
            </ul>
        </div>
    </body>
</html>

面板

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    </head>
    <style type="text/css">
        
    </style>
    <body>
        <div class="panel panel-default">
            <div class="panel-heading">
                用户统计
            </div>
            <div class="panel-body">
                这是统计栏里面的信息
            </div>
        </div>
    </body>
</html>

表格

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
	</head>
	<style type="text/css">
		
	</style>
	<body>
		<table class="table table-hover">
			<thead>
				<tr>
					<th>用户名</th>
					<th>密码</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>hm342133194</td>
					<td>wangjunbo</td>
				</tr>
				<tr>
					<td>a342133194</td>
					<td>wangjunbo</td>
				</tr>
				<tr>
					<td>z342133194</td>
					<td>wangjunbo</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

其他组件

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
	</head>
	<style type="text/css">
		
	</style>
	<body>
		<ul class="pagination">
			<li><a href="">上一页</a></li>
			<li class="active"><a href="">1</a></li>
			<li><a href="">2</a></li>
			<li><a href="">3</a></li>
			<li><a href="">下一页</a></li>
		</ul>
		
		<ul class="pager">
			<li><a href="">上一页</a></li>
			<li class="disabled"><a href="">下一页</a></li>
		</ul>
		
		<div class="breadcrumb">
			<li><a href="">首页</a></li>
			<li><a href="">文章列表</a></li>
			<li class="active">你好，世界！</li>
		</div>
		
		<div class="alert alert-danger">警告</div>
	</body>
</html>

King_FLYz

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap基础

目录什么是bootstrap？如何引入bootstrap？栅格系统表单按钮按钮组导航导航栏面板表格其他组件我会记录一下学习bootstrap时经常会使用的一些东西在这里面什么是bootstrap？前端框架，优点是简洁且灵活，基于HTML、CSS和JavaScript如何引入bootstrap？<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/
复制链接

扫一扫