BootStrap前端框架

最新推荐文章于 2022-03-31 19:20:22 发布

啄木鸟也会飞

最新推荐文章于 2022-03-31 19:20:22 发布

阅读量320

点赞数

分类专栏：学习笔记前端框架学习笔记文章标签： bootstrap

本文链接：https://blog.csdn.net/weixin_46600354/article/details/105355674

版权

学习笔记同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

前端框架学习笔记

2 篇文章 0 订阅

订阅专栏

在这里插入图片描述

BootStrap简介

概述:

已有的前端框架, 里边定义了大量的CSS样式和 JS脚本, 将需要用到的直接复制过来, 然后简单修改即可.

框架:

可简单理解为针对于某类功能的半成品.

作用:

Bootstrap 使得 Web 开发更加快捷，高效
BootStrap支持响应式开发，解决了移动互联网前端开发问题

响应式页面:

概述:

指的是页面会根据屏幕的分辨率, 进行自适应调节.

特点:

页面会根据屏幕的分辨率, 进行自适应调节, 方便用户浏览和查看.

https://www.taobao.com/					//非响应式页面
https://main.m.taobao.com/index.html	//响应式页面

使用步骤

1. 从官网下载 bootstrap 框架相关的资料
	官网 www.bootcss.com		//目前最新版本 3.3.7
2. 通过IDEA新建一个 静态 Web 网站(模块)
3. 把 bootstrap/dist/文件夹下的三个目录, 全部复制到新建号的 静态web网站中
4. 把 jquery-1.11.3.min.js 复制到静态web网站的js文件夹中
	因为bootstrap里面的一些插件的功能用到了JQuery里面的功能
5. 在 静态web网站 下创建一个文件夹
6. 在新建的文件夹中新建html页面, 可在页面中尝试使用BootStrap的内容
	1. 引入BootStrap的 css样式
		<link href="../css/bootstrap.min.css" rel="stylesheet"/>
		<link href="../css/bootstrap-theme.min.css" rel="stylesheet"/>
			//后面一个可以不引, 里面是一些补充样式
	2. 引入JQuery插件
		js依赖jQuery, 因此jQuery必须先引入
		<script src="../js/jquery-1.11.3.min.js></script>
	3. 引入BootStrap的 JS相关的脚本文件
		<script src="../js/bootstrap.min.js></script>

BootStrap常用组件

栅格系统

概述:

BootStrap为了便于开发响应式页面, 把一行分为12列, 我们无需设置宽度, 只要设置在什么分辨率下占几列.
分辨率的划分:
sm: //小屏幕, 理解为: ipad
md: //中屏幕, 理解为: 笔记本电脑显示器
lg: //大屏幕, 理解为: 台式机的大显示器

案例:

//格式: 布局方式 -> 行 -> 列 -> 元素.
<!--设置页面布局方式为: 流式布局-->
<div class="container-fluid">
    <!--设置以下元素为一行-->
    <div class="row">
        <!--需求: 设置一行有4个div-->
        <div class="col-md-4">div111</div>
        <div class="col-md-4">div222</div>
        <div class="col-md-4">div333</div>
    </div>
</div>

开发响应式页面:

<!--设置页面布局方式为: 流式布局-->
<div class="container-fluid">
    <!--设置以下元素为一行-->
    <div class="row">
        <!--需求: 大屏幕一行4个div, 中屏幕一行2个div, 小屏幕一行1个div-->
        <div class="col-lg-3 col-md-6 col-sm-12">div111</div>
        <div class="col-lg-3 col-md-6 col-sm-12">div222</div>
        <div class="col-lg-3 col-md-6 col-sm-12">div333</div>
        <div class="col-lg-3 col-md-6 col-sm-12">div333</div>
    </div>
</div>

列偏移和隐藏/显示列

<div class="container-fluid">
    <!--行-->
    <div class="row">
        <!--需求1: 演示偏移列.-->
		<!--col-md-offset-4的意思是: 向右偏移4列, 因为一行12列, 所以相当于你写了个了 col-md-8-->
        <div class="col-md-offset-4">div111</div>
        <div class="col-md-4">div222</div>
        <div class="col-md-4">div333</div>
    </div>
    <br/>
    <br/>
    <br/>

    <!--需求2: 演示 响应式工具(大白话: 就是在指定的分辨率下, 隐藏, 或者显示指定的div)-->
    <div class="row">
        <!--hidden-lg 在大屏状态下隐藏-->
        <!--visible-lg 在大屏状态下显示-->
        <div class="col-lg-3 col-md-6 col-sm-12 visible-lg">div111</div>
        <div class="col-lg-3 col-md-6 col-sm-12">div222</div>
        <div class="col-lg-3 col-md-6 col-sm-12">div333</div>
        <div class="col-lg-3 col-md-6 col-sm-12 hidden-lg">div444</div>
    </div>
</div>

列表

