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>&lt;p&gt;hello&lt;/p&gt;</code> 是一个p标签</p>

<p>如果需要把代码显示为一个独立的块元素，请使用 <code>&lt;pre&gt;</code>

<pre>

    &lt;div&gt;

        &lt;h1&gt;介绍&lt;/h1&gt;

    &lt;/div&gt;

</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 ...

随机推荐

Golang学习---test写法和benchmark写法
一.Test 1. 每一个test文件须import一个testing 2. test文件下的每一个test case 均必须用Test开头并且符合TestXxxx形式,否则go test会直接跳过测 ...
前后端分离框架前端react,后端springboot跨域问题分析
前后端分离框架前端react,后端springboot跨域问题分析为啥跨域了前端react的设置 springboot后端设置为啥跨域了由于前后端不在一个端口上,也是属于跨域问题的一种,所以必 ...
ios 根据 schemes 打开 app
公司出需求,要让 h5链接直接打开用户的 app,如果没有安装 app 直接跳转到 appStore 这就需要给 app 配置 schemes 即可 1.在Info.plist中 LSApplicat ...
人脸识别1：n对比（一）
本项目采用了 Face++人脸识别第三方接口,实现了自选本地手机相册图片上传人脸(faceSet中添加人脸) 和自选本地手机相册图片寻找出集合中相似度最高的一个face,可返回比对相似度等信息. ...
201621123002《JAVA程序设计》第十四周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结与数据库相关内容. 2. 使用数据库技术改造你的系统 2.1 简述如何使用数据库技术改造你的系统.要建立什么表?截图你的表设计. 用 ...
What is REST API
What is REST REST is acronym for REpresentational State Transfer. It is architectural style for dist ...
快速解决PL/SQL Developer过期问题（无需注册码等复杂操作）
第一步:在开始菜单中输入 :regedit 的指令,点击回车,进入注册表编辑器界面第二步:在注册表里按HKEY_CURRENT_USER\Software\Allround Automations ...
支付宝app对接的坑
主要流程是: 1.申请成为开发者 2.创建应用 3.设置应用公钥/私钥/支付宝公钥 4.制作服务器端代码(此处注意,不要解析htmlencode) https://blog.csdn.net/zzzi ...
pip使用国内镜像安装各种库
1. 指定阿里云镜像, 安装requirements.txt中的所有 pip install -i http://mirrors.aliyun.com/pypi/simple/ --trusted-h ...
C# BitArray 二进制处理
int k = 6; byte[] bytearr = BitConverter.GetBytes(k); BitArray myBA = new BitArray(bytearr); for (in ...

Python之旅Day15 Bootstrap与Django初识

Python之旅Day15 Bootstrap与Django初识的更多相关文章

随机推荐

热门专题