weixin_30740581
weixin_30740581

python自动化开发-[第十六天]-bootstrap和django

　　今日概要：

　　1、bootstrap使用

　　2、栅格系统

　　3、orm简介

　　4、路由系统

　　5、mvc和mtv模式

　　6、django框架

1、bootstrap的引用方式

　　1、Bootstrap 专门构建了免费的 CDN 加速服务，访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费　

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">


    
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    
    <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>
    
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">script>

    <title>Bootstrap-demotitle>
head>
<body>
<div class="container">
  <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="true" aria-controls="navbar">
            <span class="sr-only">Toggle navigationspan>
            <span class="icon-bar">span>
            <span class="icon-bar">span>
            <span class="icon-bar">span>
          button>
          <a class="navbar-brand" href="#">Bootstrap themea>
        div>
        <div id="navbar" class="navbar-collapse collapse in" aria-expanded="true">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Homea>li>
            <li><a href="#about">Abouta>li>
            <li><a href="#contact">Contacta>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="#">Actiona>li>
                <li><a href="#">Another actiona>li>
                <li><a href="#">Something else herea>li>
                <li role="separator" class="divider">li>
                <li class="dropdown-header">Nav headerli>
                <li><a href="#">Separated linka>li>
                <li><a href="#">One more separated linka>li>
              ul>
            li>
          ul>
        div>
      div>
    nav>
div>
body>
html>
View Code

 

　　2、本地下载bootstrap,通过路径引入(注意引入顺序,bootstrap的js依赖jquery,要在引入js前,先引入jquery)

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">
   <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>Bootstrap-demotitle>
head>
<body>
<div class="container">
  <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="true" aria-controls="navbar">
            <span class="sr-only">Toggle navigationspan>
            <span class="icon-bar">span>
            <span class="icon-bar">span>
            <span class="icon-bar">span>
          button>
          <a class="navbar-brand" href="#">Bootstrap themea>
        div>
        <div id="navbar" class="navbar-collapse collapse in" aria-expanded="true">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Homea>li>
            <li><a href="#about">Abouta>li>
            <li><a href="#contact">Contacta>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="#">Actiona>li>
                <li><a href="#">Another actiona>li>
                <li><a href="#">Something else herea>li>
                <li role="separator" class="divider">li>
                <li class="dropdown-header">Nav headerli>
                <li><a href="#">Separated linka>li>
                <li><a href="#">One more separated linka>li>
              ul>
            li>
          ul>
        div>
      div>
    nav>
div>
body>
html>
View Code

 2、栅格系统

　　1、bootstrap将每一行分为12列,而且这一行会有居中和两边有间距

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-demotitle>
    <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;*/
            /*}*/
        /*}*/
        /*多条件*/
        @media(max-width:800px) and (min-width: 500px){
            .media{
                color: red;
            }
        }
    style>
head>
<body>




<div class="container">

  <div class="row">
      <div class="col-md-2">md-2div>
      <div class="col-md-4">md-4div>
      <div class="col-md-6">md-6div>
  div>

   <div class="row">
      <div class="col-md-6 col-sm-4">md6-sm4div>
      <div class="col-md-6 col-sm-8">md6-sm8div>
  div>

<div class="media">hello @mediadiv>




            <div class="row">
              <div class="col-sm-2">md-2div>
              <div class="col-sm-4">md-4div>
              <div class="col-sm-6">md-6div>
            div>



            <div class="row">
                   <div class="col-md-2">col-md-3div>
                   <div class="col-md-4 col-md-offset-4">col-md-offset-3div>
                   
            div>



            <div class="row">
                  <div class="col-md-9">
                      
                       <div class="row">
                           <div class="col-md-8">col-md-8div>
                           <div class="col-md-4">col-md-4div>
                       div>
                  div>
                  <div class="col-md-3">col-md-3div>
            div>




    <div class="row">
               <div class="col-md-9 col-md-push-3">col-md-9div>
               <div class="col-md-3 col-md-pull-9">col-md-3div>
    div>



    <div class="row">
               <div class="col-md-6 col-sm-1">col-md-1div>
               <div class="clearfix visible-sm">div>
               <div class="col-md-6 col-sm-1">col-md-3div>
    div>


div>
body>
html>
栅格系统

　　　　　　python自动化开发-[第十六天]-bootstrap和django_第1张图片

