bootstrap3 -入门简学

2024-03-12 22:20
文章标签 入门 简学 bootstrap3

本文主要是介绍bootstrap3 -入门简学，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.前期准备工作
1.1 https://www.bootcss.com/
在这里插入图片描述
1.2 点击下载
在这里插入图片描述
1.3解压下载好得东西
在这里插入图片描述
在这里插入图片描述
2. 版本介绍

Bootstrap 版本

目前市面上使用的最多的是 3.x.x 版本。各个版本的介绍：

2.3.2版本：

  • 2013年之后，停止维护；

  • 支持更广泛的浏览器

  • 代码不够简洁， 功能不够多。

3.x.x 版本：

  • 目前最新的稳定版本。

  • 不支持 IE7 和早期的 Firefox

  • 支持 IE8，单效果不好。

2015年8月发布 4.0.0-alpha 的内部测试版。

版本号的普及：

  • alpha 版：内部测试版。α 是希腊字母的第一个，表示最早的版本，bug很多。主要是给开发和测试人员找 bug 用的。

  • beta 版：公开测试版。 主要是给“部落”用户和忠实用户测试用的。bug依然很多，但比 Alpha 版要稳定。这个阶段的版本还会不断增加新功能，如果你是发烧友，可以下载这个版本。

  • rc 版：候选版本（Release Candidate）。该版本不再增加新的功能。类似于最终发行版之前的预览版（发行的候选版本）。此版本的发布，预示着最终发行版即将到来。作为普通用户，如果很着急，也可以下载 rc 版。

  • stable 版：稳定版。在开源软件中，都有 stable版本，这个是开源软件的最终发行版，用户可以放心大胆地使用。

  1. 本地入门
    4.1 在huider中创建一个空项目
    4.2 创建一个文件夹css
    4.3 拷贝刚下载解压文件夹中得css里得bootstrap.min.css到项目中
    在这里插入图片描述

4.4 在1-入门.html中引入如上得css样式

<!doctype html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>01入门</title><link rel="stylesheet" href="css/bootstrap.min.css" ></head><body></body>
</html>

4.5 此时在body中引入需要得 ，例如按钮 ，参考： https://v3.bootcss.com/css/#buttons

     <a href="#" class="btn btn-default">a标签</a><button class="btn btn-danger"> button按钮</button>

在这里插入图片描述

4.4 样式container得使用

<div class="container" style="background-color: red;"> 居中</div>
<div class="container-fluid" style="background-color: aqua;">平铺</div>

在这里插入图片描述

4.5 响应式布局
根据你屏幕得大小，自动调整页面上得展示效果

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.mine{height: 100px;background-color: red;}/* 这里注意顺序问题 *//* 屏幕小于900执行如下 */@media (max-width:900px){.mine{background-color: green;}}/* 屏幕小于700执行如下 */@media (max-width:700px){.mine{background-color: pink;}}</style></head><body><div class="mine"></div></body>
</html>

看到得效果就是：
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
4.6 栅格
帮助我们布局页面，一行等分12份

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="css/bootstrap.min.css"/></head><body><!-- clearfix 完成父div得填充 --><div class="clearfix"><div class="col-lg-8">左边</div><div class="col-lg-4">右边</div></div><div class="clearfix"><div class="col-md-8">左边m</div><div class="col-md-4">右边m</div></div><div class="clearfix"><div class="col-sm-8">左边s</div><div class="col-sm-4">右边s</div></div><div class="clearfix"><div class="col-xs-8">左边x</div><div class="col-xs-4">右边x</div></div></body>
</html>

在这里插入图片描述
在这里插入图片描述
可以常用md 或者xs

栅格案例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="css/bootstrap.min.css"/></head><body><div style="width: 300px;"><div class="clearfix"><div class="col-lg-3">用户名</div><div class="col-lg-9"><input type="text"/></div></div><div class="clearfix"><div class="col-lg-3">密码</div><div class="col-lg-9"><input type="password"/></div></div><div class="clearfix"><!-- col-xs-offset-3前面空3列，当前行占据9列 --><div class="col-xs-offset-3 col-lg-9"><input type="submit" value="登录"/></div></div></div></body>
</html>

