web框架之Bootstrap基本使用(python3入门)

Posted 名叫蛐蛐的喵

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了web框架之Bootstrap基本使用(python3入门)相关的知识,希望对你有一定的参考价值。

一、Bootstrap初识

快速帮助我们完成样式与布局
简单理解bs,给标签添加类名,就可以获取bs提前写好的样式
固定结构下的固定类名,不仅可以获得样式,还可以获得事件

 

 

二、Bootstrap使用

  精髓:复制,粘贴,修改 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>bootstrap初识</title>

    <!--导入bootstrap样式-->
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">

    <!--设置字体图标大小颜色-->
    <style>
        i {
            font-size: 50px;
            color: orange;
        }

    </style>
</head>
<body>

<!--容器: 有默认padding: 15px-->
<div class="container">

    <!--row:容器中的一行,有默认margin:0 -15px-->
    <!--栅格系统:父级标签默认被平分12等分,自己可以选择占用几分-->
    <div class="row">
        <div class="box bg-success col-md-9 col-xs-1 col-sm-6 col-lg-12">123</div>
    </div>


    <!--用户登陆输入结构框-->
    <div class="row">
        <form>
            <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">Password</label>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
            </div>
            <div class="form-group">
                <label for="exampleInputFile">File input</label>
                <input type="file" id="exampleInputFile">
                <p class="help-block">Example block-level help text here.</p>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Check me out
                </label>
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>


    </div>


    <!--字体图标-->
    <div class="row">

        <!--字体图标-->
        <i class="glyphicon glyphicon-ok-sign"></i>
        <i class="glyphicon glyphicon-eye-open"></i>
        <i class="glyphicon glyphicon-chevron-left"></i>
        <i class="glyphicon glyphicon-chevron-right"></i>

    </div>


    <!--下拉菜单-->
    <div class="row">
        <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="true">
                Dropdown
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                <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>
        </div>


    </div>


    <!--分页符-->
    <div class="row">
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li>
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li class="abcded"><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li>
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>


    </div>


</div>

</body>

<!--导入jq,bootstrap是基于jq的(要使用bootstrap.js必须先导入jq-->
<script src="js/jq.js"></script>

<!--导入bootstrap.js-->
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script>
    $(.abcded).click(function () {
        alert(12345)
    })

</script>

</html>

 

以上是关于web框架之Bootstrap基本使用(python3入门)的主要内容,如果未能解决你的问题,请参考以下文章

Web开发之常用框架BootStrap

Web前端之移动端课程开发之06.bootstrap

Web前端之移动端课程开发之06.bootstrap

HTMLCSS 和 JS框架之Bootstrap

Bootstrap总结

基于Metronic的Bootstrap开发框架经验总结--实现Web页面内容的打印预览和保存操作