快速入门"Bootstrap"

最新推荐文章于 2023-01-03 20:23:39 发布

Style_xing123

最新推荐文章于 2023-01-03 20:23:39 发布

阅读量378

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/Style_xing123/article/details/100834847

版权

JavaWeb 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Bootstrap

一、案例一: 完成响应式布局

Bootsrap开发准备工作

官网： http://www.bootcss.com/
文档： https://v3.bootcss.com/getting-started/

此处以制作简单的旅游网为例

1.使用到的知识点

(1)bs环境搭建

   <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta charset="UTF-8">
        <title>Title</title>
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="../../dist/css/bootstrap.css">
        <!--引入JQ库(先引入)-->
        <script src="../../dist/js/jquery-1.11.3.min.js"></script>
        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script src="../../dist/js/bootstrap.js"></script>
        <!--为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>

(2)布局容器

  <body>
    <!--第一种: 没有铺满屏幕-->
    <!--观察可以发现;离左边屏幕有一定距离-->
    <div class="container">
        哈哈哈哈
    </div>
    <!--第二种: 铺满屏幕-->
    <!--离左边没有什么间隙-->
    <div class="container-fluid">
        哈哈哈哈
    </div>
    </body>

(3)栅格系统

col-lg-n: 大屏电脑
col-md-n: 普通电脑屏幕
col-sm-n: 平板
col-sx-n: 手机端
- n表示占的格子数

<body>
    <!--表示一行-->
    <div class="row">
            <!--左边--> <!-- hidden-sm: 平板隐藏 hidden-xs: 手机端隐藏-->
            <div class="col-md-3 hidden-sm hidden-xs">
                <img src="../img/jiangwai_1.jpg" width="100%">
            </div>
    
            <!--右边-->
            <div class="col-md-9 col-sm12">
    
                <!--第一层 1-->
                <div class="col-md-4 col-sm-6" align="center">
                    <img src="../img/jiangxuan_1.jpg" width="100%">
                    <p>上海直飞三亚5天4晚自由行(春节预售...)</p>
                    <p style="color: red">¥899</p>
                </div>
                <div class="col-md-4 col-sm-6" align="center">
                    <img src="../img/jiangxuan_1.jpg" width="100%">
                    <p>上海直飞三亚5天4晚自由行(春节预售...)</p>
                    <p style="color: red">¥899</p>
                </div>
                <div class="col-md-4 col-sm-6" align="center">
                    <img src="../img/jiangxuan_1.jpg" width="100%">
                    <p>上海直飞三亚5天4晚自由行(春节预售...)</p>
                    <p style="color: red">¥899</p>
                </div>
    
                <!--第二层 2-->
                <div class="col-md-4 col-sm-6" align="center">
                    <img src="../img/jiangxuan_1.jpg" width="100%">
                    <p>上海直飞三亚5天4晚自由行(春节预售...)</p>
                    <p style="color: red">¥899</p>
                </div>
                <div class="col-md-4 col-sm-6" align="center">
                    <img src="../img/jiangxuan_1.jpg" width="100%">
                    <p>上海直飞三亚5天4晚自由行(春节预售...)</p>
                    <p style="color: red">¥899</p>
                </div>
                <div class="col-md-4 col-sm-6" align="center">
                    <img src="../img/jiangxuan_1.jpg" width="100%">
                    <p>上海直飞三亚5天4晚自由行(春节预售...)</p>
                    <p style="color: red">¥899</p>
                </div>
            </div>
        </div>
    </body>

(4)导航条

  <!--白天模式-->
    <nav class="navbar navbar-default">
    </nav>
    <!--黑夜模式-->
    <nav class="navbar navbar-inverse">
    </nav>

(5)Carousel(旋转木马即轮播图)

控制器(Controls)
可以不要,一般留下.
指示器(indicators)
会发现第一个指示器不一样,因为第一个是激活状态(active).
代码如下:

  <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

要改默认激活的话,还必须找到对应的图片改成激活状态.

图片滑动(Wrapper for slides)
旋转木马的更新图片时间间隔(一般3-5秒)

    <script>
        $('.carousel').carousel({
            interval: 3000
        })
    </script>

鼠标放在旋转木马上面会图片停下
想要不停,修改 ‘hover’ (默认值)为null

    <script>
        $('.carousel').carousel({
            interval: 3000,
            pause:null
        })
    </script>

二、其他常用功能

1.表格

table-hover 阴影 (鼠标over: table-hover)
table-bordered(边框)

   <table class="table table-hover table-bordered">
      </table>

类似隔行换色
- info(蓝色)

      <tr class="info">
          </tr>

success(绿色)

      <tr class="success">
          </tr>

warning(黄色)

      <tr class="warning">
          </tr>

danger(红色)

      <tr class="danger">
          </tr>

2.表单

略. 按钮颜色 ‘关键字’ 同隔行换色

3.按钮

超链接没颜色

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

4.按钮组

略.

5.响应式图片及形状

img-responsive: 响应式

    <div class="container">
          <!--修角方形-->
            <img src="../img/girl.jpg" alt="..." class="img-responsive img-rounded">
            <!--圆形-->
            <img src="../img/girl.jpg" alt="..." class="img-responsive img-circle">
            <!--带边框方形-->
            <img src="../img/girl.jpg" alt="..." class="img-responsive img-thumbnail">
        </div>

6.路径导航(面包屑)

路径网址: https://v3.bootcss.com/components/#breadcrumbs

7.分页

略.

8.徽章

手机端用的多,具体略.

9.进度条

略.

10.滚动监听

展示信息,具体略.

11.其他

略.

三、案例二：使用bootstrap制作表格

略.

四、案例三:使用BS完成旅游首页

(1)盒子模型

外边距
- margin-top: 上外边距
- margin-bottom: 下外边距
- margin-left: 左外边距
- margin-right: 右外边距
内边距
- padding-top: 上内边距
- padding-bottom: 下内边距
- padding-left: 左内边距
- padding-right: 右内边距

<div class="col-md-4 col-sm-6 col-xs-12" style="margin-top: 19px" style="padding-right: 20px">
</div>

五、案例四:发布静态网页

1.在Windows中使用Niginx发布静态网页

不能直接点击 nginx.exe 文件进入,需要命令进入.

(1)下载地址: 进入http://nginx.org/网站，下载nginx-1.13.8.zip文件;

(2)进入cmd模式,并切换到Nginx安装文件所在的目录(或直接在安装好的地方打开命令行); win10可以直接双击.双击出现两个nginx.exe
在这里插入图片描述
(3)用start nginx命令，启动Nginx服务器;

(4)打开Windows中的浏览器，访问本机中Nginx服务器首页，Nginx服务器默认监听80端口
在这里插入图片描述

(5)用nginx -s stop命令，停止Nginx
在这里插入图片描述
(6)配置和发布

[1]修改Nginx目录中conf目录下的nginx.conf配置文件，并保存
在这里插入图片描述

[2]index.html需要的文件必须将其放在index.html的同级文件路径下才能进行访问

在这里插入图片描述

[3]用nginx -s reload命令，启动Nginx服务器

在这里插入图片描述

[4]访问

清除浏览器缓存:ctrl+shift+delete