在这里插入图片描述
这里也可以参考官网给定得表单案例学习一下： https://v3.bootcss.com/css/#forms
关于按钮相关得一些样式、尺寸、大小、状态等操作可以参考官网：https://v3.bootcss.com/css/#buttons

如下图是根据https://v3.bootcss.com/css/#forms 里得表单：居中展示（可以自己写样式，也可以考虑使用container）:
在这里插入图片描述
修改为如下：
在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link  rel="stylesheet" href="css/bootstrap.min.css"/></head><body><div class="container" style="min-height: 100px; width: 450px;margin:100px auto 0 auto;border: solid; 1px;padding-bottom: 25px;"><h3 style="text-align: center;">用户登录</h3><form><div class="form-group"><label for="username">用户名</label><input type="text" class="form-control" id="username" placeholder="用户名"></div><div class="form-group"><label for="userpwd">用户密码</label><input type="password" class="form-control" id="usrpwd" placeholder="用户密码"></div><div class="form-group"><label for="code">验证码</label><input type="text" class="form-control" id="code" placeholder="验证码"></div><div class="checkbox"><label><input type="checkbox"> Check me out</label></div><button type="submit" class="btn btn-success">登录</button></form></div></body>
</html>

再修改验证码那边增加一个图片：
在这里插入图片描述
这样改会变小，但是又间距，这里需要将clearfix 换位row
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
上如中若想让发送消息与上面得列对其，可以增加一个样式
在这里插入图片描述
若想让发送消息按钮变为禁用状态，则可以增加：disabled=“disabled”
在这里插入图片描述
想添加一个下拉列表： 参考https://v3.bootcss.com/css/#forms-horizontal，做修改
在这里插入图片描述
完整案例如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link  rel="stylesheet" href="css/bootstrap.min.css"/></head><body><div class="container" style="min-height: 100px; width: 450px;margin:100px auto 0 auto;border: solid; 1px;padding-bottom: 25px;"><h3 style="text-align: center;">用户登录</h3><form><div class="form-group"><label for="username">用户名</label><input type="text" class="form-control" id="username" placeholder="用户名"></div><div class="form-group"><label for="userpwd">用户密码</label><input type="password" class="form-control" id="usrpwd" placeholder="用户密码"></div><div class="form-group"><label for="code">验证码</label><div class="row"><div class="col-xs-5"><input type="text" class="form-control" id="code" placeholder="验证码"></div><div class="col-xs-7"><img  src="img/code.png"/></div></div></div><div class="form-group"><label for="code">验证手机号</label><div class="row"><div class="col-xs-7"><input type="text" class="form-control" id="code" placeholder="填写验证码"></div><div class="col-xs-5"><button class="btn btn-primary btn-block" disabled="disabled">发送消息</button></div></div></div><div class="form-group"><label for="role">角色选择</label><select id="role" class="form-control"><option>普通用户</option><option>管理员</option></select></div><div class="checkbox"><label><input type="checkbox"> Check me out</label></div><button type="submit" class="btn btn-success">登录</button></form></div></body>
</html>

4.7 导航条， 参考;https://v3.bootcss.com/components/#navbar
在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link  rel="stylesheet" href="css/bootstrap.min.css"/></head><body><nav class="navbar navbar-default"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">Brand</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li><li role="separator" class="divider"></li><li><a href="#">One more separated link</a></li></ul></li></ul><form class="navbar-form navbar-left"><div class="form-group"><input type="text" class="form-control" placeholder="Search"></div><button type="submit" class="btn btn-default">Submit</button></form><ul class="nav navbar-nav navbar-right"><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --></nav></body>
</html>

