笔记35-Bootstrap

最新推荐文章于 2024-05-03 01:36:42 发布
最新推荐文章于 2024-05-03 01:36:42 发布
阅读量65 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36463278/article/details/108285113
版权

文章目录

Bootstrap

  1. 概念: 一个前端开发的框架,Bootstrap,来自Twitter,是目前很受欢迎的前端框架.Bootstrap是基于HTML/CSS/Javascript的,它简洁灵活,使得Web开发更加快捷
    • 框架 : 一个半成品软件,开发人员可以在框架的基础上,在进行开发,简化编码
    • 好处:
      • 定义了很多的css样式,和js插件,我们开发人员直接可以使用这些样式和插件得到丰富的页面效果
      • 响应式布局
        • 同一套页面可以兼容不同分辨率的设备
  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>Bootstrap 101 Template</title>

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

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<h1>你好，世界！</h1>

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

相应式布局

  1. 同一套页面可以兼容不同分辨率的设备
  2. 实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子
  3. 步骤:
    1. 定义容器: 相当于之前的table
      1. 容器分类:
        1. container：两边留白
        2. container-fluid：每一种设备都是100%宽度
    2. 定义行。相当于之前的tr 样式：row
      • 设备代号：
        1. xs：超小屏幕 手机 (<768px)：col-xs-12
        2. sm：小屏幕 平板 (≥768px)
        3. md：中等屏幕 桌面显示器 (≥992px)
        4. lg：大屏幕 大桌面显示器 (≥1200px)
    3. 定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目
    4. 注意：
      1. 一行中如果格子数目超过12，则超出部分自动换行。
      2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
      3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。

CSS样式和Js插件

  1. 全局CSS样式：
    • 按钮：class=“btn btn-default”
    • 图片：
      • class=“img-responsive”：图片在任意尺寸都占100%
      • 图片形状
        • < img src="…" alt="…" class=“img-rounded”>：方形
        • < img src="…" alt="…" class=“img-circle”> ： 圆形
        • < img src="…" alt="…" class=“img-thumbnail”> ：相框
    • 表格
      • table
      • table-bordered
      • table-hover
    • 表单
      • 给表单项添加：class=“form-control”
  2. 组件：
    • 导航条
    • 分页条
  3. 插件：
    • 轮播图

具体内容参考文档Bootstrap中文文档

案例

<!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 and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- 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>
        .paddtop{
            padding-top: 10px;
        }
        .search-input{
            float: left;
            border: 2px solid #ffc900 ;
            width: 400px;
            height: 35px;
            padding-left: 5px;
            margin-top: 15px;
        }
        .search-btn{
            float: left;
            border: 1px solid #ffc900;
            width: 90px;
            height: 35px;
            background-color: #ffc900;
            text-align: center;
            line-height: 35px;
            margin-top: 15px;
        }
        .jx{
            border-bottom: 2px solid #ffc900;
            padding: 5px;
        }
        .company{
            height: 40px;
            background-color: #ffc900;
            text-align: center;
            line-height:40px ;
            font-size: 8px;
        }
    </style>
</head>
<body>
<!--页眉-->
<header class="container-fluid">
    <div class="row">
        <img src="img/top_banner.jpg" class="img-responsive">
    </div>
    <div class="row paddtop">
        <div class="col-md-3">
            <img src="img/logo.jpg" class="img-responsive">
        </div>
        <div class="col-md-5">
            <input class="search-input" placeholder="请输入路线名称">
            <a class="search-btn" href="#">搜索</a>
        </div>
        <div class="col-md-4">
            <img src="img/hotel_tel.png" class="img-responsive">
        </div>
    </div>
    <!--导航栏-->
    <div class="row">
        <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="#">首页</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>
                        <li><a href="#">日韩游</a></li>
                        <li><a href="#">泰国游</a></li>

                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
    </div>
    <!--轮播图-->
    <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 " width="100%" alt="...">
                <div class="carousel-caption">

                </div>
            </div>
            <div class="item">
                <img src="img/banner_2.jpg" width="100%" alt="...">
                <div class="carousel-caption">

                </div>
            </div>
            <div class="item">
                <img src="img/banner_3.jpg"  width="100%" 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>
