django—bootstrapt 前端网页开发总结

一、导航栏 django—bootstrapt 前端网页开发总结

<nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/event_manage/">Guest Manage System</a>
                    </div>
                    <div id="navbar" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                    <li class="active"><a href="#">电影天堂</a></li>
                    <li><a href="#">点滴积累</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">{{user}}</a></li>
                    <li><a href="/logout/">退出</a></li>
                    </ul>
                </div>
            </div>
        </nav>

二、网络栅格布局

<div class="container">
        <div class="row">
        <div class="col-xs-6 col-md-3">
            <a href="http://www.w3school.com.cn/i/eg_tulip.jpg" target=_blank class="thumbnail">
                <img src="http://www.w3school.com.cn/i/eg_tulip.jpg" style="height: 180px; width: 100%; display: block;" alt="">
            </a>
            <div class="caption">
                <h3>Bootstrap框架系列教程</h3>
                <p>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
                <p>
                    <a href="##" class="btn btn-primary">开始学习</a>
                    <a href="##" class="btn btn-info">正在学习</a>
                </p>
            </div>
        </div>
        <div class="col-xs-6 col-md-3">
            <a href="{%url 'movie'%}" target=_blank class="thumbnail">
                <img alt="100%x180" src="http://www.w3school.com.cn/i/eg_tulip.jpg" style="height: 180px; width: 100%; display: block;">
            </a>
            <div class="caption">
                <h3>Bootstrap框架系列教程</h3>
                <p> Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
                <p>
                    <a href="##" class="btn btn-primary">开始学习</a>
                    <a href="##" class="btn btn-info">正在学习</a>
                </p>
            </div>
        </div>
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img alt="100%x180" src="http://www.w3school.com.cn/i/eg_tulip.jpg" style="height: 180px; width: 100%; display: block;">
            </a>
            <div class="caption">
                <h3>Bootstrap框架系列教程</h3>
                    <p>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
                    <p>
                        <a href="##" class="btn btn-primary">开始学习</a>
                        <a href="##" class="btn btn-info">正在学习</a>
                    </p>
            </div>
        </div>

</div>

三、链接跳转

django—bootstrapt 前端网页开发总结

        <div class="col-xs-6 col-md-3">
            <a href="{%url 'movie'%}" target=_blankclass="thumbnail">
                <img alt="100%x180" src="http://www.w3school.com.cn/i/eg_tulip.jpg" style="height: 180px; width: 100%; display: block;">
            </a>
            <div class="caption">
                <h3>Bootstrap框架系列教程</h3>
                <p> Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
                <p>
                    <a href="##" class="btn btn-primary">开始学习</a>
                    <a href="##" class="btn btn-info">正在学习</a>
                </p>
            </div>
        </div>

1、url.py文件添加

url(r'^movie$',views.movie,name="movie"),

2、view.py文件添加

def movie(request):
return render(request,"decripation.html")

3、templates目录中创建decripation.html

（settings.py文件中事先已添加

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,

）

四、CKeditor富文本编辑

django—bootstrapt 前端网页开发总结

https://www.cnblogs.com/zifenger/p/3904536.html

安装包

python2.7.6

Django==1.8.6
django-bootstrap3==9.1.0
django-ckeditor==5.4.0
django-js-asset==0.1.1
olefile==0.44
Pillow==4.3.0

django—bootstrapt 前端网页开发总结

相关推荐