hg888皇冠手机登录

【www.hg888.com】Bootstrap 面板

七月 5th, 2019  |  www.hg888.com

基本的面板:
<div >     <div >        这是一个基本的面板     </div>  </div>

Bootstrap 布局组件(全),bootstrap布局组件

Bootstrap 布局组件

1、Bootstrap字体Logo

(1)、字体Logo列表链接

     

(2)、用法

     如需使用Logo,只需求轻巧地运用下边包车型客车代码就可以。请在Logo和文书之间保留特别的空中。没有glyphicon的css。

  <span class=”glyphicon glyphicon-search”></span>

(3)、定制字体Logo

     大家已经阅览如何利用字体Logo,接下去我们看看哪些定制字体Logo。

     我们将以地点的实例早先,并经过更动字体尺寸、颜色和利用文本阴影来开始展览定制图标。

A、定制图标

<button type="button" class="btn btn-primary btn-lg">

  User

</button>

B、定制字体尺寸

   通过扩充或回退Logo的书体尺寸,您能够让Logo看起来更加大或更加小。

<button type="button" class="btn btn-primary btn-lg"style="font-size: 60px">

  User

</button>

C、定制字体颜色

<button type="button" class="btn btn-primary btn-lg"style="color: rgb(212, 106, 64);">

  User

</button>

D、应用文本阴影

<button type="button" class="btn btn-primary btn-lg"style="text-shadow: black 5px 3px 3px;">

  User

</button>

2、Bootstrap下拉菜单

(1)、下拉菜单是可切换的,是以列表格式展现链接的上下文菜单。那足以由此与
下拉菜单(Dropdown) JavaScript 插件 的互相来达成。

如需使用下列菜单,只须要在 class .dropdown 内增加下拉菜单就能够。

<div class="dropdown">
  <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
   data-toggle="dropdown">
   主题

  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
   <li role="presentation">
     <a role="menuitem" tabindex="-1" href="#">Java</a>
   </li>
   <li role="presentation">
     <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
   </li>
   <li role="presentation">
     <a role="menuitem" tabindex="-1" href="#">
      数据通信/网络
     </a>
   </li>
   <li role="presentation" class="divider"></li>
   <li role="presentation">
     <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
   </li>
  </ul></div>

(2)、对齐

透过向 .dropdown-menu 加多 class .pull-right 来向右对齐下拉菜单。

(3)、标题

您可以利用 class dropdown-header 向下拉菜单的竹签区域增加标题。 

3、Bootstrap 按钮组

(1)、按键组允许七个开关被堆放在同一行上。当您想要把按键对齐在联合签名时,那就展现拾叁分管用。

 www.hg888.com 1

 (2)、嵌套

你能够在二个按键组内嵌套另一个按键组,即,在二个 .btn-group 内嵌套另八个.btn-group 。当你向让下拉菜单与一多级开关组合使用时,就能够用到这几个。 

4、Bootstrap 开关下拉菜单

行使 Bootstrap class
向按键增添下拉菜单。如需向开关加多下拉菜单,只须求轻松地在在一个.btn-group 中放置开关和下拉菜单就能够。您也能够使用 <span
class=”caret”></span> 来提醒按键作为下拉菜单。

<div class="btn-group">

  <button type="button" class="btn btn-default dropdown-toggle"

   data-toggle="dropdown">

   默认 

  </button>

  <ul class="dropdown-menu" role="menu">

   <li><a href="#">功能</a></li>

   <li><a href="#">另一个功能</a></li>

   <li><a href="#">其他</a></li>

   <li class="divider"></li>

   <li><a href="#">分离的链接</a></li>

  </ul>

</div>

(1)、分割的按键下拉菜单

分开的按键下拉菜单使用与下拉菜单开关大约同样的体裁,然则对下拉菜单增添了原来的效能。分割按键的左臂是原有的效应,左边是体现下拉菜单的切换。

<div class="btn-group">

  <button type="button" class="btn btn-default">默认</button>

  <button type="button" class="btn btn-default dropdown-toggle"

   data-toggle="dropdown">



   切换下拉菜单

  </button>

  <ul class="dropdown-menu" role="menu">

   <li><a href="#">功能</a></li>

   <li><a href="#">另一个功能</a></li>

   <li><a href="#">其他</a></li>

   <li class="divider"></li>

   <li><a href="#">分离的链接</a></li>

  </ul>

</div>

(2)、按键下拉菜单的轻重缓急

你能够应用含有各个大小按键的下拉菜单:.btn-large、.btn-sm 或 .btn-xs。

(3)、按键上拉菜单

美食做法也足现在上拉伸的,只供给轻松地向父 .btn-group 容器增添 .dropup
就能够。

       <div class=”btn-group dropup”></div> 

5、Bootstrap 输入框组

输入框组。输入框组扩展自
表单控件。使用输入框组,您能够很轻易地向基于文本的输入框增添作为前缀和后缀的文件或按键。

通过向输入域增加前缀和后缀的内容,您能够向用户输入增多公共的要素。比如,您能够增多澳元符号,也许在
Facebook 用户名前增多 @,大概应用程序接口所急需的另伯公共的要素。

向 .form-control 增多前缀或后缀成分的手续如下:

    A、把前缀或后缀成分放在三个包含 class .input-group 的 <div>
中。

    B、接着,在同一的 <div> 内,在 class 为 .input-group-addon 的
<span> 内放置额外的剧情。

    C、把该 <span> 放置在 <input> 成分的前方也许前边。

为了保持跨浏览器的包容性,请防止选用 <select> 元素,因为它们在
WebKit 浏览器中无法完全渲染出功用。也实际不是一贯向表单组应用输入框组的
class,输入框组是二个孤立的机件。

 <form class="bs-example bs-example-form" role="form">

 <div class="input-group">

  $

  <input type="text" class="form-control"placeholder="twitterhandle">

  .00

 </div>

 </form>

(1)、输入框组的轻重

    您能够透过向 .input-group 增添冲突表单大小的 class(例如.input-group-lg、input-group-sm、input-group-xs)来退换输入框组的分寸。输入框中的内容会活动调解大小。

(2)、复选框和单选插件

你能够把复选框和单选插件作为输入框组的前缀恐怕后缀成分

<div class="input-group">



     <input type="checkbox">



   <input type="text" class="form-control">

</div>

(3)、开关插件

你也得以把按键作为输入框组的前缀也许后缀成分,那一年你就不是加上
.input-group-addon class,您必要运用class .input-group-btn
来包裹按键。那是不能缺少的,因为私下认可的浏览器样式不会被重写。

<div class="input-group">



   <button class="btn btn-default" type="button">

    Go!

   </button>



  <input type="text" class="form-control">

</div>

 www.hg888.com 2 

(4)、带有下拉菜单的按键

在输入框组中加上饱含下拉菜单的开关,只必要轻松地在叁个 .input-group-btn
class 中封装按键和下拉菜单就能够。

<div class="input-group">

  <div class="input-group-btn">

    <button type="button" class="btn btn-default

     dropdown-toggle" data-toggle="dropdown">

     下拉菜单



    </button>

    <ul class="dropdown-menu">

    <li><a href="#">功能</a></li>

    <li><a href="#">另一个功能</a></li>

    <li><a href="#">其他</a></li>

    <li class="divider"></li>

    <li><a href="#">分离的链接</a></li>

    </ul>

 </div>

 <input type="text" class="form-control">

</div>

(5)、分割的下拉菜单按键

在输入框组中丰富富含下拉菜单的分开按键,使用与下拉菜单按键大约一样的体裁,可是对下拉菜单增加了重大的功力,

 <div class="input-group">

  <div class="input-group-btn">

   <button type="button" class="btn btn-default" tabindex="-1">

    下拉菜单

   </button>

   <button type="button" class="btn btn-default dropdown-toggle"   

   data-toggle="dropdown" tabindex="-1">



     切换下拉菜单

    </button>

    <ul class="dropdown-menu">

      <li><a href="#">功能</a></li>

      <li><a href="#">另一个功能</a></li>

      <li><a href="#">其他</a></li>

      <li class="divider"></li>

      <li><a href="#">分离的链接</a></li>

    </ul>

   </div>

   <input type="text" class="form-control">

 </div>

6、Bootstrap 导航成分

行使同样的暗号和基类 .nav。Bootstrap
也提供了一个用以分享标志和状态的支持器类。改动修饰的
class,能够在不一样的样式间开展切换。

(1)、表格导航或标签

创立一个标签式的导航菜单:

A、以三个包涵 class .nav 的冬季列表开头。

B、添加 class .nav-tabs。

<ul class="nav nav-tabs">

  <li class="active"><a href="#">Home</a></li>

  <li><a href="#">SVN</a></li>

  <li><a href="#">iOS</a></li>

  <li><a href="#">VB.Net</a></li>

  <li><a href="#">Java</a></li>

  <li><a href="#">PHP</a></li>

</ul>

(2)、胶囊式的导航菜单

A、基本的胶囊式导航菜单

    借使要求把标签改成胶囊的体制,只需求运用 class .nav-pills 代替.nav-tabs 就可以,其余的步调与地方同样。

<ul class="nav nav-pills">

  <li class="active"><a href="#">Home</a></li>

  <li><a href="#">SVN</a></li>

  <li><a href="#">iOS</a></li>

  <li><a href="#">VB.Net</a></li>

  <li><a href="#">Java</a></li>

  <li><a href="#">PHP</a></li>

</ul>

B、垂直的胶囊式导航菜单

你能够在选择 class .nav、.nav-pills 的还要选择 class
.nav-stacked,让胶囊垂直聚积。

<ul class="nav nav-pills nav-stacked">

  <li class="active"><a href="#">Home</a></li>

  <li><a href="#">SVN</a></li>

  <li><a href="#">iOS</a></li>

  <li><a href="#">VB.Net</a></li>

  <li><a href="#">Java</a></li>

  <li><a href="#">PHP</a></li>

</ul>

(3)、两端对齐的领航

你能够在显示屏宽度超越 768px 时,通过在分级选择 .nav、.nav-tabs 或
.nav、.nav-pills 的还要使用 class
.nav-justified,让标签式或胶囊式导航菜单与父元素等宽。在越来越小的荧屏上,导航链接会堆积。

<ul class="nav nav-pills nav-justified">

  <li class="active"><a href="#">Home</a></li>

  <li><a href="#">SVN</a></li>

</ul>

<ul class="nav nav-tabs nav-justified">

  <li class="active"><a href="#">Home</a></li>

  <li><a href="#">SVN</a></li>

</ul>

(4)、禁止使用链接

对每种 .nav class,假若加多了 .disabled
class,则会成立二个葡萄紫的链接,同时禁止使用了该链接的 :hover 状态,

<ul class="nav nav-pills">

  <li class="active"><a href="#">Home</a></li>

  <li><a href="#">SVN</a></li>

  <li class="disabled"><a href="#">iOS(禁用链接)</a></li>

</ul>

<ul class="nav nav-tabs">

  <li class="active"><a href="#">Home</a></li>

  <li><a href="#">SVN</a></li>

  <li class="disabled"><a href="#">VB.Net(禁用链接)</a></li>

