BootStrap的学习与使用

时间:2022-07-24
本文章向大家介绍BootStrap的学习与使用,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

BootStrap

1.概述:

* 一个前端开发的框架,Bootstrap,来自Twitter,是目前很受欢迎的前端框架。Bootstrap是基于html,css,JavaScript的,它简洁灵活,使得web开发更加快捷。
    * 框架:一个半成品,开发人员可以在框架基础上,再进行开发,简化编码。
    * 好处:
        1.定义了很多css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
        2.响应式布局:
            * 同一套页面可以兼容不同分辨率的设备。

2. 快速入门

1.下载Bootstrap 2.在项目中将这三个文件夹复制 3.创建html页面,引入必要的资源文件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <title>HelloWorld</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

</head>
<body>
<h1>你好,世界!</h1>


</body>
</html>

3. 响应式布局:

1. 栅格系统入门:

* 同一套页面可以兼容不同分辨率的设备;
* 实现:依赖于栅格系统:将一行平均分成12个格子,可以指定元素占几个格子
* 步骤:
    1.定义容器:相当于之前的table
        * 容器分类:
            1.container:两边留白
            2.container-fluid:占满屏幕,宽度100%
    2.定义行:相当于之前的tr        样式row
    3.定义元素。指定该元素在不同的设备上,所占的格子数目。    样式:col-设备代号-格子数目
        * 设备代号:
            1.xs:超小屏幕,手机(<768px):clo-xs-12
            2.sm:小屏幕,平板(≥768px)
            3.md:中等屏幕,桌面显示器(≥992px)
            4.lg:大屏幕 大桌面显示器(≥1200px)
-----------------------------------------------------------
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <title>栅格系统-入门</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>


    <style>
        .inner{
            border: 1px solid red;
        }
    </style>

</head>
<body>

<!--    1.定义容器:-->
<div class="container-fluid">
<!--    2.定义行-->
    <div class="row">
<!--        3.定义元素-->
<!--            在大显示器一行12个格子-->
<!--            在pad上一行6个格子-->
        <div class="col-lg-1  col-sm-2 inner" >栅格</div>
        <div class="col-lg-1 col-sm-2 inner" >栅格</div>
        <div class="col-lg-1 col-sm-2 inner" >栅格</div>
        <div class="col-lg-1 col-sm-2 inner" >栅格</div>
        <div class="col-lg-1 col-sm-2 inner" >栅格</div>
        <div class="col-lg-1 col-sm-2 inner" >栅格</div>
        <div class="col-lg-1 col-sm-2 inner" >栅格</div>
        <div class="col-lg-1 col-sm-2 inner" >栅格</div>
        <div class="col-lg-1 col-sm-2 inner" >栅格</div>
        <div class="col-lg-1 col-sm-2 inner" >栅格</div>
        <div class="col-lg-1 col-sm-2 inner" >栅格</div>
        <div class="col-lg-1 col-sm-2 inner" >栅格</div>
    </div>
</div>


</body>
</html>

2. 栅格系统注意事项:

1.一行中如果格子数目超过12,则超出部分自动换行; 2.栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备; 3.如果真是设备宽度小于了设置栅格类属性的设备代码的最小值,会一个元素沾满一整行。

4. CSS样式和JS插件:

1. 全局CSS样式:

  • 按钮:class=”btn btn-default”
  • 图片:
class="img-responsive":图片在任意尺寸都占100%
<!--hexoPostRenderEscape:<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line">* 图片形状:</span><br><span class="line"></span><br><span class="line">  &#96;&#96;&#96;html</span><br><span class="line">  &lt;img src&#x3D;&quot;...&quot; alt&#x3D;&quot;...&quot; class&#x3D;&quot;img-rounded&quot;&gt;:方形</span><br><span class="line">  &lt;img src&#x3D;&quot;...&quot; alt&#x3D;&quot;...&quot; class&#x3D;&quot;img-circle&quot;&gt;:圆形</span><br><span class="line">  &lt;img src&#x3D;&quot;...&quot; alt&#x3D;&quot;...&quot; class&#x3D;&quot;img-thumbnail&quot;&gt;:相框</span><br></pre></td></tr></table></figure>:hexoPostRenderEscape-->
  • 代码示例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <title>HelloWorld</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

</head>
<body>
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">


<!-- Standard button -->
<button type="button" class="btn btn-default">(默认样式)Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">(首选项)Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">(成功)Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">(一般信息)Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">(警告)Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">(危险)Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">(链接)Link</button>

<hr>

<img src="img/banner_1.jpg" class="img-responsive ">
<img src="img/banner_1.jpg" class="img-responsive img-rounded">
<img src="img/banner_1.jpg" class="img-responsive img-circle">
<img src="img/banner_1.jpg" class="img-responsive img-thumbnail">


</body>
</html>
  • 表格:
    • table:单纯的表格
    • table-bordered:带边框的表格
    • table-hover:鼠标悬停
  • 表单:
    • 给表单项添加:class=”form-control”
  • 示例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <title>HelloWorld</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

</head>
<body>
<table class="table table-bordered">
<tr>
    <th>编号</th>
    <th>姓名</th>
    <th>性别</th>
</tr>
<tr>
    <td>1</td>
    <td>张三</td>
    <td>男</td>
</tr>
<tr>
    <td>2</td>
    <td>李四</td>
    <td>男</td>
</tr>
<tr>
    <td>3</td>
    <td>王五</td>
    <td>男</td>
</tr>
</table>


<hr><hr><hr>

<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>


</body>
</html>

2. 组件:

  • 导航条
  • 分页条
    • 具体代码看文档

3. 插件:

  • 轮播图
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <title>HelloWorld</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

</head>
<body>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <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>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="img/banner_1.jpg" alt="...">
        </div>
        <div class="item">
            <img src="img/banner_2.jpg" alt="...">
        </div>
        <div class="item">
            <img src="img/banner_3.jpg" alt="...">
        </div>
    </div>

    <!-- Controls -->
    <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>

</body>
</html>

示例访问Bootstrap中文网

https://v3.bootcss.com/

文章作者: silentcow

文章链接: http://silentcow.cn/2020/08/06/BootStrap/