Python 前端框架【Bootstrap】

Bootstrap

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。


使用bootstrap组件构建页面元素

获取css源
在官网中选择版本后进入如下界面

选择下载源码进行本地导入,或者在联网状态下导入网络位置的css

在html中导入bootstrap.css

在网络上选择需要选用的组件,这里以按钮为例

复制代码粘贴至html中,并根据需求修改内容

在浏览器中查看


在flask中使用bootstrap(flask_bootstrap)

flask_bootstrap可以使我们快速在flask框架中使用bootstrap来构建我们的页面

安装

在对应的环境中使用pip 安装
pip install flask_bootstrap

使用

在flask工程中主程序app.py中添加代码如下:
from flask_bootstrap import Bootstrap
app = Flask(__name__)
Bootstrap(app)
templates中的html文件可以直接导入flask_bootstrap中的基模板

可以在flask_bootstrap包中的templates/bootstrap/base.html查看基模板
{% block doc -%}
<!DOCTYPE html>
<html{% block html_attribs %}{% endblock html_attribs %}>
{%- block html %}
  <head>
    {%- block head %}
    <title>{% block title %}{{title|default}}{% endblock title %}</title>

    {%- block metas %}
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {%- endblock metas %}

    {%- block styles %}
    <!-- Bootstrap -->
    <link href="{{bootstrap_find_resource(‘css/bootstrap.css‘, cdn=‘bootstrap‘)}}" rel="stylesheet">
    {%- endblock styles %}
    {%- endblock head %}
  </head>
  <body{% block body_attribs %}{% endblock body_attribs %}>
    {% block body -%}
    {% block navbar %}
    {%- endblock navbar %}
    {% block content -%}
    {%- endblock content %}

    {% block scripts %}
    <script src="{{bootstrap_find_resource(‘jquery.js‘, cdn=‘jquery‘)}}"></script>
    <script src="{{bootstrap_find_resource(‘js/bootstrap.js‘, cdn=‘bootstrap‘)}}"></script>
    {%- endblock scripts %}
    {%- endblock body %}
  </body>
{%- endblock html %}
</html>
{% endblock doc -%}
基模板中完成了bootstrap的css和js导入
继承后直接添加bootstrap中的元素即可实现

继承bootstrap的基模板后构建自己的基模板,以添加一个导航栏为例
{% extends ‘bootstrap/base.html‘ %}

{% block navbar %}
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">测试页面</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">Link</a></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="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a></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="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>

{% endblock %}
测试主页继承自基模板
{% extends ‘base.html‘ %}
{% block title %}
    主页
{% endblock %}
{% block content %}
    <div class="jumbotron">
        <h1>欢迎来到测试主页</h1>
    </div>
{% endblock %}
运行flask后,查看测试主页

原文地址:https://blog.51cto.com/13992211/2360333

时间: 2024-10-10 17:09:47

Python 前端框架【Bootstrap】的相关文章

关于前端框架BootStrap和JQueryUI(以及对应的优秀模板)

最近两个月由于需要升级公司产品的界面,所以不得不去学习了下原本并不熟悉的前端框架.这里也是推荐两款BootStrap和JQueryUI. bootstrap使用起始很简单,首先,需要得到所需要的Jar包,可以去中文官网http://getbootstrap.com/2.3.2/获取. 在我看来,要掌握bootstrap的用法有很多途径,可以去看帮助文档,或者看学习视频,这些能帮助你更系统全面的认识这个框架.但在时间不允许的情况下,我觉得最快的学习方法还是找个做好的基于次框架的网站或系统,然后看他

前端框架bootstrap(响应式布局)入门

Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加bootstrap固定的class样式,就可以轻松完成指定效果的实现. 作用: 1.Bootstrap使得Web开发更加快捷,高效 2.Bootstrap支持响应式开发,解决了移动互联网前端开发问题. 简单介绍一下: 该框架是Twitter公司的设计师Mark Otto和jacob Thornton

前端框架Bootstrap(10.7国庆最后一天)

框架的官网地址:https://v3.bootcss.com/ 主要学习Bootstrap框架提供的样式.组件.插件的使用 首先下载到本地,在项目中导入使用: 下载的文件中包含:min.css的是压缩的版本,建议使用,容量小加载比较快, 可以把其他的删掉,或者在导入使用的时候注意路径别选错了. 有网路的情况下,也可以用在线导入使用,BootCDN 强调: 1.bootstrap动态效果是依赖于jQuery的 所以你应该先导入jQuery 2.使用前端框架  所有的样式 都仅仅只需要用户条件标签类

学习前端框架bootstrap

做为前端只能简单的排版,以我现在的水平来说的话,没有美工的话我做的页面是非常的烂的,根本没有任何的美感可言,听到经理可以学习一下bootstrap.我就去了解了,发现bootstrap也是不非常的难学要上手也是非常容易的,但是又看到less和Cass什么的感觉,这个bootstrap要用好也不是非常容易的啊!现在正在努力的学习着,这个可以不用怎样的css就可以使我的排版好看. 可能我的文笔是比较差的,大家也不要见怪,我高中时学理科的,语文也是一般般的水平,而且高中上完后就毕业了,没有上大学.在语

一款成熟的前端框架——Bootstrap

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成.Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目. Bootstrap的javascript插件是基于JQuery框

前端框架Bootstrap - 快速搭建网站

Bootstrap简介 Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.是一个CSS/HTML/JavaScript框架.Bootstrap是基于HTML5和CSS3开发的,包含丰富的组件,根据这些组件可以快速的搭建一个漂亮.功能完备的网站.其中包括以下组件:下拉菜单.按钮组.导航.导航条等等.可以说Bootstrap是一个简洁简单的前端开发框架,可以让Web开发更迅速更简单. 学习和下载资料主要可以通过官方中文网 www.bootcss.com . Bootstrap优

前端框架bootstrap 表单和导航菜单的 Demo(第二篇)

表单: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css" /> <script type="text/javascript" src="

前端框架Bootstrap

http://www.bootcss.com/ Bootstrap 编码规范 http://codeguide.bootcss.com/

【CSS】扁平化都是纸老虎,看怎么抛弃前端框架在IE6扁平化

Bootstrap确实是一个好的前端框架,但是这东西就是任性,只支持IE8以上的浏览器, 国外还有一些其他不错的框架,但是连WIN7默认的浏览器IE8都不支持,那留你何用,甚至Bootstrap这一优秀的框架在其V4版本也矫情起来了,开始不支持IE8, 把我大天朝的IE6放哪里去? 扁平化总是给人高大上的样子,好像必须用前端框架实现不可,自己写前来根本无从下手, 其实根本不是, 都是CSS样式,有什么不可能实现呢? 好,光吹没用,跟大家看些实际的东西. 一.按钮 按钮在网页中常见得不能再常见,那