初识bootStrap之见

最新推荐文章于 2021-11-28 20:07:32 发布

Kelly Quan

最新推荐文章于 2021-11-28 20:07:32 发布

阅读量183

点赞数

分类专栏：前端 Bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/qweKelliy/article/details/88740236

版权

前端同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

Bootstrap

1 篇文章 0 订阅

订阅专栏

本文是作者对Bootstrap的初识心得，详细介绍了如何开始学习Bootstrap，包括下载核心文件、jQuery和HTML5兼容插件。通过实践演示了导航条组件、轮播图组件的创建，强调了栅格布局的重要性，并鼓励读者动手实践以深入理解。最后，作者分享了自己的GitHub源码以供学习。

摘要由CSDN通过智能技术生成

初探BootStrap

写在前面

Bootstrap是目前最流行的前端框架，接触bootstrap不久，写一份个人版的Bootstrap教程，也分享一下自己在使用的时候出现的问题，希望能对大家有所帮助。

准备工作

1、下载Bootstrap框架核心文件。
2、下载jQuery文件。
3、下载HTML5兼容IE的JS插件。
（现在Bootstrap官网上最新版本是3.3.7，会有压缩版和非压缩版两个版本，个人建议两个都下载下来，压缩版用于开发时引入样式，非压缩版便于自己查看源码。对于Jquery文件,个人建议下载1.12以上版本。否则由于版本支持的原因，可能使用的时候js效果不出来）

（注意文件引入的顺序：依次为bootstrap.min.css，jquery-2.2.4.min.js，bootstrap.min.js (style.css是我自己的样式文件)）

如何学习bootstrap

首先实践是最好的老师！在实践的基础上，去学习并遵守它的标准，即使是没有学过网页设计的开发者，也能做出很专业、美观的页面，极大地提高了工作效率。当然官方手册也是很重要，如果想要把bootstrap玩好，有空的时候多看看。（话不多说，下面直接贴上自己的代码，再对其中的一些知识点进行个人讲解）

个人demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--<link rel="stylesheet" href="lib/bootstrap_default.min.css">-->
    <link rel="stylesheet" href="lib/bootstrap.min.css">
    <link rel="stylesheet" href="assets/style.css">
    <script src="lib/jquery-2.2.4.min.js"></script>
    <script src="lib/bootstrap.min.js"></script>
</head>
<body>
    <!-- 导航-->
    <nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <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>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">关于</a></li>
                <li><a href="#">登陆</a></li>
            </ul>
        </div>
    </nav>

    <!-- 轮播图-->
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- 轮播指标-->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- 轮播目标-->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="assets/bg1.jpg">
                <div class="carousel-caption">
                    <p>标题1</p>
                </div>
            </div>
            <div class="item">
                <img src="assets/bg2.jpg">
                <div class="carousel-caption">
                    <p>标题2</p>
                </div>
            </div>
            <div class="item">
                <img src="assets/bg3.jpg">
                <div class="carousel-caption">
                    <p>标题3</p>
                </div>
            </div>
        </div>
        <!-- 轮播导航-->
        <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

    <!-- 案例-->
    <div class="case container">
        <div class="row">
            <div class="col-md-4">
                <h2>案例1</h2>
                <img src="assets/bc1.jpg" class="img-circle">
            </div>
            <div class="col-md-4">
                <h2>案例2</h2>
                <img src="assets/bc2.jpg" class="img-circle">
            </div>
            <div class="col-md-4">
                <h2>案例3</h2>
                <img src="assets/bc3.jpg" class="img-circle">
            </div>
        </div>
    </div>


    <!-- 产品展示图-->
    <div class="container screenshoot">
        <div class="row item">
            <div class="col-md-5"><img src="assets/1.jpg"></div>
            <div class="col-md-7">
                <h2>展示1</h2>
                <p>展示1展示1展示1展示1展示1展示1展示1展示1展示1</p>
            </div>
        </div>
        <div class="row item">
            <div class="col-md-7">
                <h2>展示2</h2>
                <p>展示2展示2展示2展示2展示2展示2展示2展示2展示2</p>
            </div>
            <div class="col-md-5"><img src="assets/2.jpg"></div>
        </div>
        <div class="row item">
            <div class="col-md-5"><img src="assets/3.jpg"></div>
            <div class="col-md-7">
                <h2>展示3</h2>
                <p>展示3展示3展示3展示3展示3展示3展示3展示3展示3</p>
            </div>
        </div>
    </div>

    <!-- 底部-->
    <div class="container">
        <footer>
            潮威科技有限公司版权所有
            <a href="#">潮威科技</a>
        </footer>
    </div>
</body>
</html>

导航条组件

Bootstrap 的导航条组件：
1、添加一个 nav 标签，并设置 class 为 navbar navbar-default ，role 为 navigation 。
2、然后在里面添加一个类名为container-fluid 的 div ，用来容纳导航条里的其他元素（链接、按钮等）。
3、添加一些导航链接 <li> ，然后把第一个 <li> 的 class 指定为 active ，表示激活状态。

轮播图组件

为了实现一个轮播图效果（也有人叫“幻灯片”），以前我们可能会自己写代码，或者去找 jQuery 的插件。其实 Bootstrap 已经自带了一个轮播组件-Carousel 。

轮播图组件分三部分：carousel-indicators,carousel-inner,carousel-control

<ol class="carousel-indicators">是“指示器”，就是下方的那三个白色小点，标记当前播放到哪张图片了。
<div class="carousel-inner" role="listbox"> 里面是主体内容区域，包括几张图片和对应说明，分别用 <div class="item"> 包裹起来
最后的两个 <a class="left carousel-control"> 元素是手动操作图片左右切换的按钮。

栅格布局

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义classe，还有强大的mixin用于生成更具语义的布局。
这部分我觉得实践最为重要，自己动手把代码写出来比较一下有什么不同，才能理解更为深刻。

最后

Bootstrap 就是这样一个简洁、直观、强悍的前端开发框架。在不断的升级过程中，也越来越优化。
最后，附上个人github账号 ,源码供大家学习。

Kelly Quan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识bootStrap之见

初探BootStrap写在前面准备工作如何学习bootstrap个人demo导航条组件轮播图组件栅格布局最后写在前面Bootstrap是目前最流行的前端框架，接触bootstrap不久，写一份个人版的Bootstrap教程，也分享一下自己在使用的时候出现的问题，希望能对大家有所帮助。准备工作1、下载Bootstrap框架核心文件。2、下载jQuery文件。3、下载HTML5兼容IE的J...
复制链接

扫一扫

专栏目录