就会有如下效果：
在这里插入图片描述
但是此刻没有下拉得效果，需要下载jquery.js, 需要将之前下载得bootstrap里得js也拷贝到项目中bootstrap.min.js
在这里插入图片描述

可以修改如下效果：
在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link  rel="stylesheet" href="css/bootstrap.min.css"/></head><body><nav class="navbar navbar-default"><div class="container">  <!-- 平铺，若想居中直接container--><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">宁宁学习</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><!-- active 选中哪个--><li class="active"><a href="#">知识点1 <span class="sr-only">(current)</span></a></li><li><a href="#">知识点2</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">知识点3 <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">点点</a></li><li><a href="#">豆豆</a></li><li><a href="#">莉莉</a></li><li role="separator" class="divider"></li><li><a href="#">肉肉</a></li><li role="separator" class="divider"></li><li><a href="#">踩踩</a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li><a href="#">登录</a></li><li><a href="#">注册</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --></nav></body><script src="js/jquery-3.3.1.min.js"></script><script src="js/bootstrap.min.js"></script></html>

若想固定在顶部，则需要修改这样：

<nav class="navbar navbar-default navbar-fixed-top">

4.8 表格
参考：https://v3.bootcss.com/css/#tables
在这里插入图片描述
修改为如下图：

在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link  rel="stylesheet" href="css/bootstrap.min.css"/></head><body><div class="container"><table class="table"><caption>Optional table caption.</caption><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>操作</th></tr></thead><tbody><tr><th scope="row">1</th><td><a href="http://www.baidu.com">名字1</a></td><td>Otto</td><td><a class="btn btn-success btn-xs" href="http://www.baidu.com">编辑</a><a class="btn btn-danger btn-xs" href="http://www.baidu.com">删除</a></td></tr><tr><th scope="row">2</th><td><a href="http://www.baidu.com">名字2</a></td><td>Thornton</td><td><a class="btn btn-success btn-xs" href="http://www.baidu.com">编辑</a><a class="btn btn-danger btn-xs" href="http://www.baidu.com">删除</a></td></tr><tr><th scope="row">3</th><td><a href="http://www.baidu.com">名字3</a></td><td>the Bird</td><td><a class="btn btn-success btn-xs" href="http://www.baidu.com">编辑</a><a class="btn btn-danger btn-xs" href="http://www.baidu.com">删除</a></td></tr></tbody></table></div></body>
</html>

若想把文字改为图片：
在这里插入图片描述
想要哪个图标复制上面得内容
在这里插入图片描述
若出现图标未正确显示，则需要如下操作：

  1. 将bootstrap 下载好中font 复制到项目中
    在这里插入图片描述
    在这里插入图片描述

然后项目就好了
在这里插入图片描述
按钮相关操作及表单得添加，效果如下图：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link  rel="stylesheet" href="css/bootstrap.min.css"/></head><body><div class="container"><div style="margin: 10px 0;"><a class="btn btn-success">新建</a><a class="btn btn-info">导入</a><a class="btn btn-danger">导出</a><div class="btn-group" role="group"><button type="button" class="btn btn-default">Left</button><button type="button" class="btn btn-default">Middle</button><button type="button" class="btn btn-default">Right</button></div><div style="float: right;"><form class="form-inline"><div class="form-group"><input type="text" class="form-control" placeholder="请输入" ></div>		 <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button></form></div></div><table class="table"><caption>Optional table caption.</caption><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>操作</th></tr></thead><tbody><tr><th scope="row">1</th><td><a href="http://www.baidu.com">名字1</a></td><td>Otto</td><td><a class="btn btn-success btn-xs" href="http://www.baidu.com">编辑</a><a class="btn btn-danger btn-xs" href="http://www.baidu.com">删除</a></td></tr><tr><th scope="row">2</th><td><a href="http://www.baidu.com">名字2</a></td><td>Thornton</td><td><a class="btn btn-success btn-xs" href="http://www.baidu.com">编辑</a><a class="btn btn-danger btn-xs" href="http://www.baidu.com">删除</a></td></tr><tr><th scope="row">3</th><td><a href="http://www.baidu.com">名字3</a></td><td>the Bird</td><td><a class="btn btn-success btn-xs" href="http://www.baidu.com"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></a><a class="btn btn-danger btn-xs" href="http://www.baidu.com"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a></td></tr></tbody></table></div></div></body>
</html>

