Python学习笔记第二十七周（Bootstrap）

　　一、栅格系统

　　二、表单

　　三、按钮

内容：

　　前言：

　　首先通过https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css 链接下载bootstrap.min.css保存到本地，然后执行下面操作

　　一、栅格系统

　　　　栅格系统是页面布局使用，是区分列布局使用的，一般bootstrap将整个页面分为12份，可以任意组合自己想要的列分割方式，在div标签中使用col-XX的方式来实现，该方式有几种方法：

1. col-md-XX 其中md表示中等距离，XX表示一共分几分，例如，四个div标签，如果想并排且等分，可以使用class=‘col-md-3’来实现
2. col-sm-XX sm表示小，XX同上
3. 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>

时间： 2024-08-09 12:41:11

Python学习笔记第二十七周（Bootstrap）的相关文章

Python学习笔记第二十周

目录: 一.ORM 1.查询补充内容: 一.ORM 1.查询补充: 1.models.USR.objects.all().values('id','name') 这个语句相当于SQL语句中的select id,name from USER ,表示可以单独取某几列的值,取得的值仍然是QuerySet,但是内部元素变为字典 2.models.USR.objects.all().value_list('id','name') 表示可以单独取某几列的值,取得的值仍然是QuerySet,但是内部元素变

Python学习笔记第二十一周

目录: 一.URL 1.Views - 请求的其他信息 - 装饰器 2.Models - 操作 3.Templates - html模板的使用 - 自定义函数 4.cookie和session 5.分页(自定义分页) 6.Form验证内容: 一.URL 1.Views - 请求的其他信息 - 装饰器 2.Models - 操作 3.Templates - html模板的使用 - 自定义函数 4.cookie和session 5.分页(自定义分页) 6.Form验证

Python学习笔记第二十六周（Django补充）

一.基于jQuery的ajax实现(最底层方法:$.jax()) $.ajax( url: type:''POST" ) $.get(url,[data],[callback],[type]) #callback是发送成功后就执行的函数,type是告诉服务器需要什么数据,type:text|html|json|script $.post(url,[data],[callback],[type]) 例子: $.get('/jquery_get/',{name:'gavin'}) //name关键

Python学习笔记第二十四五周（Django补充）

目录: 内容: 1.render_to_reponse() 不同于render,render_to_response()不用包含request,直接写template中文件 2.locals() 如果views文件中的函数里变量过多的话,可以在render或render_to_response()里面直接增加render(request,'index.html',locals())这样在前端界面渲染的时候可以直接写变量名

Python学习笔记第二十二周（前端知识点补充）

目录: 一.伪类二.样式 1.字体 2.背景图片 3.margin和padding 内容: 一.伪类 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a:link{ background-color:red; } a:hover{ backgrou

菜鸟Python学习笔记第二天：关于Python黑客。

2016年1月5日星期四天气:还好一直不知道自己为什么要去学Python,其实Python能做到的Java都可以做到,Python有的有点Java也有,而且Java还是必修课,可是就是不愿意去学Java,后来看到了<Linux黑客的python编程之道>然后发现了一些自己感兴趣的事,每个IT男都有一个黑客梦,我也不例外,所以继续开始Python写习. 因为要准备高数考试,所有以很多东西不能去仔细学习. 就深深的记住了几句话: 第一句:调试器就是黑客的眼睛.刚开始不懂什么是调试器:但是从眼

Python学习笔记整理(十七)异常处理

一.异常基础 try/except:捕捉由代码中的异常并恢复,匹配except里面的错误,并自行except中定义的代码,后继续执行程序(发生异常后,由except捕捉到异常后,不会中断程序,继续执行try语句后面的程序) try/finally: 无论异常是否发生,都执行清理行为 (发生异常时程序会中断程序,只不过会执行finally后的代码) raise: 手动在代码中接触发异常. assert: 有条件地在程序代码中触发异常. with/as 在Python2.6和后续版本中实现环境管理器

linux学习笔记-第二十七课-tamcat与resin

一.tomcat 1. 安装JDK [[email protected] src]# tar -zxvf jdk-7u79-linux-i586.tar.gz # 编辑初始化信息脚本 [[email protected] src]# mv jdk1.7.0_79 /usr/local/jdk1.7.0_79 [[email protected] src]# vim /etc/profile.d/java.sh JAVA_HOME=/usr/local/jdk1.7.0_79 JAVA_BIN=

Python学习笔记第六周

一.基础概念面向对象编程 OOP编程是利用"类"和"对象"来创建各种模型来实现对真实世界的描述,使用面向对象编程的原因一方面是因为它可以使程序的维护和扩展变得更简单,并且可以大大提高程序开发效率 ,另外,基于面向对象的程序可以使它人更加容易理解你的代码逻辑,从而使团队开发变得更从容. 面向对象的几个核心特性如下 Class 类一个类即是对一类拥有相同属性的对象的抽象.蓝图.原型.在类中定义了这些对象的都具备的属性(variables(data)).共同的方法 Ob