</header>
<!--主体部分-->
<div class="container">
    <div class="row jx">
        <img src="img/icon_5.jpg">
        <span>黑马精选</span>
    </div>
    <div class="row paddtop">
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="img/jiangxuan_3.jpg" alt="">
                <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                <font color="red">&yen; 699</font>
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="img/jiangxuan_3.jpg" alt="">
                <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                <font color="red">&yen; 699</font>
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="img/jiangxuan_3.jpg" alt="">
                <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                <font color="red">&yen; 699</font>
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="img/jiangxuan_3.jpg" alt="">
                <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                <font color="red">&yen; 699</font>
            </div>
        </div>
    </div>

    <div class="row jx">
        <img src="img/icon_6.jpg">
        <span>国内游</span>
    </div>
    <div class="row paddtop">
        <div class="col-md-4">
            <img src="img/guonei_1.jpg">
        </div>
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img src="img/jiangxuan_3.jpg" alt="">
                        <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                        <font color="red">&yen; 699</font>
                   </div>
                </div>
                <div class="col-md-4">
                   <div class="thumbnail">
                        <img src="img/jiangxuan_3.jpg" alt="">
                        <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                        <font color="red">&yen; 699</font>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img src="img/jiangxuan_3.jpg" alt="">
                        <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                        <font color="red">&yen; 699</font>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img src="img/jiangxuan_3.jpg" alt="">
                        <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                        <font color="red">&yen; 699</font>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img src="img/jiangxuan_3.jpg" alt="">
                        <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                        <font color="red">&yen; 699</font>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img src="img/jiangxuan_3.jpg" alt="">
                        <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                        <font color="red">&yen; 699</font>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--页脚-->
<footer class="container-fluid">
    <div class="row">
        <img src="img/footer_service.png" class="img-responsive">
    </div>
    <div class="row company">
        版权所有
    </div>
</footer>

