- codingsoho.com

Job Search Engine

2.6 使用Bootstrap改进视图样式

使用Bootstrap改进视图样式

列表视图

首先修改模板添加从base.html扩展而来，代码如下

{% extends "base.html" %}

{% load staticfiles i18n langs %}

{% block content %}
{% language_select LANGUAGE_CODE %}
<table>
    <tr>
        <th>{% trans 'title' %}</th>
        <th>{% trans 'salary' %}</th>
        <th>{% trans 'region' %}</th>
        <th>{% trans 'degree' %}</th>
        <th>{% trans 'experience' %}</th>
        <th>{% trans 'company' %}</th>
        <th>{% trans 'industry' %}</th>
        <th>{% trans 'description' %}</th>
        <th>{% trans 'href' %}</th>
        <th>{% trans 'creatd' %}</th>
    </tr>
    {% for obj in object_list %}
    <tr>
        <td><a href="{{obj.get_absolute_url}}">{{obj.title}}</a> </td>
        <!-- <td><a href="{% url 'job_entry_list' %}{{obj.id}}">{{obj.title}}</a> </td> -->
        <!-- <td><a href="/jobentry/{{obj.id}}">{{obj.title}}</a> </td> -->
        <td>{{obj.salary}}</td>
        <td>{{obj.region}}</td>
        <td>{{obj.degree}}</td>
        <td>{{obj.experience}}</td>
        <td>{{obj.company}}</td>
        <td>{{obj.industry}}</td>
        <td>{{obj.description}}</td>
        <td><a href="{{obj.href}}">{{obj.href}}</a> </td>
        <td>{{obj.created}}</td>
    </tr>
    {% endfor %}
</table>
{% endblock %}

这样视图就会显示在中心内容块中，接下来我们还要完成几件事

导航条改进

将中英文切换功能添加到导航条上

修改languages_select_part.html

{% if languages %}
<form id="language-select-form" class="navbar-form navbar-left" method="post" action="{% url 'set_language' %}">{% csrf_token %}                                     <!-- 1 -->
<select class="dropdown form-control" onchange="this.form.submit();" name="language">                                                                                               <!-- 2 -->
{% for lang in languages %}<option value="{{ lang.code }}" {% if lang.code == default %}selected="selected"{% endif %}>{{ lang.name_local }}</option>
{% endfor %}</select>
</form>{% endif %}

1 给form添加class "navbar-form navbar-left"
2 给select添加class form-control

将它加入到navbar.html里

       <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">{% language_select LANGUAGE_CODE %}</li>        
      </ul>

效果如下

bootstrap支持屏幕缩放，当在小屏幕上时，它的部分内容为收缩，效果如下

添加导航信息

<a class="navbar-brand" href="{% url 'home' %}">Home</a>
...
      <ul class="nav navbar-nav">
        <li class="active"><a href="{% url 'job_entry_list' %}">Jobs <span class="sr-only">(current)</span></a></li>
        <li><a href="#">About</a></li>        
      </ul>

上面代码中添加了主页及Job List导航信息等

改进表格显示

参考http://www.runoob.com/bootstrap/bootstrap-tables.html修改表格显示内容如下

<table class="table table-striped table-responsive table-condensed table-hover table-bordered">
  <caption>条纹表格布局</caption>
  <thead>
    <tr>
      <th>{% trans 'title' %}</th>
      <th>{% trans 'salary' %}</th>
      <th>{% trans 'region' %}</th>
      <th>{% trans 'degree' %}</th>
      <th>{% trans 'experience' %}</th>
      <th>{% trans 'company' %}</th>
      <th>{% trans 'industry' %}</th>
      <th>{% trans 'description' %}</th>
      <th>{% trans 'href' %}</th>
      <th>{% trans 'creatd' %}</th>
    </tr>
  </thead>
  <tbody>
    {% for obj in object_list %}
    <tr>
      <td><a href="{{obj.get_absolute_url}}">{{obj.title}}</a> </td>
      <!-- <td><a href="{% url 'job_entry_list' %}{{obj.id}}">{{obj.title}}</a> </td> -->
      <!-- <td><a href="/jobentry/{{obj.id}}">{{obj.title}}</a> </td> -->
      <td>{{obj.salary}}</td>
      <td>{{obj.region}}</td>
      <td>{{obj.degree}}</td>
      <td>{{obj.experience}}</td>
      <td>{{obj.company}}</td>
      <td>{{obj.industry}}</td>
      <td>{{obj.description}}</td>
      <td><a href="{{obj.href}}">{{obj.href}}</a> </td>
      <td>{{obj.created}}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

详情视图

同样的方法修改详情视图

{% extends "base.html" %}

{% load i18n %}

{% block content %}
<table class="table table-striped table-responsive table-condensed table-hover table-bordered">
    <tr>
      <th>{% trans 'title' %}</th>
      <th>{% trans 'salary' %}</th>
      <th>{% trans 'region' %}</th>
      <th>{% trans 'degree' %}</th>
      <th>{% trans 'experience' %}</th>
      <th>{% trans 'company' %}</th>
      <th>{% trans 'industry' %}</th>
      <th>{% trans 'description' %}</th>
      <th>{% trans 'href' %}</th>
      <th>{% trans 'creatd' %}</th>
    </tr>
    <tr>
        <td>{{object.title}}</td>
        <td>{{object.salary}}</td>
        <td>{{object.region}}</td>
        <td>{{object.degree}}</td>
        <td>{{object.experience}}</td>
        <td>{{object.company}}</td>
        <td>{{object.industry}}</td>
        <td>{{object.description}}</td>
        <td>{{object.href}}</td>
        <td>{{object.created}}</td>
    </tr>
</table>
{% endblock %}

列表和详情视图的显示得到了很大的改善，但是依然不够美观，列表的显示内容太多，表格放不下，这个将在下一节解决。同时，下一节还会解决搜索的问题。