Python学习笔记第二十七周（Bootstrap）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Python学习笔记第二十七周（Bootstrap）相关的知识，希望对你有一定的参考价值。
目录：
一、栅格系统
二、表单
三、按钮
内容：
前言：
首先通过https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css 链接下载bootstrap.min.css保存到本地，然后执行下面操作
一、栅格系统
栅格系统是页面布局使用，是区分列布局使用的，一般bootstrap将整个页面分为12份，可以任意组合自己想要的列分割方式，在div标签中使用col-XX的方式来实现，该方式有几种方法：
- col-md-XX 其中md表示中等距离，XX表示一共分几分，例如，四个div标签，如果想并排且等分，可以使用class=‘col-md-3’来实现
- col-sm-XX sm表示小，XX同上
- col-xs-XX xs表示极小，XX同上
例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap.min.css"> </head> <body> col代表列的意思，md表示样式，默认分成12分，4代表三个元素每个占3分之一 <div class="col-md-3">Bootstrap （当前版本 v3.3.7）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。 继续阅读下面的内容，看看哪种方式适合你的需求吧。</div> <div class="col-md-3">Bootstrap （当前版本 v3.3.7）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。 继续阅读下面的内容，看看哪种方式适合你的需求吧。</div> <div class="col-md-3">Bootstrap （当前版本 v3.3.7）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。 继续阅读下面的内容，看看哪种方式适合你的需求吧。</div> <div class="col-md-3">Bootstrap （当前版本 v3.3.7）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。 继续阅读下面的内容，看看哪种方式适合你的需求吧。</div> <!--小使用sm--> <div class="col-sm-3">Bootstrap （当前版本 v3.3.7）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。 继续阅读下面的内容，看看哪种方式适合你的需求吧。</div> <div class="col-sm-3">Bootstrap （当前版本 v3.3.7）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。 继续阅读下面的内容，看看哪种方式适合你的需求吧。</div> <div class="col-sm-3">Bootstrap （当前版本 v3.3.7）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。 继续阅读下面的内容，看看哪种方式适合你的需求吧。</div> <div class="col-sm-3">Bootstrap （当前版本 v3.3.7）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。 继续阅读下面的内容，看看哪种方式适合你的需求吧。</div> #布局实例，左面和右面是两份，中间是8份,一共12份 <div class="col-sm-2"> <h3>主侧栏</h3> Bootstrap （当前版本 v3.3.7）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。 继续阅读下面的内容，看看哪种方式适合你的需求吧。</div> <div class="col-sm-8"> <h3>内容</h3> Bootstrap （当前版本 v3.3.7）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。 继续阅读下面的内容，看看哪种方式适合你的需求吧。</div> <div class="col-sm-2"> <h3>右侧栏</h3> Bootstrap （当前版本 v3.3.7）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。 继续阅读下面的内容，看看哪种方式适合你的需求吧。</div> </body> </html>
二、表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap.min.css"> <link rel="stylesheet" href="main.css"> </head> <body> <!--container和container-small是用来限制下面表单大小的--> <form class="container container-small" action=""> <h1>注册</h1> <!--form-inline加上是为了将下面的姓与名放在同一个水平线上，初始没有这个div的时候，两个是上下排列--> <div class="form-inline"> <!--has-error表示语法高亮，其中error表示红色 success-绿色 warning 橙色 info蓝色 --> <div class="form-group has-error"> <!--control-label表示姓和输入框一起变色--> <label class="control-label" for="first-name ">姓</label> <input id="first-name" type="text" class="form-control"> </div> <div class="form-group has-success"> <label for="last-name">名</label> <input id="last-name" type="text" class="form-control"> </div> <div class="form-group has-warning"> <label for="last-name">性别</label> <input id="last-name" type="text" class="form-control"> </div> <div class="form-group has-warning"> <label for="last-name">爱好</label> <!--在form-control后面添加input-XX，可以控制大小，其中变大为input-lg，变小为input-sm--> <input id="last-name" type="text" class="form-control input-xs"> </div> </div> <div class="form-group has-warning"> <label>充值金额</label> <!--添加了input-group和input-group-addon,这样前面的符号就和后面成为一体了--> <div class="input-group"> <div class="input-group-addon">$</div> <input type="text" class="form-control"> </div> </div> <hr> <div class="form-inline has-warning"> <div class="form-group"> <label class="control-label">Other</label> <select class="form-control"> <option value="1">贝贝</option> <option value="2">家家</option> <option value="3">塔塔</option> </select> </div> </div> <!--使用row方式，可以让下面这个和上面对齐，如果不希望栅格系统有两边的padding的时候就使用row这个类--> <div class="row"> <!--如何做一个软件，需要输入序列号，可以使用这种方式，即栅格系统与form-control结合的方式来完成--> <div class="col-md-4"> <input type="text" class="form-control" placeholder="XXXX"> </div> <div class="col-md-4"> <input type="text" class="form-control" placeholder="XXXX"> </div> <div class="col-md-4"> <input type="text" class="form-control" placeholder="XXXX"> </div> </div> </form> </body> </html>
三、按钮
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap.min.css"> </head> <body> <!--well类就表示一个边距--> <div class="well"> <!--btn方式可以让按钮的四个角变圆滑，后面的btn-default是按钮的样式--> <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> <!--可以对链接也加上btn和btn-XX样式，可以使超链接变成想要的样式--> <a href="http://www.baidu.com" class="btn btn-danger">断网测试</a> <input type="submit" class="btn btn-primary" value="戳我"/> <hr> <!--通过btn-lg来扩大按钮大小，btn-sm表示小，btn-xs表示极小--> <button class="btn btn-default btn-lg">戳我</button> <button class="btn btn-default ">戳我</button> <button class="btn btn-primary btn-sm">戳我</button> <button class="btn btn-danger btn-xs">戳我</button> <hr> <!--btn-block大小占据母元素整个边界--> <button class="btn btn-block">戳我</button> <hr> <!--active表示选中 disabled=disabled表示禁用--> <button class="btn btn-default active">戳我</button> <button class="btn btn-default ">戳我</button> <button disabled="disabled" class="btn btn-default ">戳我</button> </div> </body> </html>
以上是关于Python学习笔记第二十七周（Bootstrap）的主要内容，如果未能解决你的问题，请参考以下文章
全国计算机等级考试二级Python（2021年9月）备考笔记 第十二天
全国计算机等级考试二级Python（2021年9月）备考笔记 第十四天
[ExtJS5学习笔记]第二十七节 CMD打包错误 Error C2009: YUI Parse Error (identifier is a reserved word => debu