将如上表格整合到导航页面中，这里需要注意去掉导航条固定，navbar-fixed-top，效果如下：代码自理，记得修改，修改，修改
在这里插入图片描述
如上图你会发现按钮与上面得导航有间距
则需要修改一下：
在这里插入图片描述

4.9 面板
参考：https://v3.bootcss.com/components/#panels
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link  rel="stylesheet" href="css/bootstrap.min.css"/><style>.panel-body .ite{display: block;padding: 5px 0;}</style></head><body><div class="container clearfix"><div class="col-md-8"><div class="panel panel-default"><!-- Default panel contents --><div class="panel-heading">测试数据如下：</div><div class="panel-body"><p>如下皆是测试内容，请您仔细查看：</p></div><!-- Table --><table class="table"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody></table></div></div><div class="col-md-4"><div class="panel panel-success"><div class="panel-heading"><h3 class="panel-title">Panel title</h3></div><div class="panel-body"><a  href="#" class="ite">Panel content</a><a  href="#" class="ite">Panel content2</a></div></div><div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title"><span class="glyphicon glyphicon-certificate" aria-hidden="true" style="color: red;font-size: 30px;"></span>Panel title</h3></div><div class="panel-body"><a  href="#" class="ite">Panel content</a><a  href="#" class="ite">Panel content2</a></div></div></div></div></body>
</html>

4.10 分页
https://v3.bootcss.com/components/#pagination
在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="css/bootstrap.min.css"/></head><body><nav aria-label="Page navigation"><ul class="pagination"><li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></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="#">4</a></li><li><a href="#">5</a></li><li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li></ul></nav></body>
</html>

4.11 综合案例

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link  rel="stylesheet" href="css/bootstrap.min.css"/><style>.panel-body .ite{display: block;padding: 5px 0;}</style></head><body><div class="container clearfix"><div class="col-md-8"><div class="panel panel-default"><!-- Default panel contents --><div class="panel-heading">测试数据如下：</div><div class="panel-body"><p>如下皆是测试内容，请您仔细查看：</p></div><!-- Table --><table class="table"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody></table></div><nav aria-label="Page navigation"><ul class="pagination"><li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;上一页</span></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="#">4</a></li><li><a href="#">5</a></li><li><a href="#" aria-label="Next"><span aria-hidden="true">下一页&raquo;</span></a></li></ul></nav></div><div class="col-md-4"><div class="panel panel-success"><div class="panel-heading"><h3 class="panel-title">Panel title</h3></div><div class="panel-body"><a  href="#" class="ite">Panel content</a><a  href="#" class="ite">Panel content2</a></div></div><div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title"><span class="glyphicon glyphicon-certificate" aria-hidden="true" style="color: red;font-size: 30px;"></span>Panel title</h3></div><div class="panel-body"><a  href="#" class="ite">Panel content</a><a  href="#" class="ite">Panel content2</a></div></div></div></div></body>
</html>