</ul>

(5)、下拉菜单

导航菜单与下拉菜单使用相似的语法。私下认可景况下,列表项的锚与部分数额属性协同合营来触发带有
.dropdown-menu class 的严节列表。

A、带有下拉菜单的价签

向标签增多下拉菜单的步子如下:

以一个包蕴 class .nav 的冬辰列表起始。

添加 class .nav-tabs。

丰富饱含 .dropdown-menu class 的冬辰列表。

<ul class="nav nav-tabs">

  <li class="active"><a href="#">Home</a></li>

  <li><a href="#">SVN</a></li>

  <li class="dropdown">

   <a class="dropdown-toggle" data-toggle="dropdown" href="#">

     Java 

   </a>

   <ul class="dropdown-menu">

     <li><a href="#">Swing</a></li>

     <li class="divider"></li>

     <li><a href="#">分离的链接</a></li>

   </ul>

  </li>

  <li><a href="#">PHP</a></li>

</ul>

 www.hg888.com 3 

B、带有下拉菜单的胶囊

手续与创立带有下拉菜单的竹签一样,只是须要把 .nav-tabs class 改为
.nav-pills。

7、Bootstrap 导航栏

     导航栏是二个很好的功用,是 Bootstrap
网址的三个崛起特色。导航栏在您的选择或网址中作为导航页头的响应式基础零部件。导航栏在运动道具的视图中是折叠的,随着可用视口宽度的加码,导航栏也会水平进行。在
Bootstrap 导航栏的主导中,导航栏富含了站点名称和着力的领航定义样式。

(1)、暗许的导航栏

创设三个私下认可的导航栏的步子如下:

A、向 <nav> 标签加多 class .navbar、.navbar-default。

B、向地点的要素加多 role=”navigation”,有利于扩张可访谈性。

C、向 <div> 成分增添二个标题 class .navbar-header,内部含有了含有
class navbar-brand 的 <a> 成分。那会让文本看起来更加大学一年级号。

D、为了指导航栏增多链接,只供给简单地加上包含 class .nav、.navbar-nav
的严节列表即可。

<nav class="navbar navbar-default" role="navigation">

  <div class="navbar-header">

   <a class="navbar-brand" href="#">W3Cschool</a>

  </div>

  <div>

   <ul class="nav navbar-nav">

     <li class="active"><a href="#">iOS</a></li>

     <li><a href="#">SVN</a></li>

     <li class="dropdown">

      <a href="#" class="dropdown-toggle" data-toggle="dropdown">

        Java

        <b class="caret"></b>

      </a>

      <ul class="dropdown-menu">

        <li class="divider"></li>

        <li><a href="#">分离的链接</a></li>

        <li class="divider"></li>

        <li><a href="#">另一个分离的链接</a></li>

      </ul>

     </li>

   </ul>

  </div>

</nav>

 www.hg888.com 4 

(2)、响应式的导航栏

      为了给导航栏增多响应式本性,您要折叠的源委必须包裹在含蓄 classes
.collapse、.navbar-collapse 的 <div>
中。折叠起来的导航栏实际上是三个带有 class .navbar-toggle 及三个 data-
成分的开关。首个是 data-toggle,用于告诉 JavaScript
需求对按键做怎么样,第三个data-target,提示要切换来哪八个因素。七个带有
class .icon-bar 的 <span> 创制所谓的拉各斯按键。那些会切换为
.nav-collapse <div> 中的成分。为了促成以上那么些效能,您必须带有
Bootstrap 折叠(Collapse)插件。

<nav class="navbar navbar-default" role="navigation">

 <div class="navbar-header">

  <button type="button" class="navbar-toggle" data-toggle="collapse"

     data-target="#example-navbar-collapse">

     切换导航







   </button>

   <a class="navbar-brand" href="#">W3Cschool</a>

  </div>

  <div class="collapse navbar-collapse" id="example-navbar-collapse">

   <ul class="nav navbar-nav">

     <li class="active"><a href="#">iOS</a></li>

     <li><a href="#">SVN</a></li>

     <li class="dropdown">

      <a href="#" class="dropdown-toggle" data-toggle="dropdown">

        Java <b class="caret"></b>

      </a>

      <ul class="dropdown-menu">

        <li><a href="#">jmeter</a></li>

        <li class="divider"></li>

        <li><a href="#">分离的链接</a></li>

        <li class="divider"></li>

        <li><a href="#">另一个分离的链接</a></li>

      </ul>

 </li></ul></div></nav>

www.hg888.com 5

(3)、导航栏中的表单

     导航栏中的表单不是应用 Bootstrap 表单 章节中所讲到的私下认可的
class,它是利用 .navbar-form
class。那确认保证了表单适当的垂直对齐和在较窄的视口中折叠的行事。使用对齐格局选项(那将要组件对齐格局地分开始展览详尽讲解)来支配导航栏中的内容放置在哪里。

<nav class="navbar navbar-default" role="navigation">

  <div class="navbar-header">

   <a class="navbar-brand" href="#">W3Cschool</a>

  </div>

  <div>

   <form class="navbar-form navbar-left" role="search">

    <div class="form-group">

     <input type="text" class="form-control" placeholder="Search">

     </div>

     <button type="submit" class="btn btn-default">提交</button>

   </form>  

  </div>

</nav>

(4)、导航栏中的按键

你能够运用 class .navbar-btn 向不在 <form> 中的 <button>
成分增加开关,按键在导航栏上垂直居中。.navbar-btn 可被利用在 <a>
和 <input> 成分上。不要在 .navbar-nav 内的 <a> 成分上运用
.navbar-btn,因为它不是行业内部的 button class。

<nav class="navbar navbar-default" role="navigation">

  <div class="navbar-header">

   <a class="navbar-brand" href="#">W3Cschool</a>

  </div>

  <div>

   <form class="navbar-form navbar-left" role="search">

     <div class="form-group">

  <input type="text" class="form-control" placeholder="Search">

 </div>

 <button type="submit" class="btn btn-default">提交按钮</button>

 </form>  

<button type="button" class="btn btn-default navbar-btn">

     导航栏按钮

   </button>

  </div>

</nav>

(5)、导航栏中的文本

如若急需在导航中涵盖文本字符串,请使用 class .navbar-text。这一般与
<p> 标签一同利用,确定保证适当的指引和颜料。

<nav class="navbar navbar-default" role="navigation">

  <div class="navbar-header">

   <a class="navbar-brand" href="#">W3Cschool</a>

  </div>

  <div>

   <p class="navbar-text">Signed in as Thomas</p>

  </div>

</nav>

(6)、非导航链接

若是您不想在正规的导航栏导航组件内使用规范的链接,那么请使用 class
navbar-link 来为默许的和倒转的导航栏选项增多适当的颜色,

<nav class="navbar navbar-default" role="navigation">

  <div class="navbar-header">

   <a class="navbar-brand" href="#">W3Cschool</a>

  </div>

  <div>

   <p class="navbar-text navbar-right">Signed in as

     <a href="#" class="navbar-link">Thomas</a>

   </p>

</div></div>

(7)、组件对齐情势

      您可以使用实用工具 class .navbar-left 或 .navbar-right
向左或向右对齐导航栏中的 导航链接、表单、开关或文本 那么些零件。这两个class 都会在钦定的方向上加多 CSS 浮动。

(8)、固定到顶上部分

Bootstrap 导航栏能够动态定位。暗许情形下,它是块级成分,它是依据在 HTML
中放置的岗位一定的。通过一些帮扶器类,您可以把它放置在页面包车型的士最上端或许尾巴部分,恐怕您能够让它形成随着页面一齐滚动的静态导航栏。倘让你想要让导航栏固定在页面包车型大巴顶上部分,请向
.navbar class 添class
.navbar-fixed-top。上边包车型大巴实例演示了这一点:为了幸免导航栏与页面主体中的其余剧情的最上端相交错,请向
<body> 标签增添至少 50
像素的内边距(padding),内边距的值能够依赖你的要求进行安装。

<nav class=”navbar navbar-default
navbar-fixed-top” role=”navigation”>

</nav>

(9)、固定到底层

一经你想要让导航栏固定在页面包车型地铁平底,请向 .navbar class 加多 class
.navbar-fixed-bottom。

<nav class=”navbar navbar-default
navbar-fixed-bottom” role=”navigation”></nav>

(10)、静态的最上部

 如需成立能随着页面一齐滚动的导航栏,请增加 .navbar-static-top class。该
class 不必要向 <body> 增多内边距(padding)。

<nav class=”navbar navbar-default
navbar-static-top” role=”navigation”>

</nav>

(11)、倒置的导航栏

     为了成立几个富含土灰背景象牙黄文本的倒置的导航栏,只要求简单地向
.navbar class 增多 .navbar-inverse class 即可,如上边包车型客车实例所示:

为了制止导航栏与页面主体中的其余剧情的最上部相交错,请向 <body>
标签增添至少 50
像素的内边距(padding),内边距的值能够依靠你的供给开始展览安装。

<nav class=”navbar navbar-inverse”
role=”navigation”></nav> 

8、Bootstrap 面包屑导航(Breadcrumbs)

     面包屑导航(Breadcrumbs)是一种基于网址档案的次序消息的呈现格局。以博客为例,面包屑导航能够展布日期、种类或标签。它们表示这段时间页面在导航档案的次序结构内的职位。

     Bootstrap 中的面包屑导航(Breadcrumbs)是二个粗略的涵盖 .breadcrumb
class 的冬日列表。分隔符会通过 CSS(bootstrap.min.css)中上边所示的
class 自动被增多:

<ol class=”breadcrumb”>

  <li><a href=”#”>Home</a></li>

  <li><a href=”#”>2013</a></li>

  <li class=”active”>十一月</li>

</ol>

9、Bootstrap 分页

(1)、分页(Pagination),是一种冬季列表,Bootstrap
像管理其余分界面成分同样管理分页。

www.hg888.com 6

(2)、翻页(Pager)

     固然你想要创建一个简约的分页链接为用户提供导航,可经过翻页来贯彻。与分页链接同样,翻页也是冬天列表。私下认可意况下,链接是居中显得。下表列出了
Bootstrap 管理翻页的 class。 

10、Bootstrap 标签

  Bootstrap
标签。标签可用于计数、提醒或页面上别样的标记突显。您能够动用修饰的 class
label-default、label-primary、label-success、label-info、label-warning、label-danger
来退换标签的外观 。

<span class=”label label-default“>暗中同意标签</span>

<span class=”label label-primary“>重要标签</span>

<span class=”label label-success“>成功标签</span>

<span class=”label label-info“>新闻标签</span>

<span class=”label label-warning“>警告标签</span>

<span class=”label label-danger“>惊险标签</span>

 www.hg888.com 7

11、Bootstrap 徽章(Badges)

 (1)、徽章与标签相似,主要的分歧在于徽章的边角尤其狡滑。

徽章(Badges)首要用于特出体现新的或未读的项。如需使用徽章,只要求把
<span class=”badge”> 增多到链接、Bootstrap
导航等这一个因素上就能够。当未有新的或未读的项时,通过 CSS 的 :empty
选取器,徽章会折叠起来,表示在那之中未有内容。

