Python之旅Day15 Bootstrap与Django初识
Bootstrap初识
Bootstrap简介
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。（官网http://www.bootcss.com/ 下载地址http://v3.bootcss.com/getting-started/#download）
Bootstrap的引入方式
Bootstrap的引入方式分为两种：非本地的免费CDN引入和本地引入（常用及推荐方式）
1）非本地的免费CDN引入
Bootstrap 专门构建了免费的 CDN 加速服务，访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费
<head>
<meta charset="UTF-8"> <!--###################引入开始#################-->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <script type="application/javascript" src="bootstrap-3.3.7-dist/jquery-3.1.1.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <!--###################引入结束#################--> <title>Title</title>
</head>
2）本地导入方式
<head>
<meta charset="UTF-8"> <!--###################引入开始#################--> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script type="application/javascript" src="bootstrap-3.3.7-dist/jquery-3.1.1.js"></script>
<script type="application/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> <!--###################引入结束#################--> <title>Title</title>
</head>
注意：src部分需要结合自身的下载的程序版本修改
Bootstrap的CSS
栅格系统（GridSystem）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> <title>Bootstrap-demo</title>
<style>
.row [class*="col-"]{
padding-top: 15px;
padding-bottom: 15px;
background-color: rebeccapurple;
border: 2px solid yellowgreen;
color:#fff;
} /*媒体查询*/
@media(max-width:800px){
.media{
color: red;
}
}
</style>
</head>
<body> <!------------------------------栅格系统的结构------------>
<div class="container"> <div class="row">
<div class="col-md-2">md-2</div>
<div class="col-md-4">md-4</div>
<div class="col-md-6">md-6</div>
</div> <div class="row">
<div class="col-md-6 col-sm-4">md6-sm4</div>
<div class="col-md-6 col-sm-8">md6-sm8</div>
</div> <div class="media">hello @media</div> <!------------------------------栅格系统的使用------------> <div class="row">
<div class="col-sm-2">md-2</div>
<div class="col-sm-4">md-4</div>
<div class="col-sm-6">md-6</div>
</div> <!-- 2 列偏移offset --> <div class="row">
<div class="col-md-2">col-md-3</div>
<div class="col-md-4 col-md-offset-4">col-md-offset-3</div>
<!--<div class="col-md-1">col-md-1col-md-1col-md-1col-md-1col-md-1</div>-->
</div> <!-- 3 列嵌套 --> <div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-md-8">col-md-8</div>
<div class="col-md-4">col-md-4</div>
</div>
</div>
<div class="col-md-3">col-md-3</div>
</div> <!-- 4 列排序 --> <div class="row">
<div class="col-md-9 col-md-push-3">col-md-9</div>
<div class="col-md-3 col-md-pull-9">col-md-3</div>
</div> <!-- 5 清除浮动 --> <div class="row">
<div class="col-md-6 col-sm-1">col-md-1</div>
<div class="clearfix visible-sm"></div>
<div class="col-md-6 col-sm-1">col-md-3</div>
</div> </div>
</body>
</html>
排版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> <title>demo-排版</title>
</head>
<body> <div class="container">
<!------------------------------排版基础------------>
<div class="row">
<div class="col-md-2">hello md-2</div>
<a class="col-md-4">md-4</a>
<p class="col-md-6">md-6</p>
</div> <!------------------------------排版标题------------> <h1>我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
<h4>我是h4</h4>
<h5>我是h5</h5>
<h6>我是h6</h6> <!--如果向任何标题添加一个内联子标题，只需要简单地在元素两旁添加 <small>，-->
<!--或者添加 .small class即可--> <h1>h1...<small>h1子标题</small></h1>
<h2>h2...<small>h2子标题</small></h2> <!------------------------------强调------------> <!--添加 class="lead"使段落文本更大更粗、行高更高-->
<p class="lead">莫道君行早,更有早行人</p> <small>small</small><br>
<strong>strong</strong><br>
<em>em</em><br>
<p class="text-left">文本左对齐</p>
<p class="text-center">文本居中对齐</p>
<p class="text-right">文本右对齐</p> <p class="text-primary">text-primary</p>
<p class="text-success">text-success</p>
<p class="text-info">text-info</p>
<p class="text-warning">text-warning</p>
<p class="text-danger">text-danger</p> <!------------------------------缩写------------>
<abbr title="HyperText Transfer Protocol">http</abbr><br>
<abbr title="Domain Name System" class="initialism">dns</abbr> <!------------------------------地址(没有太大样式改变)------------> <address>
<strong>oldboy</strong><br>
XXX street<br>
beijing<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address> <!------------------------------引用------------>
<p class="lead">hello world hello world hello world hello world</p>
<blockquote class="pull-left">
<small><em>发布于 2017-02-19</em></small>
</blockquote> <!------------------------------列表(有序列表、无序列表和定义列表)------------>
<br>
<hr> <h3>未定义样式列表</h3>
<ul class="list-unstyled">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h3>内联列表</h3>
<ul class="list-inline">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul> <h3>水平的定义列表</h3>
<dl class="dl-horizontal">
<dt>Desc</dt>
<dd>item</dd>
<dt>Desc</dt>
<dd>item</dd>
</dl> </div>
</body>
</html>
代码
Bootstrap 允许您以两种方式显示代码：
1）<code> 标签。如果您想要内联显示代码，那么您应该使用 <code> 标签。
2） <pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用
<div class="container">
<p><code><p>hello</p></code> 是一个p标签</p>
<p>如果需要把代码显示为一个独立的块元素，请使用 <code><pre></code>
<pre>
<div>
<h1>介绍</h1>
</div>
</pre>
</div>
表格
1）表格样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格样式-demo</title>
</head>
<body>
<div class="container"> <table class="table table-striped">
<!--关于表格存储内容的描述或总结。-->
<caption>条纹表格布局</caption>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bob</td>
<td>23</td>
<td>3000</td>
</tr>
<tr class="danger">
<td>steven</td>
<td>34</td>
<td>5000</td>
</tr>
<tr class="success">
<td>alvin</td>
<td>33</td>
<td>7000</td>
</tr> <tr class="warning">
<td>alvin</td>
<td>33</td>
<td>7000</td>
</tr>
</tbody>
</table> </div> </body>
</html>
表格样式
2）响应式表格
通过把任意的 .table 包在 .table-responsive class 内可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，看不到任何的差别。
表单
Bootstrap 提供了下列类型的表单布局：垂直表单（默认）；内联表单；水平表单
1）垂直表单
创建基本表单的步骤：
a. 向父 <form> 元素添加 role="form"。
b. 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
c. 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。
###body部分添加如下内容### <form role="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="password">密码</label>
<input type="password" class="form-control" id="password" placeholder="请输入密码">
</div> <div class="checkbox">
<label>
<input type="checkbox">记住密码
</label>
</div> <button type="submit" class="btn">提交</button>
</form>
垂直表单
2）内联表单
如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class .form-inline。
a. 默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时，您需要在表单控件上设置一个宽度。
b. 使用 class .sr-only，您可以隐藏内联表单的标签。
3）水平表单
水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：
a. 向父 <form> 元素添加 class .form-horizontal。
b. 把标签和控件放在一个带有 class .form-group 的 <div> 中。
c. 向标签添加 class .control-label。
###在body部分加入如下内容###
<div class="container">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="username" placeholder="请输入用户名">
</div>
</div>
<div class="form-group">
<label for="pwd" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="pwd" placeholder="请输入用户名">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox">记住密码
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn">登录</button>
</div>
</div>
</form>
</div>
水平表单
4）表单控件状态
a. 输入框焦点：当输入框 input 接收到 :focus 时，输入框的轮廓会被移除，同时应用 box-shadow。
b. 禁用的输入框 input：如果您想要禁用一个输入框 input，只需要简单地添加 disabled 属性，这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。
c. 禁用的字段集 fieldset：对<添加 disabled 属性来禁用内的所有控件。
d. 验证状态：Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态
###在body加入如下内容###
<div class="container">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">normal</label>
<div class="col-sm-10">
<input class="form-control" type="text" placeholder="该输入框可以获得焦点...">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">禁用</label>
<div class="col-sm-10">
<input class="form-control" id="inputPassword" type="text" placeholder="该输入框禁止输入..." disabled>
</div>
</div>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput" class="col-sm-2 control-label">禁用输入（Fieldset disabled）</label>
<div class="col-sm-10">
<input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
</div>
</div>
<div class="form-group">
<label for="disabledSelect" class="col-sm-2 control-label">禁用选择菜单（Fieldset disabled）</label>
<div class="col-sm-10">
<select id="disabledSelect" class="form-control">
<option>禁止选择</option>
</select>
</div>
</div>
</fieldset>
<div class="form-group has-success">
<label class="col-sm-2 control-label" for="inputSuccess">输入成功</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputSuccess">
</div>
</div>
<div class="form-group has-warning">
<label class="col-sm-2 control-label" for="inputWarning">输入警告</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputWarning">
</div>
</div>
<div class="form-group has-error">
<label class="col-sm-2 control-label" for="inputError">输入错误</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputError">
</div>
</div>
</form>
</div>
表单控件状态
5）表单控件大小
可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度
###在body部分加入如下内容### <div class="container"> <form role="form">
<div class="form-group">
<!--have a try: input-sm-->
<input class="form-control input-lg" type="text" placeholder=".input-lg">
</div> <div class="form-group">
<!--have a try: input-sm-->
<select class="form-control input-lg">
<option value="">默认选择</option>
</select>
</div> <div class="row">
<div class="col-lg-6">
<input type="text" class="form-control">
</div>
<div class="col-lg-6">
<input type="text" class="form-control">
</div>
</div> </form>
</div>
表单控件大小
6）表单帮助文本
Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块，请在 <input> 后使用 .help-block。
###在body部分加入如下内容### <div class="container"> <form role="form">
<span>帮助文本实例</span>
<input class="form-control" type="text" placeholder="">
<span class="help-block">帮助文本实例帮助文本实例帮助文本实例帮助文本实例帮助文本实例
帮助文本实例帮助文本实例帮助文本实例帮助文本实例帮助文本实例帮助文本实例帮助文本实例
帮助文本实例帮助文本实例帮助文本实例</span>
</form>
</div>
表单帮助文本
按钮
任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式
###在body中添加如下内容### <div class="container"> <!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>
<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>
<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button> <hr>
<button type="button" class="btn btn-primary btn-lg">大的原始按钮</button>
<button type="button" class="btn btn-default btn-sm">小的按钮</button> <hr>
<p>
<button type="button" class="btn btn-default btn-lg ">默认按钮</button>
<button type="button" class="btn btn-default btn-lg active">激活按钮</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-lg ">原始按钮</button>
<button type="button" class="btn btn-primary btn-lg active">激活的原始按钮</button>
</p> <hr>
<p>
<button type="button" class="btn btn-primary btn-lg ">原始按钮</button>
<button type="button" class="btn btn-primary btn-lg" disabled="disabled">禁用的原始按钮</button>
</p> </div>
按钮
图片
Bootstrap 提供了三个可对图片应用简单样式的 class。
1）.img-rounded
添加 border-radius:6px 来获得图片圆角。
2）.img-circle
添加 border-radius:50% 来让整个图片变成圆形。
3）.img-thumbnail
添加一些内边距（padding）和一个灰色的边框。
<img src="mienv.png" class="img-rounded">
另外，通过在 <img> 标签添加 .img-responsive 类来让图片支持响应式设计。.img-responsive 类将 max-width: 100%; 和 height: auto; 样式应用在图片上
<img src="meinv.jpg" class="img-responsive">
参考链接 http://www.cnblogs.com/yuanchenqi/articles/6788872.html
Django初识
Python之旅Day15 Bootstrap与Django初识的更多相关文章
- Python自动化 【第十八篇】：JavaScript 正则表达式及Django初识
本节内容 JavaScript 正则表达式 Django初识 正则表达式 1.定义正则表达式 /.../ 用于定义正则表达式 /.../g 表示全局匹配 /.../i 表示不区分大小写 /.../m ...
- Python之路,Day15 - Django适当进阶篇
Python之路,Day15 - Django适当进阶篇 本节内容 学员管理系统练习 Django ORM操作进阶 用户认证 Django练习小项目:学员管理系统设计开发 带着项目需求学习是最有趣 ...
- python自动化开发-[第十六天]-bootstrap和django
今日概要: 1.bootstrap使用 2.栅格系统 3.orm简介 4.路由系统 5.mvc和mtv模式 6.django框架 1.bootstrap的引用方式 1.Bootstrap 专门构建了免 ...
- 【Python之旅】第六篇（七）：开发简易主机批量管理工具
[Python之旅]第六篇(七):开发简易主机批量管理工具 python 软件开发 Paramiko模块 批量主机管理 摘要: 通过前面对Paramiko模块的学习与使用,以及Python中多线程与多 ...
- Django 初识
Django 初识 一.前言 Django是一款网站架构,能够快速的搭建一个网站.openstack的界面显示使用的就是Django的框架.所以,学习openstack多少要了解一些Django的内 ...
- Web框架的原理和Django初识
一.Web框架的本质 1.本质 实际上Web应用本质上就是一个socket服务端, 而用户的浏览器就是一个socket客户端. 2.最原始的web框架 socket服务端 import socket ...
- Django初识 学习笔记一
Django初识 学习笔记一 mvcviewsmodelstemplate. 一 MVC框架 MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(c ...
- Django框架(一)-Django初识
Django初识 一.Web框架本质—自己实现Web框架 1.所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端 import socket sk = sock ...
- python 自动化之路 day 20 Django进阶/BBS项目【一】
一.django进阶 1.django orm 增删改查 1.1.创建表: 1 2 3 >>> from blog.models import Blog >>> b ...
随机推荐
- mysql学习笔记--数据库视图
一.视图 1. 概念 a. 视图是一张虚拟表,它表示一张表的部分或多张表的综合的结构 b. 视图仅仅是表结构,没有数据.视图的结构和数据建立在表的基础上 2. 创建视图 a. 语法: create [ ...
- 使用IDEA工具编写Python自动化脚本遇到的小问题
1.无法编写代码:因为安装了IdeaVim,所以需要按i进入编辑模式才能输入 2.位于同一目录下的py文件,其中一个文件需要引入另一个文件from 模块名 import * 无法找到模块名:点击这两个 ...
- Mybateis mapper 接口 example 用法
注意:希望通过此篇文章分享 可以使大家对mapper接口以及example 用法更加深入理解 MyBatis的Mapper接口以及Example的实例函数及详解 一.mapper接口中的方法解析 ma ...
- odoo 前端页面渲染--数据库管理页面
例子 - 去除登陆页面的Powered by Odoo链接从上面的第3步,我们可以看到,最后登录界面是由'web.login' 模板来显示的,通过odoo的继承方式,我们很容易的就可以去除这个链接,通 ...
- SpringMVC 使用PUT请求遇到的问题小结
最近在使用REST风格的URL进行CURD操作的学习过程中 发现使用PUT请求时候提交表单进行修改操作 报错:Request method 'PUT' not supported 在网上查找资料发现是 ...
- 微信小程序上拉下拉刷新
小程序提供了,onPullDownRefresh和onReachBottom两个事件函数监听下拉和上拉事件函数.提示加载中,取消加载中 效果: js文件 // pages/enterprise/ent ...
- windows7 ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务 的解决方法
用PL/SQL连接虚拟机中的Oracle数据库,发现又报了“ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务”错误,帮其解决后,发现很多人遇到过这样的问题,因此写着这里. 也许你没 ...
- ionic3自定义android原生插件
一.创建一个android项目,编写插件功能,并测试ok,这里以一个简单的调用原生Toast.makeText为例. 1.新建android项目 2.编写插件类 package com.plugin. ...
- my new blog
博客迁移至: https://www.dboop.com/
- HTTP协议之url详解
HTTP使用统一资源标识符(Uniform Resource Identifiers, URI)来传输数据和建立连接.URL是一种特殊类型的URI,包含了用于查找某个资源的足够的信息 URL,全称是U ...