所见间距： f12 --》点击那个间距 --》margin：0px;

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
4.12
在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link  rel="stylesheet" href="css/bootstrap.min.css"/><style>.panel-body .ite{display: block;padding: 5px 0;}</style></head><body><nav class="navbar navbar-default "><div class="container">  <!-- 平铺，若想居中直接container--><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">宁宁学习</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><!-- active 选中哪个--><li class="active"><a href="#">知识点1 <span class="sr-only">(current)</span></a></li><li><a href="#">知识点2</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">知识点3 <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">点点</a></li><li><a href="#">豆豆</a></li><li><a href="#">莉莉</a></li><li role="separator" class="divider"></li><li><a href="#">肉肉</a></li><li role="separator" class="divider"></li><li><a href="#">踩踩</a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li><a href="#">登录</a></li><li><a href="#">注册</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --></nav><div class="container clearfix"><div class="col-md-8"><div class="panel panel-default"><!-- Default panel contents --><div class="panel-heading">测试数据如下：</div><div class="panel-body"><p>如下皆是测试内容，请您仔细查看：</p></div><!-- Table --><table class="table"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody></table></div><nav aria-label="Page navigation"><ul class="pagination" style="margin: 0;"><li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;上一页</span></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="#">4</a></li><li><a href="#">5</a></li><li><a href="#" aria-label="Next"><span aria-hidden="true">下一页&raquo;</span></a></li></ul></nav><div class="media"><div class="media-left"><a href="#"><img class="media-object" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xOGUzMDVhOGU1ZSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4ZTMwNWE4ZTVlIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzUyMTg1ODIxNTMzMiIgeT0iMzYuNTU5OTk5OTQyNzc5NTQiPjY0eDY0PC90ZXh0PjwvZz48L2c+PC9zdmc+" data-holder-rendered="true" style="width: 64px; height: 64px;"></a></div><div class="media-body"><h4 class="media-heading">Media heading</h4>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</div></div><div class="media"><div class="media-left"><a href="#"><img class="media-object" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xOGUzMDVhOGU1ZSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4ZTMwNWE4ZTVlIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzUyMTg1ODIxNTMzMiIgeT0iMzYuNTU5OTk5OTQyNzc5NTQiPjY0eDY0PC90ZXh0PjwvZz48L2c+PC9zdmc+" data-holder-rendered="true" style="width: 64px; height: 64px;"></a></div><div class="media-body"><h4 class="media-heading">Media heading</h4>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</div></div></div><div class="col-md-4"><div class="panel panel-success"><div class="panel-heading"><h3 class="panel-title">Panel title</h3></div><div class="panel-body"><a  href="#" class="ite">Panel content</a><a  href="#" class="ite">Panel content2</a></div></div><div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title"><span class="glyphicon glyphicon-certificate" aria-hidden="true" style="color: red;font-size: 30px;"></span>Panel title</h3></div><div class="panel-body"><a  href="#" class="ite">Panel content</a><a  href="#" class="ite">Panel content2</a></div></div></div></div></body><script src="js/jquery-3.3.1.min.js"></script><script src="js/bootstrap.min.js"></script>
</html>

这篇关于bootstrap3 -入门简学的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/802766。

相关文章

Spring Security 从入门到进阶系列教程

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门（一）：登录与退出》 《Spring-Security-入门（二）：基于数据库验证》 《Spring-Security-入门（三）：密码加密》 《Spring-Security-入门（四）：自定义-Filter》 《Spring-Security-入门（五）：在 Sprin
阅读更多...
数论入门整理（updating）

数论入门整理（updating）

一、gcd lcm 基础中的基础，一般用来处理计算第一步什么的，分数化简之类。 LL gcd(LL a, LL b) { return b ? gcd(b, a % b) : a; } <pre name="code" class="cpp">LL lcm(LL a, LL b){LL c = gcd(a, b);return a / c * b;} 例题：
阅读更多...
Java 创建图形用户界面（GUI）入门指南（Swing库 JFrame 类）概述

Java 创建图形用户界面（GUI）入门指南（Swing库 JFrame 类）概述

概述 基本概念 Java Swing 的架构 Java Swing 是一个为 Java 设计的 GUI 工具包，是 JAVA 基础类的一部分，基于 Java AWT 构建，提供了一系列轻量级、可定制的图形用户界面（GUI）组件。 与 AWT 相比，Swing 提供了许多比 AWT 更好的屏幕显示元素，更加灵活和可定制，具有更好的跨平台性能。 组件和容器 Java Swing 提供了许多
阅读更多...
【IPV6从入门到起飞】5-1 IPV6+Home Assistant(搭建基本环境)