<a href=”#”>Mailbox <span
class=”badge“>50</span></a>

 www.hg888.com 8

(2)、激活导航状态

     您能够在激活状态的胶囊式导航和列表导航中放置徽章。通过运用 <span
class=”badge”> 来激活链接。

<h4>胶囊式导航中的激活状态</h4>

<ul class="nav nav-pills">

 <li class="active"><a href="#">首页 42</a></li>

  <li><a href="#">简介</a></li>

  <li><a href="#">消息 3</a></li>

</ul>

12、Bootstrap 超大荧屏(Jumbotron)

   超屏(Jumbotron)。从名称想到所包涵的意义该零件能够追加标题的高低,并为登入页面内容加多更加多的异乡距(margin)。使用超屏(Jumbotron)的步子如下:

A、创制二个分包 class .jumbotron. 的容器 <div>。

B、除了更加大的 <h1>,字体粗细 font-weight 被减为 200px。

<div class="container">

  <div class="jumbotron">

   <h1>欢迎登陆页面!</h1>

   <p>这是一个超大屏幕(Jumbotron)的实例。</p>

   <p><a class="btn btn-primary btn-lg" role="button">

     学习更多</a>

   </p>

  </div></div>

   为了博取占用全体肥瘦且不带圆角的超屏,请在富有的 .container class
外使用 .jumbotron class,

13、Bootstrap 页面标题(Page Header)

      页面标题(Page
Header)是个科学的效能,它会在网页标题四周增添适当的区间。当四个网页中有八个标题且各类标题之间需求充裕一定的间隔时,页面标题那几个效果就浮现极度有用。如需选取页面标题(Page
Header),请把您的标题放置在蕴藏 class .page-header 的 <div> 中:

<div class="page-header">

  <h1>页面标题实例

   <small>子标题</small>

  </h1>

</div>

14、Bootstrap 缩略图

(1)、Bootstrap
缩略图。大许多站点都急需在网格中布局图像、摄像、文本等。Bootstrap
通过缩略图为此提供了一种方便人民群众的方法。使用 Bootstrap
创制缩略图的步骤如下:

A、在图像相近增加带有 class .thumbnail 的 <a> 标签。

B、那会加多八个像素的内边距(padding)和二个灰黄的边框。

C、当鼠标悬停在图像上时,会动画呈现出图像的概况。

<div class="col-sm-6 col-md-3">

   <a href="#" class="thumbnail">

     <img src="/wp-content/uploads/2014/06/kittens.jpg"

     alt="通用的占位符缩略图">

   </a>

</div>

(2)、增多自定义的原委

    以往我们有了三个中央的缩略图,我们能够向缩略图增加各类 HTML
内容,比如标题、段落或开关。具体步骤如下:

A、把带有 class .thumbnail 的 <a> 标签改为 <div>。

B、在该 <div> 内,您可以加上其余你想要加多的事物。由于那是贰个<div>,大家得以行使暗中认可的依据 span 的命名法规来调动大小。

C、假诺你想要给多个图像举行分组,请把它们放置在三个冬季列表中,且每一个列表项向左浮动。

15、Bootstrap 警告(Alerts)

提个醒(Alerts)以及 Bootstrap 所提供的用于警示的
class。警告(Alerts)向用户提供了一种概念音讯样式的法子。它们为天下无敌的用户操作提供了上下文消息叙述。您可认为警告框增加三个可选的关门按键。为了成立贰个内联的可收回的警示框,请使用
警告(Alerts) jQuery 插件。

你能够经过创立一个 <div>,并向其增加四个 .alert class 和多个上下文
class(即
.alert-success、.alert-info、.alert-warning、.alert-danger)之一,来增加一个主导的警告框。

<div class=”alert
alert-success
“>成功!很好地做到了付出。</div>

<div class=”alert
alert-info
“>新闻!请留意这些新闻。</div>

<div class=”alert
alert-warning
“>警告!请不要提交。</div>

<div class=”alert
alert-danger
“>错误!请进行部分更换。</div>

(1)、可收回的警示(Dismissal Alerts)

   创立八个可撤消的告诫(Dismissal Alert)步骤如下:

   A、通过创立贰个 <div>,并向其丰盛二个 .alert class 和四个上下文
class(即
.alert-success、.alert-info、.alert-warning、.alert-danger)之一,来增加壹其中央的警告框。

   B、同不平日候向上边的 <div> class 增多可选的 .alert-dismissable。

   C、加多贰个闭馆按键。

<div class="alert alert-success alert-dismissable">

  <button type="button" class="close" data-dismiss="alert"

   aria-hidden="true">

   ×

  </button>

  成功!很好地完成了提交。

</div>

(2)、警告(Alerts)中的链接

    在警告(Alerts)中开创链接的步调如下:

    A、通过创办三个 <div>,并向其丰硕三个 .alert class
和多少个上下文 class(即
.alert-success、.alert-info、.alert-warning、.alert-danger)之一,来加多二个大旨的警告框。

     B、使用 .alert-link 实体类来急迅提供含有相配颜色的链接。

<div class=”alert alert-success“>

   <a href=”#”
class=”alert-link“>成功!很好地产生了交给。</a>

</div>

16、Bootstrap 进度条

   本章将教师 Bootstrap 进程条。在本教程中,您将看到什么样行使 Bootstrap
成立加载、重定向或动作场所包车型客车进度条。

   Bootstrap 进程条使用 CSS3 过渡和动画片来博取该效用。Internet Explorer 9
及后面包车型地铁本子和旧版的 Firefox 不援助该本性,Opera 12 不辅助动画。

(1)、暗中同意的进程条

制造一个基本的进程条的手续如下:

A、增多三个包罗 class .progress 的 <div>。

B、接着,在上面的 <div> 内,增添三个包含 class .progress-bar
的空的 <div>。

C、增多叁个涵盖百分比表示的上涨的幅度的 style 属性,举例 style=”五分之三”;
表示进度条在 百分之四十 的职位。

<div class="progress">

  <div class="progress-bar" role="progressbar" aria-valuenow="60"

   aria-valuemin="0" aria-valuemax="100" style="width: 40%;">

   40% 完成

  </div>

</div>

(2)、交替的进度条

开创不一样体制的进程条的步骤如下:

A、增加贰个涵盖 class .progress 的 <div>。

B、接着,在地点的 <div> 内,增加贰个蕴涵 class .progress-bar 和
class progress-bar-* 的空的 <div>。其中,* 可以是
success、info、warning、danger。

C、增多二个满含百分比表示的幅度的 style 属性,举个例子 style=”四分之一”;
表示进程条在 伍分叁 的职位。

<div class="progress">

  <div class="progress-bar progress-bar-success" role="progressbar"

   aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

   style="width: 90%;">

   90% 完成(成功)

  </div>

</div>

(3)、条纹的进程条

创办二个条纹的进程条的步骤如下:

A、加多多个满含 class .progress 和 .progress-striped 的 <div>。

B、接着,在上边的 <div> 内,加多八个带有 class .progress-bar 和
class progress-bar-* 的空的 <div>。其中,* 可以是
success、info、warning、danger。

C、加多一个包涵百分比表示的大幅的 style 属性,比方 style=”五分之二”;
表示进程条在 四分之一 的职位。

<div class="progress progress-striped">

  <div class="progress-bar progress-bar-success" role="progressbar"

   aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

   style="width: 90%;">

   90% 完成(成功)

  </div>

</div>

(4)、动画的进度条

制造多个动画的进程条的步调如下:

A、加多一个分包 class .progress 和 .progress-striped 的
<div>。同不时候丰硕 class .active。

B、接着,在上边的 <div> 内,增加叁个带有 class .progress-bar
的空的 <div>。

C、增加七个包括百分比表示的上升的幅度的 style 属性,比如 style=”百分之二十”;
表示进程条在 30% 的岗位。

那将会使条纹具有从右向左的运动感。

<div class="progress progress-striped active">

  <div class="progress-bar progress-bar-success" role="progressbar"

   aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

   style="width: 40%;">

   40% 完成

  </div>

</div>

(5)、堆成堆的进程条

您还能积聚四个进程条。把四个进程条放在一样的 .progress
中就能够兑现聚成堆,

17、Bootstrap 多媒体对象(Media Object)

     Bootstrap 中的多媒体对象(Media
Object)。那些抽象的靶子样式用于创立各类别型的零部件(举例:博客商议),大家能够在组件中运用图像和文字混排,图像能够左对齐大概右对齐。媒体对象能够用更加少的代码来落到实处媒体对象与文字的混排。

    媒体对象轻量标志、易于扩大的特色是通过向轻巧的标识应用 class
来完毕的。你能够在 HTML 标签中丰硕以下三种样式来安装媒体对象:

A、.media:该 class
允许将媒体对象里的多媒体(图像、录像、音频)浮动到剧情区块的左侧恐怕左边。

B、.media-list:若是您需要二个列表,各样内容是冬季列表的一有个别,能够应用该
class。可用于商酌列表与文章列表。

<div class="media">

 <a class="pull-left" href="#">

  <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"

   alt="媒体对象">

  </a>

  <div class="media-body">

   <h4 class="media-heading">媒体标题</h4>

   这是一些示例文本。这是一些示例文本。 

  </div>

</div>

 18、Bootstrap 列表组

   列表组件用于以列表格局表现复杂的和自定义的开始和结果。创设四个基本的列表组的手续如下:

A、向元素 <ul> 添加 class .list-group。

B、向 <li> 添加 class .list-group-item。

<ul class="list-group">

  <li class="list-group-item">免费域名注册</li>

  <li class="list-group-item">免费 Window 空间托管</li>

</ul>

(1)、向列表组加多徽章

   大家得以向自由的列表项增多徽章组件,它会活动定位到左手。只须求在
<li> 成分中增添 <span class=”badge”> 就能够。

<ul class="list-group">

  <li class="list-group-item">免费域名注册</li>

  <li class="list-group-item">新

   24*7 支持

  </li>

</ul>

(2)、向列表组增添链接

   通过行使锚标签替代列表项,大家得以向列表组增多链接。咱们须要使用
<div> 取代 <ul> 成分。

<a href=”#” class=”list-group-item“>24*7 支持</a>

<a href=”#” class=”list-group-item“>无需付费 Window
空间托管</a>

(3)、向列表组增加自定义内容

咱俩得以向地点已增加链接的列表组增多大肆的 HTML 内容。

19、Bootstrap 面板(Panels)

Bootstrap 面板(Panels)。面板组件用于把 DOM
组件插入到三个盒子中。创制贰个大旨的面板,只需求向 <div> 成分增加class .panel 和 class .panel-default 就能够,

<div class="panel panel-default">

  <div class="panel-body">

   这是一个基本的面板

  </div>

</div>

(1)、面板标题

    我们得以因而以下三种方式来增多面板标题:

A、使用 .panel-heading class 能够很轻松地向面板增多标题容器。

B、使用带有 .panel-title class 的 <h1>-<h6>
来加多预约义样式的标题。