　　2、媒介查询-响应式布局(使用场景多种不同分辨率的设备进行自适应)

　　　　@media　　

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

 　　我们偶尔也会在媒体查询代码中包含 max-width 从而将 CSS 的影响限制在更小范围的屏幕大小之内。

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... } 
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .header{
            background-color: wheat;
            width: 100%;
            height: 100px;
        }
        .header div{
            display: inline-block;
            border: 1px solid red;
            background-color: blue;
            padding: 10px 100px;
        }

        @media (max-width: 800px) {
            .header .c3{
                background-color: yellow;
                display: none;
            }
        }

    style>
head>
<body>

<div class="header">
    <div>hellodiv>
    <div>hellodiv>
    <div class="c3">hellodiv>
div>

body>
html>
响应式布局

 

3、排版

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-2div>
      <a class="col-md-4">md-4a>
      <p class="col-md-6">md-6p>
  div>




    <h1>我是h1h1>
    <h2>我是h2h2>
    <h3>我是h3h3>
    <h4>我是h4h4>
    <h5>我是h5h5>
    <h6>我是h6h6>

    
    

    <h1>h1...<small>h1子标题small>h1>
    <h2>h2...<small>h2子标题small>h2>


 

    
   <p class="lead">莫道君行早,更有早行人p>

    <small>smallsmall><br>
    <strong>strongstrong><br>
    <em>emem><br>
    <p class="text-left">文本左对齐p>
    <p class="text-center">文本居中对齐p>
    <p class="text-right">文本右对齐p>

    <p class="text-primary">text-primaryp>
    <p class="text-success">text-successp>
    <p class="text-info">text-infop>
    <p class="text-warning">text-warningp>
    <p class="text-danger">text-dangerp>

 
   <abbr title="HyperText Transfer Protocol">httpabbr><br>
   <abbr title="Domain Name System" class="initialism">dnsabbr>

 

        <address>
          <strong>oldboystrong><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 worldp>
    <blockquote class="pull-left">
      <small><em>发布于 2017-02-19em>small>
    blockquote>



    <br>
    <hr>

<h3>未定义样式列表h3>
<ul class="list-unstyled">
  <li>itemli>
  <li>itemli>
  <li>itemli>
  <li>itemli>
ul>
<h3>内联列表h3>
<ul class="list-inline">
  <li>itemli>
  <li>itemli>
  <li>itemli>
  <li>itemli>
ul>

<h3>水平的定义列表h3>
<dl class="dl-horizontal">
  <dt>Descdt>
  <dd>itemdd>
  <dt>Descdt>
  <dd>itemdd>
dl>

div>
body>
html>
排版

4、代码

　　Bootstrap 允许您以两种方式显示代码：

    • 第一种是 标签。如果您想要内联显示代码，那么您应该使用 标签。
    • 第二种是 
       标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用
<div class="container">
<p><code><p>hello</p>code> 是一个p标签p>
<p>如果需要把代码显示为一个独立的块元素，请使用 <code><pre>code>
<pre>
    <div>
        <h1>介绍</h1>
    </div>
pre>
div>
代码展示

5、表格

　　1.表格的样式

　　　　python自动化开发-[第十六天]-bootstrap和django_第2张图片 

<div class="container">

  <table class="table table-striped">
      
      <caption>条纹表格布局caption>
      <thead>
        <tr>
          <th>姓名th>
          <th>年龄th>
          <th>salaryth>
        tr>
      thead>
      <tbody>
        <tr>
          <td>Bobtd>
          <td>23td>
          <td>3000td>
        tr>
        <tr class="danger">
          <td>steventd>
          <td>34td>
          <td>5000td>
        tr>
        <tr class="success">
          <td>alvintd>
          <td>33td>
          <td>7000td>
        tr>

        <tr class="warning">
          <td>alvintd>
          <td>33td>
          <td>7000td>
        tr>
      tbody>
    table>
div>
表格

　　2、响应式表格

　　　　通过把任意的 .table 包在 .table-responsive class 内可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，看不到任何的差别。 

 6、表单

　　Bootstrap 提供了下列类型的表单布局：

  • 垂直表单（默认）
  • 内联表单
  • 水平表单

　　1、垂直表单

　　创建基本表单的步骤：

  • 向父
    元素添加 role="form"。
  • 把标签和控件放在一个带有 class .form-group 的
    中。这是获取最佳间距所必需的。
  • 向所有的文本元素 、