前端学习笔记：bootstrap(13)

最新推荐文章于 2019-11-02 20:41:14 发布
最新推荐文章于 2019-11-02 20:41:14 发布
阅读量127 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/elizabethxxy/article/details/101712484
版权

前端学习笔记：bootstrap(13)

 

四、综合案例：完成黑马旅游的网站首页
1.案例需求：使用前面学习过的HTML、CSS和Bootstrap制作黑马旅游的首页
2.案例分析：
(1)导入框架
1_导入bootstrap框架和jQuery框架
2_创建一个index.css文件在css文件夹，我们写的类样式都放在这个文件中。

 

具体实现过程和相关代码，再拆分成一篇篇文章，就太零散了，单看一篇已经不能形成整体的思路。我就把所有bootstrap的笔记上传到CSDN上了，详见：https://download.csdn.net/download/elizabethxxy/11813986

黄道婆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端学习笔记：Bootstrap框架入门
howard2005的专栏
02-22 1030
前端学习笔记：Bootstrap框架入门 一、Bootstrap概述 1、基本信息 ​Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstr...
前端学习笔记：bootstrap(3)
黄道婆的专栏
09-25 341
前端学习笔记：bootstrap(3) 6.栅格系统的结构 示例1：需求： 有以下8个div,要求中大型设备时每行显示4个div,小设备时每行显示3个div,微型设备时每行显示2个div. 备注:需要给每个div设置class属性值为:col-md-3 col-sm-4 col-xs-6 意思是:一行都是12格;当中等屏幕的时候 每个div占3格,一行最多4个;当小屏幕的时候一个div占4...
2013.03.13 bootstrap 模态框使用
我能坚持多久的专栏
03-13 1167
描述：点击“回款”按钮，在当前页面之上弹出一个页面 部分1： 回款 理解：data-target属性：寻找id为payment_records的模态格式的div内容； href属性：访问后台、获取数据、返回到form.jsp,并将此内容加载到modal格式的div的body区域（）中 部分2：               保存     取消
前端学习笔记：bootstrap(1)
黄道婆的专栏
09-25 167
前端学习笔记：bootstrap(1) bootstrap ---- 一、bootstrap介绍 bootstrap中文官网：www.bootcss.com 1.bootstrap是前端开发框架，在web开发中，用于表示层。 2.bootstrap的优势： (1)移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。 (2)浏览器支持：Bootstrap...
前端学习笔记：bootstrap(2)
黄道婆的专栏
09-25 117
前端学习笔记：bootstrap(2) 二、栅格系统 1.组成 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的特点： (1)“行（row...
前端学习笔记：bootstrap(5)
黄道婆的专栏
09-25 127
前端学习笔记：bootstrap(5) 7.栅格系统中类的小结 类样式名 作用 .container 栅格系统容器，类似于table，固定宽度。 .container-fluid 占100%宽度。 .row 表示一行。 .col-xs-n 微型设备占n列。 .col-sm-n 小型设备占n列。 .col-md-n 中型设备占n列。 .col-lg-n 大型设备占n列。...
前端学习笔记：bootstrap(12)
黄道婆的专栏
09-29 438
前端学习笔记：bootstrap(12) (2)轮播图 这个组件用于轮播显示一组图片，类似于旋转木马，页面加载就自动运行，也可以通过点击左右的两个箭头向左或向右翻页。 a.组成的类样式名 类样式名字 描述 carousel slide 轮播图最外面容器 carousel-indicators 指示器：中间的小圆点 carousel-inner 内部放所有图片的容器 carou...
前端学习笔记：bootstrap(10)
黄道婆的专栏
09-25 100
前端学习笔记：bootstrap(10) c.禁用和激活状态 链接在不同情况下可以定制。你可以给不能点击的链接添加 .disabled 类、给当前页添加 .active 类。下面的按钮中，<<这个按钮不能点击，数字1被激活，数字5不能点。 案例代码 <!DOCTYPE html> <html lang="en"> <head> &lt...
前端学习笔记：bootstrap(7)
黄道婆的专栏
09-25 191
前端学习笔记：bootstrap(7) 4. 表格 (1)与表格有关的类样式 表格的样式 类名 基本实例 table 条纹状表格 table-striped类可以给<tbody>之内的每一行增加斑马条纹样式。 带边框的表格 table-bordered类为表格和其中的每个单元格增加边框。 鼠标悬停 table-hover类可以让<tbody>中的每一行对鼠...
前端学习笔记：bootstrap(8)
黄道婆的专栏
09-25 374
前端学习笔记：bootstrap(8) 5.组件 (1)导航条 a.导航条的作用:导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且 在视口（viewport）宽度增加时逐渐变为水平展开模式。 b.导航条的组成:整个导航条就是一个nav标签 导航条的类样式 描述 navbar navbar-default 默认导航条的样式。 navba...
前端学习笔记：bootstrap(6)
黄道婆的专栏
09-25 209
前端学习笔记：bootstrap(6) 三、全局CSS样式 1.按钮 (1)普通按钮 a. <a>、<button> 或 <input> 元素都可以设置成按钮的样式: Link, Button, Input, Submit。 b. 预定义样式的按钮：可以快速创建一个带有预定义样式的按钮: (默认样式)Default, (首选项)Primary, (成功)...
常见js的API测试
黄道婆的专栏
09-12 808
常见js的API测试 ---- <script type="text/javascript"> var str="abcdefdefabczzzabc"; //console.log(str.concat("aaaa"));//abcdefdefabczzzabcaaaa //console.log(str.index...
前端学习笔记：省市区三级联动
黄道婆的专栏
11-02 754
前端学习笔记：省市区三级联动 一、数据库 sql表是自关联的表。 表名：province_city_district 字段： id：区域自身的id pid：区域的父级id name：区域自身的名字 二、搭工程 1. 创建工程：Create New Project-->Empty Project, Project name=exercises01, Finish 2. 创建...
前端学习笔记：BeanUtils工具类的使用
黄道婆的专栏
11-02 243
前端学习笔记：BeanUtils工具类的使用 BeanUtils的用法 ==== BeanUtils的API docs: https://docs.spring.io/spring/docs/current/javadoc-api/index.html?index-files/index-1.html BeanUtils的作用：可以将jsp页面传过来的多个参数封装成一个对象。 一、搭...
推荐一些前端学习比较好的网站
黄道婆的专栏
09-12 206
推荐一些前端学习比较好的网站 以后碰到好的网站，还会在这里补充。 欢迎大家留言补充 。 ==== 菜鸟教程 https://www.runoob.com/
IDEA中配置tomcat
黄道婆的专栏
10-09 190
IDEA中配置tomcat 1_9_IDEA中配置tomcat 因为我们开发的时候都是用IDE,所有我们要将idea和tomcat集成到一起，可以通过idea就控制tomcat的启动和关闭 1_9_1_在工程中配置tomcat服务器 点击OK回到配置目录,然后再次点击"Configure" 此步不操作的话,会出现两个名称的服务器,一个"tomcat8",一...
案例学习笔记：前端：案例_过滤器Filter_解决全站乱码问题
黄道婆的专栏
10-09 173
案例学习笔记：前端：案例_过滤器Filter_解决全站乱码问题 案例_过滤器Filter_解决全站乱码问题 ---- 核心代码： //解决POST的中文乱码 request.setCharacterEncoding("utf-8"); //解决响应体的中文乱码 response.setContentType("text/html;charset=utf-8"); 搭工程： File...
案例学习笔记：前端：案例_过滤器Filter_权限校验过滤器
黄道婆的专栏
10-09 170
案例学习笔记：前端：案例_过滤器Filter_权限校验过滤器 案例_过滤器Filter_权限校验过滤器 ---- 步骤实现 1.实现基本的功能 *_实现登录 *_index.jsp(表单) *_LoginServlet__UserService__UserDao(创建集合,存放用户信息) *_welcome.jsp 2.添加权限校验过滤器（重点） *...
Spring学习笔记：Bootstrap框架详解
"这是一份关于Spring框架的资料笔记，主要涵盖了Spring的使用基础和一些相关的Web开发技术，如Bootstrap前端框架的介绍和应用。" 本文将深入探讨Spring框架的基础知识以及Bootstrap的常见功能，帮助读者更好地理解...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值