【IPV6从入门到起飞】5-1 IPV6+Home Assistant(搭建基本环境)

【IPV6从入门到起飞】5-1 IPV6+Home Assistant #搭建基本环境 1 背景2 docker下载 hass3 创建容器4 浏览器访问 hass5 手机APP远程访问hass6 更多玩法 1 背景 既然电脑可以IPV6入站，手机流量可以访问IPV6网络的服务，为什么不在电脑搭建Home Assistant（hass），来控制你的设备呢？@智能家居 @万物互联
阅读更多...
poj 2104 and hdu 2665 划分树模板入门题

poj 2104 and hdu 2665 划分树模板入门题

题意： 给一个数组n（1e5）个数，给一个范围（fr， to， k），求这个范围中第k大的数。 解析： 划分树入门。 bing神的模板。 坑爹的地方是把-l 看成了-1........ 一直re。 代码： poj 2104： #include <iostream>#include <cstdio>#include <cstdlib>#include <al
阅读更多...
MySQL-CRUD入门1

MySQL-CRUD入门1

文章目录 认识配置文件client节点mysql节点mysqld节点 数据的添加(Create)添加一行数据添加多行数据两种添加数据的效率对比 数据的查询(Retrieve)全列查询指定列查询查询中带有表达式关于字面量关于as重命名 临时表引入distinct去重order by 排序关于NULL 认识配置文件 在我们的MySQL服务安装好了之后, 会有一个配置文件, 也就
阅读更多...
音视频入门基础：WAV专题（10）——FFmpeg源码中计算WAV音频文件每个packet的pts、dts的实现

音视频入门基础：WAV专题（10）——FFmpeg源码中计算WAV音频文件每个packet的pts、dts的实现

一、引言 从文章《音视频入门基础：WAV专题（6）——通过FFprobe显示WAV音频文件每个数据包的信息》中我们可以知道，通过FFprobe命令可以打印WAV音频文件每个packet（也称为数据包或多媒体包）的信息，这些信息包含该packet的pts、dts： 打印出来的“pts”实际是AVPacket结构体中的成员变量pts，是以AVStream->time_base为单位的显
阅读更多...
C语言指针入门 《C语言非常道》

C语言指针入门 《C语言非常道》

C语言指针入门 《C语言非常道》 作为一个程序员，我接触 C 语言有十年了。有的朋友让我推荐 C 语言的参考书，我不敢乱推荐，尤其是国内作者写的书，往往七拼八凑，漏洞百出。 但是，李忠老师的《C语言非常道》值得一读。对了，李老师有个官网，网址是： 李忠老师官网 最棒的是，有配套的教学视频，可以试看。 试看点这里 接下来言归正传，讲解指针。以下内容很多都参考了李忠老师的《C语言非
阅读更多...
MySQL入门到精通

MySQL入门到精通

一、创建数据库 CREATE DATABASE 数据库名称; 如果数据库存在，则会提示报错。 二、选择数据库 USE 数据库名称; 三、创建数据表 CREATE TABLE 数据表名称; 四、MySQL数据类型 MySQL支持多种类型，大致可以分为三类：数值、日期/时间和字符串类型 4.1 数值类型 数值类型 类型大小用途INT4Bytes整数值FLOAT4By
阅读更多...
【QT】基础入门学习

【QT】基础入门学习

文章目录 浅析Qt应用程序的主函数使用qDebug()函数常用快捷键Qt 编码风格信号槽连接模型实现方案 信号和槽的工作机制Qt对象树机制 浅析Qt应用程序的主函数 #include "mywindow.h"#include <QApplication>// 程序的入口int main(int argc, char *argv[]){// argc是命令行参数个数，argv是
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2