<!--布局方式-->
<div class="container-fluid">
    <!--行-->
    <div class="row">
        <!--无序列表-->
        <!--
        list-unstyled: 取消列表的样式.
        list-inline:   在一行, 设置水平布局.
        -->
        <ul class="list-inline">
            <!--列表项-->
            <li>飞机</li>
            <li>高铁</li>
            <li>汽车</li>
        </ul>
    </div>
</div>

按钮

<!--布局方式-->
<div class="container-fluid">
    <!--行-->
    <div class="row">
        <!--btn-default: 默认按钮的样式-->
        <button type="button" class="btn btn-default">（默认样式）Default</button>

        <!--btn-primary: 首选项按钮的样式-->
        <button type="button" class="btn btn-primary">（首选项）Primary</button>

        <!--btn-success: 成功按钮的样式,  btn-lg: 大按钮 btn-sm: 小按钮 btn-xs:超小按钮-->
        <button type="button" class="btn btn-success btn-lg">（成功）Success</button>

        <!--btn-info: 一般信息按钮的样式-->
        <button type="button" class="btn btn-info">（一般信息）Info</button>

        <!--btn-warning: 警告按钮的样式-->
        <button type="button" class="btn btn-warning">（警告）Warning</button>

        <!--btn-danger: 危险按钮的样式-->
        <button type="button" class="btn btn-danger">（危险）Danger</button>

        <!--btn-link: 链接按钮的样式-->
        <button type="button" class="btn btn-link">（链接）Link</button>
    </div>
</div>

导航条

 <!--布局方式-->
<div class="container-fluid">
    <!--导航条, html5的新特性, navbar等价于div-->
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <!--设置导航条中的内容-->
            <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="#">手机数码 <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">电脑办公</a></li>
                    <li><a href="#">水果生鲜</a></li>
                    <li><a href="#">户外运动</a></li>
                </ul>

                <!--navbar-right: 设置居右对齐.-->
                <form class="navbar-form navbar-right">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</div>

轮播图

 <!--布局方式-->
<div class="container-fluid">
    <!--定义行: -->
    <div class="row">
        <!--轮播图代码-->
        <!--轮播图代码从这里开始, 这个div, 表示轮播图最外层的div-->
        <!--设置轮播图, 图片切换的 周期, 单位是毫秒.-->
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="3000">
            <!--设置一个一个的轮播项, 就是轮播图中间 下方的小圆点-->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>

            <!--设置具体的图片, 即: 该div中存储的是所有的轮播图 图片-->
            <div class="carousel-inner" role="listbox">
                <!--第一张图片-->
                <div class="item active">
                    <!--图片路径-->
                    <img src="../img/1.jpg" alt="图片1">
                    <!--图片的描述信息,会展示在 录播图中间, 下方位置.-->
                    <div class="carousel-caption">
                        这是图片1
                    </div>
                </div>

                <!--第二张图片-->
                <div class="item">
                    <!--图片路径-->
                    <img src="../img/2.jpg" alt="图片2">
                    <!--图片的描述信息,会展示在 录播图中间, 下方位置.-->
                    <div class="carousel-caption">
                        这是图片2
                    </div>
                </div>

                <!--第三张图片-->
                <div class="item">
                    <!--图片路径-->
                    <img src="../img/3.jpg" alt="图片3">
                    <!--图片的描述信息,会展示在 录播图中间, 下方位置.-->
                    <div class="carousel-caption">
                        这是图片3
                    </div>
                </div>
            </div>

            <!--这个是录播图左边 和 右边 那个箭头-->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</div>

对齐方式

<!--布局方式-->
<div class="container-fluid">
    <!--定义行-->
    <div class="row">
        <!--
            对齐方式:
            text-left:   居左对齐, 默认
            text-center: 居中对齐
            text-right:  居右对齐
        -->
        <p class="text-center">我是111</p>
        <p class="text-right">我是222</p>
        <p class="text-left">我是333</p>
        <p>我是444</p>
    </div>
</div>

表单

<!--第二行: form-horizontal : 每组元素占一行, 即: 设置改组元素水平对齐.-->
<div class="row">
    <!--定义一个表单-->
    <form class="form-horizontal">
        <!--第一组-->
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
            </div>
        </div>

        <!--第二组-->
        <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
            </div>
        </div>

        <!--第三组-->
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"> Remember me
                    </label>
                </div>
            </div>
        </div>

        <!--第四组-->
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">Sign in</button>
            </div>
        </div>
    </form>
</div>

分页

<!--布局方式-->
<div class="container-fluid">
    <!--nav h5的新特性, 相当于 div, 这里的nav表示 分页的最外层.-->
    <!--
        disable: 禁用
        active:  选中.
    -->
    <nav aria-label="Page navigation">
        <!--无序列表-->
        <ul class="pagination">
            <!--列表项-->
            <li>
                <a href="#" aria-label="Previous">
                    <!--&laquo;  朝左的两个小于号, 即:  <<  -->
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li>
                <a href="#">
                    1
                </a>
            </li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li class="disabled" ><a href="#">4</a></li>
            <li class="active"><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li>
                <a href="#" aria-label="Next">
                    <!--&raquo; 表示朝右的两个大于号  >> -->
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
</div>