<div class="panel panel-default">

  <div class="panel-heading">不带 title 的面板标题</div>

  <div class="panel-body">面板内容</div>

</div>

(2)、面板脚注

     大家能够在面板中加多脚注,只供给把按键也许副文本放在带有 class
.panel-footer 的 <div> 中就可以。

<div class="panel panel-default">

  <div class="panel-body">这是一个基本的面板</div>

  <div class="panel-footer">面板脚注</div>

</div>

(3)、带语境色彩的面板

     使用语境状态类
panel-primary、panel-success、panel-info、panel-warning、panel-danger,来安装带语境色彩的面板。

<div class="panel panel-primary">

  <div class="panel-heading">

   <h3 class="panel-title">面板标题</h3>

  </div>

  <div class="panel-body"> 这是一个基本的面板</div>

</div>

 

(4)、带表格的面板

  为了在面板中开创八个无边框的表格,大家能够在面板中应用 class
.table。借使有个 <div> 包涵.panel-body,大家可以向表格的顶端增添额外的边框用来分隔。若无包蕴.panel-body 的 <div>,则组件会无间断地从面板尾部活动到表格。

<div class="panel panel-default">

  <div class="panel-heading">

   <h3 class="panel-title">面板标题</h3>

  </div>

  <div class="panel-body">这是一个基本的面板 </div>

  <table class="table">

   <th>产品</th><th>价格 </th>

   <tr><td>产品 A</td><td>200</td></tr>

   <tr><td>产品 B</td><td>400</td></tr>

  </table>

</div>

(5)、带列表组的面板

    大家得以在其余面板中包罗列表组,通过在 <div> 元素中增多 .panel
和 .panel-default 类来创建面板,并在面板中增多列表组。

<div class="panel panel-default">

  <div class="panel-heading">面板标题</div>

   <div class="panel-body">

     <p>这是一个基本的面板内容。</p>

  </div>

  <ul class="list-group">

   <li class="list-group-item">免费域名注册</li>

   <li class="list-group-item">每年更新成本</li>

  </ul>

</div>

20、Bootstrap Well

     Well 是一种会唤起内容凹陷呈现或插图效果的容器 <div>。为了成立Well,只须求简单地把内容放在带有 class .well 的 <div> 中就可以。

<div class=”well“>您好,我在 Well 中!</div>

(1)、尺寸大小

你能够运用可选类 well-lg 或 well-sm 来改造 Well 的尺寸大小。那多个类是与
.well 类结合使用的。那七个类会影响内边距(padding),依据使用的类,Well
会展现得更加大依然越来越小。

<div class=”well well-lg“>您好,笔者在大的 Well 中!</div>

<div class=”well well-sm“>您好,笔者在小的 Well 中!</div>

上述便是本文的全体内容,希望对大家的读书抱有扶助,也冀望大家多多帮忙帮客之家。

布局组件(全),bootstrap布局组件
Bootstrap布局组件 1、 Bootstrap字体Logo (1)、字体Logo列表链接

  <ul >
    <li ><a >首页</a></li>
    <li><a >简介</a></li>
    <li><a >详情</a></li>
  </ul>

9.5.课程商议

 (1)course-comments.html照样承继base.html

www.hg888.com 9

www.hg888.com 10

www.hg888.com 11{%
extends ‘base.html’ %} {% load staticfiles %} {% block title
%}公开课争持{% endblock %} {% block custom_bread %} <section>
<div class=”wp”> <div class=”crumbs”> <ul>
<li><a href=”index.html”>首页</a>></li>
<li><a href=”{% url ‘course:course_list’
%}”>公开课程</a>></li> <li><a href=”{% url
‘course:course_detail’ course.id
%}”>公开课程</a>></li> <li>课程商量</li>
</ul> </div> </div> </section> {% endblock %} {%
block custom_css %} <link rel=”stylesheet” type=”text/css” href=”{%
static ‘css/muke/course/learn-less.css’ %}” /> <link
rel=”stylesheet” type=”text/css” href=”{% static
‘css/muke/course/course-comment.css’ %}” /> <link rel=”stylesheet”
type=”text/css” href=”{%%20static%20’css/muke/base.css’%20%}”> <link
rel=”stylesheet” type=”text/css” href=”{% static
‘css/muke/common-less.css’ %}”> <link rel=”stylesheet”
type=”text/css” href=”{% static ‘css/muke/course/common-less.css’
%}”> <link rel=”stylesheet” type=”text/css” href=”{% static
‘css/mooc.css’ %}” /> {% endblock %} {% block content %} <div
id=”main”> <div class=”course-infos”> <div class=”w pr”>
<div style=”height: 15px” class=”path”> </div> <div
class=”hd”> <h2 class=”l”>django与vuejs实战项目2</h2>
</div> <div class=”statics clearfix”> <div
class=”static-item “> <span
class=”meta-value”><strong>高端</strong></span>
<span class=”meta”>难度</span> <em></em>
</div> <div class=”static-item static-time”> <span
class=”meta-value”>0分钟</span> <span
class=”meta”>时间长度</span> <em></em> </div>
<div class=”static-item”> <span
class=”meta-value”><strong>12</strong></span>
<span class=”meta”>学习人数</span> <em></em>
</div> </div> </div> </div> <div
class=”course-info-main clearfix w has-progress”> <div
class=”info-bar clearfix”> <div class=”content-wrap clearfix”>
<div class=”content”> <div class=”mod-tab-menu”> <ul
class=”course-menu clearfix”> <li><a class=”ui-tabs-active ”
id=”learnOn”
href=”course-video.html”><span>章节</span></a></li>
<li><a id=”commentOn” class=”active”
href=”course-comment.html”><span>商量</span></a></li>
</ul> </div> <!–宣布商议–> <div
id=”js-pub-container” class=”issques clearfix js-form”> <div
class=”wgt-ipt-wrap pub-editor-wrap ” id=”js-pl-input-fake”>
<textarea id=”js-pl-textarea” class=””
placeholder=”扯淡、吐槽、称赞、鼓励……想说吗就说吗!”
></textarea> </div> <input type=”button”
id=”js-pl-submit” class=”pub-btn” data-cid=”452″ value=”公布争执”>
<p class=”global-errortip js-global-error”></p> </div>
<div id=”course_note”> <ul class=”mod-post”
id=”comment-list”> <li class=”post-row”> <div
class=”media”> <span target=”_blank”><img
src=’../media/image/2016/12/default_big_14.png’ width=’40’ height=’40’
/></span> </div> <div class=”bd”> <div
class=”tit”> <span target=”_blank”>bobby</span>
</div> <p
class=”cnt”>看到第三章了,就算有个别知识还不是听得很懂,可是认为很有用的样子,想的是先听完二回再说。然后再来听第三回。最后想说老师棒棒哒!!!</p>
<div class=”footer clearfix”> <span title=”创制时间” class=”l
timeago”>时间:二〇一四年11月三日 22:14</span> </div>
</div> </li> <li class=”post-row”> <div
class=”media”> <span target=”_blank”><img
src=’../media/image/2016/12/default_big_14.png’ width=’40’ height=’40’
/></span> </div> <div class=”bd”> <div
class=”tit”> <span target=”_blank”>bobby</span>
</div> <p
class=”cnt”>老师你讲的很好,很盼望下一次的科目。笔者有个不荒谬,jedi笔者用git
clone 和 apt-get 都装上了,:help jedi-vim ,提醒笔者E149: 抱歉,未有jedi-vim
的认证,补全也无法用,有一点搞不清楚了。笔者设置vim插件python-mode也不可能用…</p>
<div class=”footer clearfix”> <span title=”创设时间” class=”l
timeago”>时间:二零一六年1月18日 22:13</span> </div>
</div> </li> <li class=”post-row”> <div
class=”media”> <span target=”_blank”><img
src=’../media/image/2016/12/default_big_14.png’ width=’40’ height=’40’
/></span> </div> <div class=”bd”> <div
class=”tit”> <span target=”_blank”>bobby</span>
</div> <p class=”cnt”>你好。作者在看7.3节
关于选拔上下文管理的卓殊例子。关于telnetlib库使用的一对主题素材。
Telnet.read_until(expected, timeout=None)
;使用那么些艺术轻易卡在输入登入用户名的任务就不实践了。纵然telnet到目的主机,借使提示符不是login
,就不能够登入吗?</p> <div class=”footer clearfix”> <span
title=”创制时间” class=”l timeago”>时间:二〇一六年四月二七日22:13</span> </div> </div> </li> <li
class=”post-row”> <div class=”media”> <span
target=”_blank”><img
src=’../media/image/2016/12/default_big_14.png’ width=’40’ height=’40’
/></span> </div> <div class=”bd”> <div
class=”tit”> <span target=”_blank”>bobby</span>
</div> <p
class=”cnt”>精品,老早已听大夫的课了,此番的课程又让自己长见识了,就如别的同学说的那么,如此轻易的实现炫彩动画的方法让自个儿感动,连忙学完录制内容好去贯彻那10个职分,到时候希望徐大神好好教导教导本身,假设学完后能给自家个行当推荐什么的就越来越好了,二零一七年就起来实习了!老恐慌了–</p>
<div class=”footer clearfix”> <span title=”创立时间” class=”l
timeago”>时间:二零一五年7月11日 22:12</span> </div>
</div> </li> <li class=”post-row”> <div
class=”media”> <span target=”_blank”><img
src=’../media/image/2016/12/default_big_14.png’ width=’40’ height=’40’
/></span> </div> <div class=”bd”> <div
class=”tit”> <span target=”_blank”>bobby</span>
</div> <p class=”cnt”>测验一下</p> <div
class=”footer clearfix”> <span title=”创设时间” class=”l
timeago”>时间:2015年一月四日 22:11</span> </div>
</div> </li> <li class=”post-row”> <div
class=”media”> <span target=”_blank”><img
src=’../media/image/2016/12/default_big_14.png’ width=’40’ height=’40’
/></span> </div> <div class=”bd”> <div
class=”tit”> <span target=”_blank”>bobby</span>
</div> <p class=”cnt”>好</p> <div class=”footer
clearfix”> <span title=”成立时间” class=”l
timeago”>时间:二〇一四年十二月8日 22:07</span> </div>
</div> </li> <li class=”post-row”> <div
class=”media”> <span target=”_blank”><img
src=’../media/image/2016/12/default_big_14.png’ width=’40’ height=’40’
/></span> </div> <div class=”bd”> <div
class=”tit”> <span target=”_blank”>bobby</span>
</div> <p class=”cnt”>好</p> <div class=”footer
clearfix”> <span title=”创造时间” class=”l
timeago”>时间:2015年1月8日 22:07</span> </div>
</div> </li> <li class=”post-row”> <div
class=”media”> <span target=”_blank”><img
src=’../media/image/2016/12/default_big_14.png’ width=’40’ height=’40’
/></span> </div> <div class=”bd”> <div
class=”tit”> <span target=”_blank”>bobby</span>
</div> <p class=”cnt”>好</p> <div class=”footer
clearfix”> <span title=”创造时间” class=”l
timeago”>时间:二〇一四年10月8日 22:06</span> </div>
</div> </li> <li class=”post-row”> <div
class=”media”> <span target=”_blank”><img
src=’../media/image/2016/12/default_big_14.png’ width=’40’ height=’40’
/></span> </div> <div class=”bd”> <div
class=”tit”> <span target=”_blank”>bobby</span>
</div> <p class=”cnt”>再来一遍</p> <div
class=”footer clearfix”> <span title=”创建时间” class=”l
timeago”>时间:二零一四年八月5日 23:18</span> </div>
</div> </li> <li class=”post-row”> <div
class=”media”> <span target=”_blank”><img
src=’../media/image/2016/12/default_big_14.png’ width=’40’ height=’40’
/></span> </div> <div class=”bd”> <div
class=”tit”> <span target=”_blank”>bobby</span>
</div> <p class=”cnt”>good </p> <div class=”footer
clearfix”> <span title=”创设时间” class=”l
timeago”>时间:2015年十一月5日 23:18</span> </div>
</div> </li> <li class=”post-row”> <div
class=”media”> <span target=”_blank”><img
src=’../media/image/2016/12/default_big_14.png’ width=’40’ height=’40’
/></span> </div> <div class=”bd”> <div
class=”tit”> <span target=”_blank”>bobby</span>
</div> <p class=”cnt”>讲的很不错</p> <div
class=”footer clearfix”> <span title=”创设时间” class=”l
timeago”>时间:2016年三月5日 23:13</span> </div>
</div> </li> <li class=”post-row”> <div
class=”media”> <span target=”_blank”><img
src=’../media/image/2016/12/default_big_14.png’ width=’40’ height=’40’
/></span> </div> <div class=”bd”> <div
class=”tit”> <span target=”_blank”>bobby</span>
</div> <p class=”cnt”>给问问</p> <div class=”footer
clearfix”> <span title=”创制时间” class=”l
timeago”>时间:二〇一四年5月5日 23:09</span> </div>
</div> </li> </ul> </div> </div> <div
class=”aside r”> <div class=”bd”> <div class=”box mb40″>
<h4>资料下载</h4> <ul class=”downlist”> <li>
<span ><i class=”aui-iconfont
aui-icon-file”></i>  前端页面</span> <a
href=”../media/course/resource/二零一五/11/media.zip” class=”downcode”
target=”_blank” download=”” data-id=”274″ title=””>下载</a>
</li> </ul> </div> <div class=”box mb40″>
<h4>教师提醒</h4> <div class=”teacher-info”> <a
href=”/u/315464/courses?sort=publish” target=”_blank”> <img
src=’../media/teacher/2016/11/aobama_CXWwMef.png’ width=’80’
height=’80’ /> </a> <span class=”tit”> <a
href=”/u/315464/courses?sort=publish”
target=”_blank”>bobby</a> </span> <span
class=”job”>xxx</span> </div> <div
class=”course-info-tip”> <dl class=”first”>
<dt>课程须知</dt> <dd
class=”autowrap”>python基础你需求有</dd> </dl> <dl>
<dt>老师告诉你能学到什么?</dt> <dd
class=”autowrap”>django的晋级开辟</dd> </dl> </div>
</div> <div class=”cp-other-learned js-comp-tabs”> <div
class=”cp-header clearfix”> <h2 class=”cp-tit
l”>该课的校友还学过</h2> </div> <div
class=”cp-body”> <div class=”cp-tab-pannel js-comp-tab-pannel”
data-pannel=”course” style=”display: block”> <!– img 200 x 112
–> <ul class=”other-list”> <li class=”curr”> <a
href=”/view/85?src=sug” target=”_blank”> <img
src=””
alt=”Java入门第一季”> <span class=”name
autowrap”>Java入门第一季</span> </a> </li>
<li> <a href=”/view/110?src=sug” target=”_blank”> <img
src=””
alt=”Java入门第三季”> <span class=”name
autowrap”>Java入门第三季</span> </a> </li>
<li> <a href=”/view/124?src=sug” target=”_blank”> <img
src=””
alt=”Java入门第二季”> <span class=”name
autowrap”>Java入门第二季</span> </a> </li>
<li> <a href=”/view/47?src=sug” target=”_blank”> <img
src=””
alt=”Spring MVC起步”> <span class=”name autowrap”>Spring
MVC起步</span> </a> </li> <li> <a
href=”/view/36?src=sug” target=”_blank”> <img
src=””
alt=”JavaScript入门篇”> <span class=”name
autowrap”>JavaScript入门篇</span> </a> </li>
</ul> </div> <div class=”cp-tab-pannel
js-comp-tab-pannel” data-pannel=”plan”> <ul class=”other-list”>
<li class=”curr”> <a
href=”/course/programdetail/pid/31?src=sug” target=”_blank”> <img
src=””
alt=”Java工程师”> <span class=”name
autowrap”>Java工程师</span> </a> </li> </ul>
</div> </div> </div> </div> </div>
</div> <div class=”clear”></div> </div>
</div> </div> {% endblock %} course-comments.html