</body>
</html>
Saito__Asuka
关注
专栏目录
Kafka学习笔记 --- bootstrap-servers 和 broker.list区别
杨鑫newlife的专栏
07-07 4万+
Kafka学习笔记 --- bootstrap-servers 和 broker.list区别
AngularJs学习笔记--bootstrap
精选资讯文章
06-04 742
这里是ng-app里面~~~{{1+3*2}}</div><div ng-app class="ng-cloak">这里是ng-app里面~~~{{1+3*2}}
实习笔记03-bootstrap实现就地编辑
m0_52248951的博客
10-15 1956
bootstrap实现就地编辑
BootStrap笔记-BootStrap的安装与使用
IT1995的博客
01-10 571
下载BootStrap，如4.4.1 如下代码； <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CN_TEST1</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&g.
SpringBoot集成Swagger-Bootstrap-UI，页面更清爽！
最新发布
2401_83412087的博客
05-03 473
一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码》点击传送门，即可获取！[外链图片转存中…(img-TASfY4ku-1714671391608)][外链图片转存中…(img-t2aKgqn8-1714671391608)][外链图片转存中…(img-W7OKWjqO-1714671391608)]《一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码》点击传送门，即可获取！
ngx-bootstrap学习笔记
qq_36620379的博客
11-24 452
ngx-bootstrap 是angular的一个UI框架，是Angular快速集成Bootstrap 3或Bootstrap 4组件的最佳方式。ngx-bootstrap可以提高开发效率。 这里我使用的是 @angular/cli 8.2.5，与bootstrap4 1.安装ngx-bootstrap ----在项目目录打开cmd控制台输入 ----使用 ”–save“写入依赖 npm inst...
06--Django笔记--Bootstrap响应式布局
12218的博客
06-23 270
06--Django笔记--Bootstrap响应式布局
bootstrap学习笔记--bootstrap安装环境
abn1122的博客
01-05 117
Bootstrap 安装是非常容易的。此文是本人的学习汇总，便于以后查询学习，同时也希望给大家带来帮助。 下载 Bootstrap 您可以从http://getbootstrap.com/上下载 Bootstrap 的最新版本。当您点击这个链接时，您将看到如下所示的网页： 您会看到两个按钮： Download Bootstrap：下载 Bootstrap。点击该按钮，...
前端-Bootstrap4笔记
害怕也得前进
04-13 424
Bootstrap4笔记
D01-BootStrap的学习笔记
m0_58086930的博客
10-06 109
BootStrap的学习，更利于CSS
web--bootstrap入门基础笔记
09-26
这个"web--bootstrap入门基础笔记"是专科计算机软件设计专业大二学生在一个月内通过32节90分钟课程学习的总结，适用于从零开始学习的初学者，同时也为有一定经验的开发者提供参考。 首先，Bootstrap的核心概念是...
wp-bootstrap-navwalker：一个自定义WordPress nav walker类，使用内置的WordPress菜单管理器，以自定义主题完全实现Twitter Bootstrap 4.0+导航样式（Bootstrap 3可用的v3-branch）。
01-30
它不需要进行任何修改就可以兼容，但是您可以选择将wp-bootstrap-navwalker文本域（在fallback功能中出现两次）替换为主题的文本域。 升级说明 在Walker的版本3和版本4之间，对代码库进行了重大更改。 Walker的版本...
my-bootstrap:Bootstrap原始码阅读笔记
03-23
Bootstrap原始码阅读笔记 原始码版本Bootstrap3，主要对原始码进行了一些注释，尤其是grid模块，在阅读过程中学习Less的使用。 目录结构 少/bootstrap.less 在该文件约会各个模块，最终通过编译bootstrap.less得到...
笔记03-switch&循环语句
Saito__Asuka的博客
07-27 1175
switch语句 格式: switch(表达式){ case 1: 语句体1; break; case 2; 语句体2; break; … default : 语句体n+1; break; } 执行流程： 首先计算出表达式的值 其次，和case依次比较，一旦有对应的值，就会执行相应的语句，在执行的过程中，遇到break就会结 束。 最后，如果所有的case都和表达式的值不匹配，就会执行default语句体部分，然后程序结束掉。 /* * switch语句 */ import java.util.Sc
笔记63-Git分布式版本控制器
Saito__Asuka的博客
02-01 859
文章目录1.Git概述1.1 Git历史1.2 Git与SVN对比1.3 Git工作流程1.4 Git下载与安装2. Git代码托管服务2.1 常用的Git代码托管服务2.2 在码云注册账号2.3 登录码云并创建Git远程仓库2.4 邀请其他用户成为仓库成员3.Git常用命令3.1 环境配置3.2 获取Git仓库3.2.1在本地初始化一个Git仓库3.2.2从远程仓库克隆3.3工作目录、暂存区以及版本库概念3.4 Git工作目录下文件的两种状态3.5 本地仓库操作3.6 远程仓库操作3.6.1 查看远程仓库
笔记33-JavaScript基础笔记
Saito__Asuka的博客
08-26 704
JavaScript 概念: 一门客户端脚本语言 运行在客户端浏览器中的, 每一个浏览器都有JavaScript的解析引擎 脚本语言: 不需要编译,直接就可以被浏览器解析执行了 功能: 可以来增强用户和html页面的交互过程, 可以来控制html元素,让页面有一些动态效果,增强用户体验 JavaScript发展史: 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为 ： C-- ，后来更名为：ScriptEase 1995年，Netscape(网景)
笔记-HTML2
Saito__Asuka的博客
05-10 614
1.1 路径 一 绝对路径 绝对路径一般以盘符为起点来进行查找, 或者就是一个绝对URL地址. 二 相对路径 相对路径就是相对某一个已知的文件为起点进行资源查找. 1.2 相对路径用法 分为三种: 同级路径、下级路径、上级路径。 1 同级路径：同级指的就是 HTML 网页和目标图片在同一级目录里。对于同级路径的使用, 我们只需要在 src 中写入目标图片的名称即可。 2 下级路径：下级指的就是图片在 html 文件的下级目录中。此时我们需要使用一个 / 来向下进行穿透查找 3 上级路径 : 图片在html
笔记06-基础练习
Saito__Asuka的博客
07-27 606
基础练习 1.减肥计划 输入星期数，显示今天的减肥活动 周一：跑步 周二：游泳 周三：慢走 周四：动感单车 周五：拳击 周六：爬山 周日：好好吃一顿 思路： 1:键盘录入一个星期数，用一个变量接收 2:对星期数进行判断，这里用 if 语句实现 3:在对应的语句控制中输出对应的减肥活动 package com.itdemo_01; /* 减肥计划if版本 输入星期数，显示今天的减肥活动 周一：跑步 周二：游泳 周三：慢走 周四：动感单车 周五：拳击 周六：爬山
笔记32-HTML&CSS
Saito__Asuka的博客
08-21 601
HTML标签: 表单标签 表单: 概念: 用于采集用户输入的数据的.用于和服务器进行交互. form 用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围 属性 action : 指定提交数据的URL method : 指定提交方式 分类: 一共7中,2种比较常见 get: 请求参数会在地址栏中显示. 会封装到请求中 请求参数大小是有限制的 不太安全 post: 请求参数不会再地址栏中显示, 会封装在请求中 请求参数的大小没有限制 较为安全 表单项中的数据要想被提交:
Java学习中的前端精要：HTML-CSS-JS-Bootstrap
- 栅格系统：Bootstrap提供了一套灵活的栅格系统，用于创建自适应的网页布局。 - 组件：包括导航条、按钮、表格、模态框等，方便快速构建用户界面。 掌握这些前端基础知识，将使Java开发者具备创建交互式Web页面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值