Bootstrap使用套路

最新推荐文章于 2024-04-30 15:33:06 发布

weixin_30746129

最新推荐文章于 2024-04-30 15:33:06 发布

阅读量129

点赞数

分类专栏： JAVA 文章标签： bootstrap js css

本文链接：https://blog.csdn.net/weixin_30746129/article/details/104918285

版权

JAVA 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

Boostrap相应式布局（跟随设备自动调整页面），有许多现成的组件，简化前端开发。

1. 到Bootstrap官方网站下载包： https://github.com/twbs/bootstrap/releases

2.解压得到到包，然后复制css、front、js文件夹到项目中，这些文件夹下面的一些文件名有的带min，有的不带。带min的是精简版本，可以加快传输，一般使用在正式部署中；不带min的是详细版，一般用于开发阅读源码；

3.创建html页面，引入需要使用的资源。简单起步看官网 https://v3.bootcss.com/getting-started/

4.官网的实例使用的是网络上的bootstrap，修改<head>标签中的引用链接使其引用我们下载好的bootstrap；同时删除兼容ie的引用；下载相应版本的jquery文件，并将引用修改成我们下载的就好。

如下：

<!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>Bootstrap 101 Template</title>

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

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <script src="jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好，世界！</h1>

</body>
</html>

以后其他页面都是在此页面基础上进行改进

Bootstrap利用栅格系统实现了响应式布局，即每一行划分为12个格子，编程时用classname来设定不同尺寸端设备上每一个单元格占用多少个格子。

如下代码中的<body>，用class="container-fluid"定义一个容器（container-fluid表示占100%屏幕，container表示固定宽度一般两边有留白），用class="row"定义容器里面的一行，用class="col-lg-1 col-sm-2"表示在lg(大屏幕上每一个单元格占1个格子)，在sm平板品屏幕上一个单元格占2个格子（因为我们一行定义了12个单元格，每个单元格占2个格子，所以会自动转换成两行展示）。

col-lg-1：大屏幕，大显示器

col-md-1：中等屏幕，桌面显示器

col-sm-3:小屏幕，平板

col-xm-2：超小屏幕，指手机

<!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>Bootstrap 101 Template</title>

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

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <script src="jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <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>

在想要一些组件时，可以到官网上查找一下自己喜欢的，然后把代码拷贝一下作简单修改即可。html头还是用上边第一个代码里面的头。如下就可以展示导航图了：

<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="#">Brand</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>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <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>

weixin_30746129

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap使用套路

Boostrap相应式布局（跟随设备自动调整页面），有许多现成的组件，简化前端开发。1. 到Bootstrap官方网站下载包：https://github.com/twbs/bootstrap/releases2.解压得到到包，然后复制css、front、js文件夹到项目中，这些文件夹下面的一些文件名有的带min，有的不带。带min的是精简版本，可以加快传输，一般使用在正式部署中；不带m...
复制链接

扫一扫