(2)url和视图

#课程评论
    re_path('comment/(?P<course_id>\d+)/', CommentsView.as_view(), name="course_comments"),

class CommentsView(View):
    '''课程评论'''
    def get(self, request, course_id):
        course = Course.objects.get(id=int(course_id))
        all_resources = CourseResource.objects.filter(course=course)
        all_comments = CourseComments.objects.all()
        return render(request, "course-comment.html", {
            "course": course,
            "all_resources": all_resources,
            'all_comments':all_comments,
        })

(3)增多链接

在course-vedio.html中修改 “章节”和“评论”的链接

<div class="mod-tab-menu">
                    <ul class="course-menu clearfix">
                        <li><a class="ui-tabs-active active" id="learnOn"  href="{%%20url%20'course:course_info'%20course.id%20%}">章节</a></li>
                        <li><a id="commentOn" class="" href="{%%20url%20'course:course_comments'%20course.id%20%}">评论</a></li>
                    </ul>
                </div>

接下来把争辩页跟章节页的同一(‘课程’,‘资料下载’,‘教授提示’)的地点一向果茶过来

 

(4)加多钻探

丰裕批评的url和后台管理View

#添加评论
    path('add_comment/', AddCommentsView.as_view(), name="add_comment"),

#添加评论
class AddCommentsView(View):
    '''用户评论'''
    def post(self, request):
        if not request.user.is_authenticated:
            # 未登录时返回json提示未登录,跳转到登录页面是在ajax中做的
            return HttpResponse('{"status":"fail", "msg":"用户未登录"}', content_type='application/json')
        course_id = request.POST.get("course_id", 0)
        comments = request.POST.get("comments", "")
        if int(course_id) > 0 and comments:
            # 实例化一个course_comments对象
            course_comments = CourseComments()
            # 获取评论的是哪门课程
            course = Course.objects.get(id = int(course_id))
            # 分别把评论的课程、评论的内容和评论的用户保存到数据库
            course_comments.course = course
            course_comments.comments = comments
            course_comments.user = request.user
            course_comments.save()
            return HttpResponse('{"status":"success", "msg":"评论成功"}', content_type='application/json')
        else:
            return HttpResponse('{"status":"fail", "msg":"评论失败"}', content_type='application/json')

前端Ajax增加用户的评头品足

{% block custom_js %}
    <script type="text/javascript">
    //添加评论
    $('#js-pl-submit').on('click', function(){
        var comments = $("#js-pl-textarea").val()
        if(comments == ""){
            alert("评论不能为空")
            return
        }
        $.ajax({
            cache: false,
            type: "POST",
            url:"{% url 'course:add_comment' %}",
            data:{'course_id':{{ course.id }}, 'comments':comments},
            async: true,
            beforeSend:function(xhr, settings){
                xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
            },
            success: function(data) {
                if(data.status == 'fail'){
                    if(data.msg == '用户未登录'){
                        window.location.href="/login/";
                    }else{
                        alert(data.msg)
                    }

                }else if(data.status == 'success'){
                    window.location.reload();//刷新当前页面.
                }
            },
        });
    });

</script>
{% endblock %}

 

 展现商酌的音讯

<div id="course_note">
                            <ul class="mod-post" id="comment-list">
                                {% for user_comment in all_comments %}
                                    <li class="post-row">
                                        <div class="media">
                                        <img src='{{ MEDIA_URL }}{{ user_comment.user.image }}'
                                                                   width='40' height='40'/>
                                        </div>
                                        <div class="bd">
                                            <div class="tit">
                                                {{ user_comment.user.username }}
                                            </div>
                                            <p class="cnt">
                                                {{ user_comment.comments }}
                                            <div class="footer clearfix">
                                                时间:{{ user_comment.add_time }}
                                            </div>
                                        </div>
                                    </li>
                                {% endfor %}


                            </ul>
                        </div>

www.hg888.com 12

www.hg888.com 13{%
extends ‘base.html’ %} {% load staticfiles %} {% block title
%}公开课商量{% endblock %} {% block custom_bread %} <section>
<div class=”wp”> <div class=”crumbs”> <ul>
<li><a href=”index.html”>首页</a>></li>
<li><a href=”{% url ‘course:course_list’
%}”>公开课程</a>></li> <li><a href=”{% url
‘course:course_detail’ course.id
%}”>公开课程</a>></li> <li>课程商讨</li>
</ul> </div> </div> </section> {% endblock %} {%
block custom_css %} <link rel=”stylesheet” type=”text/css” href=”{%
static ‘css/muke/course/learn-less.css’ %}”/> <link
rel=”stylesheet” type=”text/css” href=”{% static
‘css/muke/course/course-comment.css’ %}”/> <link rel=”stylesheet”
type=”text/css” href=”{%%20static%20’css/muke/base.css’%20%}”> <link
rel=”stylesheet” type=”text/css” href=”{% static
‘css/muke/common-less.css’ %}”> <link rel=”stylesheet”
type=”text/css” href=”{% static ‘css/muke/course/common-less.css’
%}”> <link rel=”stylesheet” type=”text/css” href=”{% static
‘css/mooc.css’ %}”/> {% endblock %} {% block content %} <div
id=”main”> <div class=”course-infos”> <div class=”w pr”>
<div style=”height: 15px” class=”path”> </div> <div
class=”hd”> <h2 class=”l”>{{ course.name }}</h2>
</div> <div class=”statics clearfix”> <div
class=”static-item “> <span class=”meta-value”><strong>{{
course.get_degree_display }}</strong></span> <span
class=”meta”>难度</span> <em></em> </div>
<div class=”static-item static-time”> <span
class=”meta-value”>{{ course.learn_times }}分钟</span>
<span class=”meta”>时长</span> <em></em>
</div> <div class=”static-item”> <span
class=”meta-value”><strong>{{ course.students
}}</strong></span> <span
class=”meta”>学习人数</span> <em></em> </div>
</div> </div> </div> <div class=”course-info-main
clearfix w has-progress”> <div class=”info-bar clearfix”>
<div class=”content-wrap clearfix”> <div class=”content”>
<div class=”mod-tab-menu”> <ul class=”course-menu clearfix”>
<li><a class=”ui-tabs-active active” id=”learnOn” href=”{% url
‘course:course_info’ course.id
%}”><span>章节</span></a></li>
<li><a id=”commentOn” class=”” href=”{% url
‘course:course_comments’ course.id
%}”><span>评论</span></a></li> </ul>
</div> <!–发表探讨–> <div id=”js-pub-container”
class=”issques clearfix js-form”> <div class=”wgt-ipt-wrap
pub-editor-wrap ” id=”js-pl-input-fake”> <textarea
id=”js-pl-textarea” class=””
placeholder=”来讲点啥呗!!!”></textarea> </div>
<input type=”button” id=”js-pl-submit” class=”pub-btn” data-cid=”452″
value=”发布商讨”> <p class=”global-errortip
js-global-error”></p> </div> <div
id=”course_note”> <ul class=”mod-post” id=”comment-list”> {%
for user_comment in all_comments %} <li class=”post-row”>
<div class=”media”> <span target=”_blank”><img src='{{
MEDIA_URL }}{{ user_comment.user.image }}’ width=’40’
height=’40’/></span> </div> <div class=”bd”>
<div class=”tit”> <span target=”_blank”>{{
user_comment.user.username }}</span> </div> <p
class=”cnt”> {{ user_comment.comments }} <div class=”footer
clearfix”> <span title=”创制时间” class=”l timeago”>时间:{{
user_comment.add_time }}</span> </div> </div>
</li> {% endfor %} </ul> </div> </div> <div
class=”aside r”> <div class=”bd”> <div class=”box mb40″>
<h4>资料下载</h4> <ul class=”downlist”> {% for
course_resource in all_resources %} <li> <span><i
class=”aui-iconfont aui-icon-file”></i>  {{
course_resource.name }}</span> <a href=”{{ MEDIA_URL }}{{
course_resource.download }}” class=”downcode” target=”_blank”
download=”” data-id=”274″ title=””>下载</a> </li> {%
endfor %} </ul> </div> <div class=”box mb40″>
<h4>教师提醒</h4> <div class=”teacher-info”> <a
href=”/u/315464/courses?sort=publish” target=”_blank”> <img
src='{{ MEDIA_URL }}{{ course.teacher.image }}’ width=’80’
height=’80’/> </a> <span class=”tit”> <a
href=”/u/315464/courses?sort=publish” target=”_blank”>{{
course.teacher.name }}</a> </span> <span
class=”job”>{{ course.teacher.work_position }}</span>
</div> <div class=”course-info-tip”> <dl
class=”first”> <dt>课程须知</dt> <dd
class=”autowrap”>{{ course.youneed_know }}</dd> </dl>
<dl> <dt>老师告诉您能学到什么?</dt> <dd
class=”autowrap”>{{ course.teacher_tell }}</dd> </dl>
</div> </div> <div class=”cp-other-learned
js-comp-tabs”> <div class=”cp-header clearfix”> <h2
class=”cp-tit l”>该课的同校还学过</h2> </div> <div
class=”cp-body”> <div class=”cp-tab-pannel js-comp-tab-pannel”
data-pannel=”course” style=”display: block”> <!– img 200 x 112
–> <ul class=”other-list”> <li class=”curr”> <a
href=”/view/85?src=sug” target=”_blank”> <img
src=””
alt=”Java入门第一季”> <span class=”name
autowrap”>Java入门第一季</span> </a> </li>
<li> <a href=”/view/110?src=sug” target=”_blank”> <img
src=””
alt=”Java入门第三季”> <span class=”name
autowrap”>Java入门第三季</span> </a> </li>
<li> <a href=”/view/124?src=sug” target=”_blank”> <img
src=””
alt=”Java入门第二季”> <span class=”name
autowrap”>Java入门第二季</span> </a> </li>
<li> <a href=”/view/47?src=sug” target=”_blank”> <img
src=””
alt=”Spring MVC起步”> <span class=”name autowrap”>Spring
MVC起步</span> </a> </li> <li> <a
href=”/view/36?src=sug” target=”_blank”> <img
src=””
alt=”JavaScript入门篇”> <span class=”name
autowrap”>JavaScript入门篇</span> </a> </li>
</ul> </div> <div class=”cp-tab-pannel
js-comp-tab-pannel” data-pannel=”plan”> <ul class=”other-list”>
<li class=”curr”> <a
href=”/course/programdetail/pid/31?src=sug” target=”_blank”> <img
src=””
alt=”Java工程师”> <span class=”name
autowrap”>Java工程师</span> </a> </li> </ul>
</div> </div> </div> </div> </div>
</div> <div class=”clear”></div> </div>
</div> </div> {% endblock %} {% block custom_js %}
<script type=”text/javascript”> //增加商量$(‘#js-pl-submit’).on(‘click’, function(){ var comments =
$(“#js-pl-textarea”).val() if(comments == “”){ alert(“争持不能够为空”)
return } $.ajax({ cache: false, type: “POST”, url:”{% url
‘course:add_comment’ %}”, data:{‘course_id’:{{ course.id }},
‘comments’:comments}, async: true, beforeSend:function(xhr, settings){
xhr.setRequestHeader(“X-CSRFToken”, “{{ csrf_token }}”); }, success:
function(data) { if(data.status == ‘fail’){ if(data.msg ==
‘用户未登陆’){ window.location.href=”/login/”; }else{ alert(data.msg) }
}else if(data.status == ‘success’){
window.location.reload();//刷新当前页面. } }, }); }); </script> {%
endblock %} course-comment.html

 

九、课程章节音信 9.1.模板和urls 拷贝course-comments.html 和
course-video.html放入 templates目录下 先…

带语境色彩的面板:

<div >     <div >        <h3 >面板标题</h3>     </div>     <div >        这是一个基本的面板     </div>  </div>  <div >     <div >        <h3 >面板标题</h3>     </div>     <div >        这是一个基本的面板     </div>  </div>  <div >     <div >        <h3 >面板标题</h3>     </div>     <div >        这是一个基本的面板     </div>  </div>  <div >     <div >        <h3 >面板标题</h3>     </div>     <div >        这是一个基本的面板     </div>  </div>  <div >     <div >        <h3 >面板标题</h3>     </div>     <div >        这是一个基本的面板     </div>  </div>

  <ol >
    <li><a >首页</a></li>
    <li><a >资料库</a></li>
    <li >数据</li>
  </ol>

9.1.模板和urls

 拷贝course-comments.html 和 course-video.html放入 templates目录下

先改course-video.html,一样一连base.html,然后里面有属于自身的体制,也要保存

www.hg888.com 14

 

(1)配置url和视图

  # 课程章节信息页
    re_path('info/(?P<course_id>\d+)/', CourseInfoView.as_view(), name="course_info"),

class CourseInfoView(View):
    '''课程章节信息'''
    def get(self, request, course_id):
        course = Course.objects.get(id=int(course_id))
        return render(request, "course-video.html", {
            "course": course,
        })

(2)配置相关的链接

先是修改course-vedio.html中custom_bread里面包车型客车链接

{% block custom_bread %}
    <section>
        <div class="wp">
        <div class="crumbs">
            <ul>
                <li><a href="index.html">首页</a>></li>
                <li><a href="{%%20url%20'course:course_list'%20%}">公开课程</a>></li>
                <li><a href="{%%20url%20'course:course_detail'%20course.id%20%}">课程详情</a>></li>
                <li>章节信息</li>
            </ul>
        </div>
    </div>
    </section>
{% endblock %}

www.hg888.com 15{%
extends ‘base.html’ %} {% load staticfiles %} {% block title
%}课程列表{% endblock %} {% block custom_bread %} <section>
<div class=”wp”> <div class=”crumbs”> <ul>
<li><a href=”index.html”>首页</a>></li>
<li><a href=”{% url ‘course:course_list’
%}”>公开课程</a>></li> <li><a href=”{% url
‘course:course_detail’ course.id
%}”>公开课程</a>></li> <li>课程详细的情况</li>
</ul> </div> </div> </section> {% endblock %} {%
block css_learn %} <link rel=”stylesheet” type=”text/css” href=”{%
static ‘css/muke/base.css’ %}” /> <link rel=”stylesheet”
type=”text/css” href=”{%%20static%20’css/muke/common-less.css’%20%}” />
<link rel=”stylesheet” type=”text/css” href=”{% static
‘css/muke/course/learn-less.css’ %}” /> <link rel=”stylesheet”
type=”text/css” href=”{% static ‘css/muke/course/common-less.css’
%}”> <link rel=”stylesheet” type=”text/css” href=”{% static
‘css/mooc.css’ %}” /> <link rel=”stylesheet” type=”text/css”
href=”{%%20static%20’css/aui.css’%20%}” /> {% endblock %} {% block content
%} <div id=”main”> <div class=”course-infos”> <div
class=”w pr”> <div style=”height: 15px” class=”path”>
</div> <div class=”hd”> <h2
class=”l”>django与vuejs实战项目2</h2> </div> <div
class=”statics clearfix”> <div class=”static-item “> <span
class=”meta-value”><strong>高档</strong></span>
<span class=”meta”>难度</span> <em></em>
</div> <div class=”static-item static-time”> <span
class=”meta-value”>0分钟</span> <span
class=”meta”>时间长度</span> <em></em> </div>
<div class=”static-item”> <span
class=”meta-value”><strong>13</strong></span>
<span class=”meta”>学习人数</span> <em></em>
</div> </div> </div> </div> <div
class=”course-info-main clearfix w has-progress”> <div
class=”info-bar clearfix”> <div class=”content-wrap clearfix”>
<div class=”content”> <div class=”mod-tab-menu”> <ul
class=”course-menu clearfix”> <li><a class=”ui-tabs-active
active” id=”learnOn”
href=”course-video.html”><span>章节</span></a></li>
<li><a id=”commentOn” class=””
href=”course-comment.html”><span>商酌</span></a></li>
</ul> </div> <div id=”notice” class=”clearfix”>
<div class=”l”> <strong>课程公告:</strong> <a
href=”javascript:void(0)”>Spring的文书档案以及有关的jar文件已上传</a>
</div> </div> <div class=”mod-chapters”> <div
class=”chapter chapter-active” > <h3> <strong><i
class=”state-expand”></i>第一章 基础知识</strong>
</h3> <ul class=”video”> <li> <a target=”_blank”
href=’/video/3662′ class=”J-media-item studyvideo”>1.1 hello world
(0) <i class=”study-state”></i> </a> </li>
<li> <a target=”_blank” href=’/video/3662′ class=”J-media-item
studyvideo”>1.2 基本概念 (0) <i class=”study-state”></i>
</a> </li> <li> <a target=”_blank”
href=’/video/3662′ class=”J-media-item studyvideo”>django settings.py
配置 (0) <i class=”study-state”></i> </a> </li>
</ul> </div> <div class=”chapter chapter-active” >
<h3> <strong><i class=”state-expand”></i>第二章
进级开采</strong> </h3> <ul class=”video”> <li>
<a target=”_blank” href=’/video/3662′ class=”J-media-item
studyvideo”>2.1 test (0) <i class=”study-state”></i>
</a> </li> <li> <a target=”_blank”
href=’/video/3662′ class=”J-media-item studyvideo”>2.2 test2 (0)
<i class=”study-state”></i> </a> </li>
</ul> </div> <div class=”chapter chapter-active” >
<h3> <strong><i class=”state-expand”></i>第三章
要求解析和数据库设计</strong> </h3> <ul class=”video”>
<li> <a target=”_blank” href=’/video/3662′ class=”J-media-item
studyvideo”>3.1 django app设计 (0) <i
class=”study-state”></i> </a> </li> <li>
<a target=”_blank” href=’/video/3662′ class=”J-media-item
studyvideo”>3.2 django model设计 (0) <i
class=”study-state”></i> </a> </li> <li>
<a target=”_blank” href=’/video/3662′ class=”J-media-item
studyvideo”>3.3 django users models设计 (0) <i
class=”study-state”></i> </a> </li> <li>
<a target=”_blank” href=’/video/3662′ class=”J-media-item
studyvideo”>3.4 django course models设计 (0) <i
class=”study-state”></i> </a> </li> <li>
<a target=”_blank” href=’/video/3662′ class=”J-media-item
studyvideo”>3.5 organization models设计 (0) <i
class=”study-state”></i> </a> </li> </ul>
</div> <div class=”chapter chapter-active” > <h3>
<strong><i class=”state-expand”></i>第四章
django基础知识回看</strong> </h3> <ul class=”video”>
<li> <a target=”_blank” href=’/video/3662′ class=”J-media-item
studyvideo”>4.1 django settings配置 (0) <i
class=”study-state”></i> </a> </li> <li>
<a target=”_blank” href=’/video/3662′ class=”J-media-item
studyvideo”>4.2 models设计 (20) <i
class=”study-state”></i> </a> </li> </ul>
</div> <div class=”chapter chapter-active” > <h3>
<strong><i class=”state-expand”></i>第五章
通过xadmin搭建后台管理种类</strong> </h3> <ul
class=”video”> <li> <a target=”_blank” href=’/video/3662′
class=”J-media-item studyvideo”>5.1 django admin讲解 (10) <i
class=”study-state”></i> </a> </li> <li>
<a target=”_blank” href=’/video/3662′ class=”J-media-item
studyvideo”>5.2 xadmin的装置和注册 (0) <i
class=”study-state”></i> </a> </li> </ul>
</div> </div> </div> <div class=”aside r”>
<div class=”bd”> <div class=”box mb40″>
<h4>资料下载</h4> <ul class=”downlist”> <li>
<span ><i class=”aui-iconfont
aui-icon-file”></i>  前端页面</span> <a
href=”../media/course/resource/二〇一六/11/media.zip” class=”downcode”
target=”_blank” download=”” data-id=”274″ title=””>下载</a>
</li> </ul> </div> <div class=”box mb40″>
<h4>教师提醒</h4> <div class=”teacher-info”> <a
href=”/u/315464/courses?sort=publish” target=”_blank”> <img
src=’../media/teacher/2016/11/aobama_CXWwMef.png’ width=’80’
height=’80’ /> </a> <span class=”tit”> <a
href=”/u/315464/courses?sort=publish”
target=”_blank”>bobby</a> </span> <span
class=”job”>xxx</span> </div> <div
class=”course-info-tip”> <dl class=”first”>
<dt>课程须知</dt> <dd
class=”autowrap”>python基础你需求有</dd> </dl> <dl>
<dt>老师告诉你能学到什么?</dt> <dd
class=”autowrap”>django的进级开拓</dd> </dl> </div>
</div> <div class=”cp-other-learned js-comp-tabs”> <div
class=”cp-header clearfix”> <h2 class=”cp-tit
l”>该课的同校还学过</h2> </div> <div
class=”cp-body”> <div class=”cp-tab-pannel js-comp-tab-pannel”
data-pannel=”course” style=”display: block”> <!– img 200 x 112
–> <ul class=”other-list”> <li class=”curr”> <a
href=”course-detail.html” target=”_blank”> <img
src=”../media/courses/2016/11/540e57300001d6d906000338-240-135_n0L8vbw.jpg”
alt=”django与vuejs实战项目2″> <span class=”name
autowrap”>django与vuejs实战项目2</span> </a> </li>
<li class=”curr”> <a href=”course-detail.html”
target=”_blank”> <img
src=”../media/courses/二零一五/12/python面向对象.jpg”
alt=”python面向对象”> <span class=”name
autowrap”>python面向对象</span> </a> </li> <li
class=”curr”> <a href=”course-detail.html” target=”_blank”>
<img src=”../media/courses/2015/12/python文件管理.jpg”
alt=”python文件管理”> <span class=”name
autowrap”>python文件管理</span> </a> </li> <li
class=”curr”> <a href=”course-detail.html” target=”_blank”>
<img src=”../media/courses/2016/11/mysql.jpg” alt=”django入门”>
<span class=”name autowrap”>django入门</span> </a>
</li> <li class=”curr”> <a href=”course-detail.html”
target=”_blank”> <img src=”../media/courses/二〇一四/12/mysql.jpg”
alt=”xadmin进级开采”> <span class=”name
autowrap”>xadmin进级开荒</span> </a> </li>
</ul> </div> <div class=”cp-tab-pannel
js-comp-tab-pannel” data-pannel=”plan”> <ul class=”other-list”>
<li class=”curr”> <a
href=”/course/programdetail/pid/31?src=sug” target=”_blank”> <img
src=””
alt=”Java工程师”> <span class=”name
autowrap”>Java工程师</span> </a> </li> </ul>
</div> </div> </div> </div> </div>
</div> <div class=”clear”></div> </div>
</div> </div> {% endblock %} course-vedio.html

下一场修改course-detetail.html中式点心“初叶攻读”的链接

              <div class="btns">
                            <div class="btn colectgroupbtn"  id="jsLeftBtn">
                                {% if has_fav_course %}已收藏{% else %}收藏{% endif %}
                            </div>
                                <div class="buy btn"><a style="color: white" href="{%%20url%20'course:course_info'%20course.id%20%}">开始学习</a></div>
                        </div>

 

www.hg888.com 16

 

带表格的面板

为了在面板中开创贰个无边框的表格,大家得以在面板中央银行使
class .table。倘使有个 <div>
包蕴 .panel-body,我们得以向表格的最上端增添额外的边框用来分隔。若无富含 .panel-body 的
<div>,则组件会无间断地从面板尾部活动到表格。

 

<div >     <div >        <h3 >面板标题</h3>     </div>     <div >        这是一个基本的面板     </div>     <table >        <th>产品</th><th>价格 </th>        <tr><td>产品 A</td><td>200</td></tr>        <tr><td>产品 B</td><td>400</td></tr>     </table>  </div>  <div >     <div >面板标题</div>     <table >        <th>产品</th><th>价格 </th>        <tr><td>产品 A</td><td>200</td></tr>        <tr><td>产品 B</td><td>400</td></tr>     </table>  </div>  

 

4.导航

9.3.材质下载

 (1)在后端加多财富文件

 www.hg888.com 17

(2)view中把方今课程的教程财富传到前端

class CourseInfoView(View):
    def get(self,request,course_id):
        course = Course.objects.get(id=int(course_id))
        all_resources = CourseResource.objects.filter(course=course)
        return render(request,'course-video.html',{'course':course,'all_resources':all_resources})

(3)前端页面展现

<div class="box mb40">
                        <h4>资料下载</h4>
                        <ul class="downlist">
                            {% for course_resource in all_resources %}
                            <li>
                                <i class="aui-iconfont aui-icon-file"></i>&nbsp;&nbsp;{{ course_resource.name }}
                                <a href="{{%20MEDIA_URL%20}}{{%20course_resource.download%20}}" class="downcode" target="_blank" download="" data-id="274" title="">下载</a>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>

 点下载能够下载咱们在后端传上去的文件

 www.hg888.com 18

 把课程的新闻也故意依旧无意改了

 www.hg888.com 19

 <div class="hd">
                <h2 class="l">{{ course.name }}</h2>
            </div>
            <div class="statics clearfix">
                <div class="static-item ">
                    <strong>{{ course.get_degree_display }}</strong>
                    难度
                    <em></em>
                </div>
                <div class="static-item static-time">
                    {{ course.learn_times }}分钟
                    时长
                    <em></em>
                </div>
                <div class="static-item">
                    <strong>{{ course.students }}</strong>
                    学习人数
                    <em></em>
                </div>
            </div>

 

带列表组的面板:

<div >     <div >面板标题</div>        <div >           <p>这是一个基本的面板内容。这是一个基本的面板内容。           这是一个基本的面板内容。这是一个基本的面板内容。           这是一个基本的面板内容。这是一个基本的面板内容。     这是一个基本的面板内容。这是一个基本的面板内容。           </p>     </div>     <ul >        <li >免费域名注册</li>        <li >免费 Window 空间托管</li>        <li >图像的数量</li>        <li >24*7 支持</li>        <li >每年更新成本</li>     </ul>  </div>

面板跟列表组紧密结合,组成了实用的导航。如果没有包含 .panel-body 的 <div>,则列表组件会无中断地从面板头部下面。

<div >
  <div >
   <h2 >面板标题
  </div>

  <div >
  <a >免费域名注册</a>
  <a >免费 Window 空间托管</a>
  <a >图像的数额</a>
  <a >24*7 支持</a>
  <a >每年更新资金</a>
  </div>
</div>

 

@*在面板中,内容能够是列表组,也得以是表格。列表组和表格的要害不一样便是表格中的链接私下认可是有下划线的,颜色是藏浅湖蓝字体的。(能够透过
),而列表组未有下划组。
还也有列表组中的徽章私下认可是右对齐的,而表格中的徽章不是右对齐的(能够安装span
>例徽章靠右对齐)。*@

在asp.net mvc 视图实际应用到的例证:
带表格的面板:

@model
IEnumerable<MajorConstruction.Models.IndexClickRangeOnCourseViewModel>

<div >
<div >
<h2 ><span > 热销课程</span></h2>
</div>

<table >
@*在面板中,内容能够是列表组,也能够是表格。列表组和表格的关键区别正是表格中的链接默许是有下划线的,颜色是蟹灰字体的。(能够通过
),而列表组未有下划组。
再有列表组中的徽章私下认可是右对齐的,而表格中的徽章不是右对齐的(能够安装span
>例徽章靠右对齐)。*@
@foreach (var course in Model)
{
<tr>
<td>
<a Index”, “Resource”, new { courseID =course.CourseID, area = “” })”
title=”@course.CourseType 点击量 @course.CourseResourceTotalClickCount”
>
@*title属性那么些信息平常会在鼠标移到成分上时显得一段工具提醒文本(tooltip
text)。*@
@course.CourseName<span
>@course.CourseResourceCount</span>
</a>
</td>

</tr>

}
</table>

</div>

带列表组的面板:

@model
IEnumerable<MajorConstruction.Models.IndexClickRangeOnCourseViewModel>

<div >
<div >
<h2 ><span > 火热课程</span></h2>
</div>

<div >
@*在面板中,内容能够是列表组,也得以是表格。列表组和表格的显要差别正是表格中的链接暗中认可是有下划线的,颜色是铁蓝字体的。(能够经过
),而列表组未有下划线。
还会有列表组中的徽章私下认可是右对齐的,而表格中的徽章不是右对齐的(能够安装span
>例徽章靠右对齐)。并且列表组的万丈要高级中学一年级些。*@
@foreach (var course in Model)
{
<a Index”, “Resource”, new { courseID =course.CourseID, area = “” })”
title=”@course.CourseType 点击量 @course.CourseResourceTotalClickCount”
>
@*title属性这么些音信一般会在鼠标移到成分上时展现一段工具提醒文本(tooltip
text)。*@
@course.CourseName<span
>@course.CourseResourceCount</span>
</a>
}
</div>

</div>

 


  笔直方向
  <ul ></ul>

9.2.章节和录像

(1)给Vedio Model加多二个url字段

url = models.CharField('访问地址',default='',max_length=200)

www.hg888.com 20class
Video(models.Model): lesson = models.ForeignKey(Lesson,
verbose_name=”章节”,on_delete=models.CASCADE) name =
models.CharField(“视频名”,max_length=100) url =
models.CharField(‘访问地址’,default=”,max_length=200) add_time =
models.DateTimeField(“增加时间”, default=datetime.now) class Meta:
verbose_name = “视频” verbose_name_plural = verbose_name def
__str__(self): return self.name Vedio

在xadmin后台增多课程章节和章节摄像新闻及链接

 

python–>>章节–>>视频

www.hg888.com 21

www.hg888.com 22

 

(2)给Course增添四个赢得章节的不二等秘书诀

    def get_course_lesson(self):
        #获取课程的章节
        return self.lesson_set.all()

www.hg888.com 23class
Course(models.Model): ”’课程”’ DEGREE_CHOICES = ( (“cj”, “初级”),
(“zj”, “中级”), (“gj”, “高级”) ) name =
models.CharField(“课程名”,max_length=50) desc =
models.CharField(“课程描述”,max_length=300) detail =
models.TextField(“课程详细的情况”) degree =
models.Char菲尔德(‘难度’,choices=DEGREE_CHOICES, max_length=2)
learn_times = models.IntegerField(“学习时间长度(分钟数)”,default=0)
students = models.IntegerField(“学习人数”,default=0) fav_nums =
models.IntegerField(“收藏人数”,default=0) image =
models.ImageField(“封面图”,upload_to=”courses/%Y/%m”,max_length=100)
click_nums = models.IntegerField(“点击数”,default=0) tag =
models.CharField(‘课程标签’,default=”,max_length=10) add_time =
models.DateTimeField(“增添时间”,default=datetime.now,) course_org =
models.ForeignKey(CourseOrg, on_delete=models.CASCADE,
verbose_name=”所属机构”, null=True, blank=True) category =
models.CharField(“课程体系”,max_length=20, default=””) class Meta:
verbose_name = “课程” verbose_name_plural = verbose_name def
get_zj_nums(self): #获得课程的章节数 return
self.lesson_set.all().count() def get_course_lesson(self):
#获得课程的章节 return self.lesson_set.all() def
get_learn_users(self): #收获那门课程的学习用户 return
self.usercourse_set.all()[:5] def __str__(self): return self.name
Course

(3)给Lesson增添贰个到手具备摄像的方法

    def get_lesson_vedio(self):
        #获取章节所有视频
        return self.video_set.all()

www.hg888.com 24class
Lesson(models.Model): ”’课程章节”’ course =
models.ForeignKey(Course,verbose_name=’课程’,on_delete=models.CASCADE)
name = models.CharField(“章节名”,max_length=100) add_time =
models.DateTimeField(“增添时间”,default=datetime.now) class Meta:
verbose_name = “章节” verbose_name_plural = verbose_name def
get_lesson_vedio(self): #收获章节全体录像 return
self.video_set.all() def __str__(self): return ‘《{0}》课程的章节
>> {1}’.format(self.course, self.name) Lesson

(4)给Vedio增加叁个学学时间长度的字段

learn_times = models.IntegerField("学习时长(分钟数)",default=0)

www.hg888.com 25class
Video(models.Model): ”’章节录制”’ lesson = models.ForeignKey(Lesson,
verbose_name=”章节”,on_delete=models.CASCADE) name =
models.CharField(“视频名”,max_length=100) url =
models.CharField(‘访问地址’,default=”,max_length=200) learn_times =
models.IntegerField(“学习时长(分钟数)”, default=0) add_time =
models.DateTimeField(“增加时间”, default=datetime.now) class Meta:
verbose_name = “视频” verbose_name_plural = verbose_name def
__str__(self): return self.name Vedio

 

学科章节和摄像

<div class="mod-chapters">
                    {% for lesson in course.get_course_lesson %}
                    <div class="chapter chapter-active" >
                        <h3>
                            <strong><i class="state-expand"></i>{{ lesson.name }}</strong>
                        </h3>
                        <ul class="video">
                            {% for vedio in lesson.get_lesson_vedio %}
                            <li>
                                <a target="_blank" href='{{ vedio.url }}' class="J-media-item studyvideo">{{ vedio.name }} ({{ vedio.learn_times }})
                                    <i class="study-state"></i>
                                </a>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% endfor %}
                </div>

www.hg888.com 26

 

面板标题

<div >     <div >        不带 title 的面板标题     </div>     <div >        面板内容     </div>  </div>    <div >     <div >        <h3 >           带有 title 的面板标题        </h3>     </div>     <div >        面板内容     </div>  </div>

  为列表组增加徽章
  <ul >
      <li >
        <span >30</span>        

Django+xadmin创设在线教育平台(六),djangoxadmin


9.4.助教提醒

(1)给Course加多多少个teacher外键

teacher = models.ForeignKey(Teacher,verbose_name='讲师',null=True,blank=True,on_delete=models.CASCADE)

www.hg888.com 27class
Course(models.Model): ”’课程”’ DEGREE_CHOICES = ( (“cj”, “初级”),
(“zj”, “中级”), (“gj”, “高级”) ) name =
models.CharField(“课程名”,max_length=50) desc =
models.CharField(“课程描述”,max_length=300) detail =
models.TextField(“课程详细情形”) degree =
models.CharField(‘难度’,choices=DEGREE_CHOICES, max_length=2)
learn_times = models.IntegerField(“学习时间长度(分钟数)”,default=0)
students = models.Integer菲尔德(“学习人数”,default=0) fav_nums =
models.IntegerField(“收藏人数”,default=0) image =
models.ImageField(“封面图”,upload_to=”courses/%Y/%m”,max_length=100)
click_nums = models.IntegerField(“点击数”,default=0) tag =
models.CharField(‘课程标签’,default=”,max_length=10) add_time =
models.DateTimeField(“增多时间”,default=datetime.now,) course_org =
models.ForeignKey(CourseOrg, on_delete=models.CASCADE,
verbose_name=”所属部门”, null=True, blank=True) category =
models.CharField(“课程连串”,max_length=20, default=””) teacher =
models.ForeignKey(Teacher,verbose_name=’讲师’,null=True,blank=True,on_delete=models.CASCADE)
class Meta: verbose_name = “课程” verbose_name_plural = verbose_name
def get_zj_nums(self): #获得课程的章节数 return
self.lesson_set.all().count() def get_course_lesson(self):
#获取课程全体章节 return self.lesson_set.all() def
get_learn_users(self): #获得那门科指标求学用户 return
self.usercourse_set.all()[:5] def __str__(self): return self.name
Course

在后台为课程加多三个教授

(2)给Course再增加多少个字段 “课程须知”和“老师告诉您能学到什么”

youneed_know = models.CharField('课程须知',max_length=300,default='')
teacher_tell = models.CharField('老师告诉你',max_length=300,default='')

www.hg888.com 28class
Course(models.Model): ”’课程”’ DEGREE_CHOICES = ( (“cj”, “初级”),
(“zj”, “中级”), (“gj”, “高级”) ) name =
models.CharField(“课程名”,max_length=50) desc =
models.CharField(“课程描述”,max_length=300) detail =
models.TextField(“课程详细情形”) degree =
models.CharField(‘难度’,choices=DEGREE_CHOICES, max_length=2)
learn_times = models.IntegerField(“学习时间长度(分钟数)”,default=0)
students = models.IntegerField(“学习人数”,default=0) fav_nums =
models.IntegerField(“收藏人数”,default=0) image =
models.ImageField(“封面图”,upload_to=”courses/%Y/%m”,max_length=100)
click_nums = models.IntegerField(“点击数”,default=0) tag =
models.Char菲尔德(‘课程标签’,default=”,max_length=10) add_time =
models.DateTimeField(“增添时间”,default=datetime.now,) course_org =
models.ForeignKey(CourseOrg, on_delete=models.CASCADE,
verbose_name=”所属部门”, null=True, blank=True) category =
models.CharField(“课程连串”,max_length=20, default=””) teacher =
models.ForeignKey(Teacher,verbose_name=’讲师’,null=True,blank=True,on_delete=models.CASCADE)
youneed_know = models.CharField(‘课程须知’,max_length=300,default=”)
teacher_tell =
models.CharField(‘先生告诉你’,max_length=300,default=”) class Meta:
verbose_name = “课程” verbose_name_plural = verbose_name def
get_zj_nums(self): #赢得课程的章节数 return
self.lesson_set.all().count() def get_course_lesson(self):
#收获课程全部章节 return self.lesson_set.all() def
get_learn_users(self): #获得那门课程的上学用户 return
self.usercourse_set.all()[:5] def __str__(self): return self.name
Course

 

(3)前端显示

<div class="box mb40">
                        <h4>讲师提示</h4>
                        <div class="teacher-info">
                            <a href="/u/315464/courses?sort=publish" target="_blank">
                                <img src='{{ MEDIA_URL }}{{ course.teacher.image }}' width='80' height='80' />
                            </a>

          <a href="/u/315464/courses?sort=publish" target="_blank">{{ course.teacher.name }}</a>

                            {{ course.teacher.work_position }}
                        </div>
                        <div class="course-info-tip">
                            <dl class="first">
                                <dt>课程须知</dt>
                                <dd class="autowrap">{{ course.youneed_know }}</dd>
                            </dl>
                            <dl>
                                <dt>老师告诉你能学到什么?</dt>
                                <dd class="autowrap">{{ course.teacher_tell }}</dd>
                            </dl>
                        </div>
                    </div>

www.hg888.com 29

 

  开关必须加多 data-toggle=”dropdown” 触发器

九、课程章节音讯

*        <a >中中原人民共和国队金牌</a>*

  面包屑导航

  增加三个华而不实 <li ></li> 标签来分割列表项

   带开关的寻找框

3.input控件组   

8.缩略图

  制作信息页面

2. 按钮组   

  <ul >
    <li ><a >新闻</a></li>
    <li ><a >时事</a></li>
    <li ><a >娱乐</a></li>
    <li ><a >其他</a></li>
  </ul>

      </li>

标签:,

Your Comments

近期评论

    功能


    网站地图xml地图