十八、前端必学Bootstrap美化(上篇)
@Author:Runsen
@Date:2019/05/26
@updated Date:2020/05/30
作者介绍:Runsen目前大三下学期,专业化学工程与工艺,大学沉迷日语,Python, Java和一系列数据分析软件。导致翘课严重,专业排名中下。.在大学60%的时间,都在CSDN。
文章目录
- Bootstrap
- 为什么要用 Bootstrap?
- Bootstrap教程
- Bootstrap 库的下载
- 示例
- 引入文件
- 栅格布局
- Bootstrap 搭建项目
- 1、工程文件的目录结构
- 2、下载并引入 Bootstrap 库文件
- 3、字符集、Viewport设置、浏览器兼容模式
- 4、favicon(站点图标)
- 5、引入相应的第三方文件
- 6、默认字体
- 7、完成页面空结构
- 相关资源
Bootstrap
- 基于HTML,CSS,JS的简洁灵活的流行前端框架及交互组件集
- 为快速WEB开发提供了一套前端工具包,包括布局、网格、表格、按钮、表单、导航、提示等等
- 它的最新版本是 4.3,有不少网站还在用 3.x
为什么要用 Bootstrap?
- Twitter 出品,大厂开源产品 Github
- 基于 Less,丰富的 Mixin
- Responsive 的栅格系统(Grid),移动设备优先
- 丰富的组件(HTML和JS)
- 插件(比如 icon font – Font Awesome)
Bootstrap教程
- 菜鸟教程
- 官方教程
Bootstrap 库的下载
进入中文官网,下载 用于生产环境的 Bootstrap
,下载的目录如下:
PS:dist
表示编译之后的文件,这在库文件中是很常见的。
因为 。
下面的是css和js的文件夹的内容
bootstrap/
├── css/
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-reboot.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ └── bootstrap.min.css.map
└── js/├── bootstrap.bundle.js├── bootstrap.bundle.js.map├── bootstrap.bundle.min.js├── bootstrap.bundle.min.js.map├── bootstrap.js├── bootstrap.js.map├── bootstrap.min.js└── bootstrap.min.js.map
示例
很多时候,见到的像这样的class,比如bg-light
,前面bg
代表background背景的意思,指的是light线色的背景。
因此Bootstrap中的CSS都是属性的缩写,再比如在标签meta
,其实是媒体文件的意思。但是需要用在移动端,加一个,content = width=device-width, initial-scale=1.0
属性,其实就是大家看视频的时候都是全屏的
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- Width=device-width => 表示页面宽度是设备屏幕的宽度;确保网页能被不同屏幕分辨率的设备正确呈现;
- user-scalable=no => 是否可以调整缩放比例(yes/no);
- initial-scale=1.0 => 表示初始的缩放比例 ,以 1:1 的比例呈现,不会有任何的缩放;minimum-scale=0.5:最小允许的缩放比例;
- maximum-scale=2.0:最大允许的缩放比例;
如果maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后,用户只能滚动屏幕,就能让您的网站看上去更像原生应用的感觉。
这样设置后,图片或元素也设置style=”width:100%”,那么图片看起来也是全屏的了。
引入文件
bootstrap.js依赖jQuery,所以要先引用jquery.js 然后引用bootstrap.js
<!-- Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css"><!-- jQuery文件 -->
<script src="/scripts/jquery.min.js"></script>
<!-- Popper文件 -->
<script src="/scripts/popper.min.js"></script>
<!-- Bootstrap 核心 JavaScript 文件 -->
<script src="/scripts/bootstrap.min.js"></script>
栅格布局
<div class="container"><div class="row"><div class="col-md-8"></div><div class="col-md-4"></div></div><div class="row"><div class="col-md-8 col-sm-6 col-lg-4"></div></div>
</div>
栅格布局就是一个container的class。在下篇主要介绍。
Bootstrap 搭建项目
1、工程文件的目录结构
├─ Demo ·························· 项目所在目录
└─┬─ /css/ ······················· 我们自己的CSS文件├─ /font/ ······················ 使用到的字体文件├─ /img/ ······················· 使用到的图片文件├─ /js/ ························ 自己写的JS脚步├─ /lib/ ······················· 从第三方下载回来的库【只用不改】├─ /favicon.ico ················ 站点图标└─ /index.html ················· 入口文件
2、下载并引入 Bootstrap 库文件
见上一段的讲解。引入之后,如果需要引入 html5shiv、respond、jQuery 这三个库文件,就放在lib文件夹中。
- html5shiv:让浏览器可以识别 HTML5 的新标签。如header、footer、section等。
- respond.js:让低版本浏览器可以使用 CSS3 的媒体查询。
另外,我们还需要引入下面这个库:
- jQuery:Bootstrap框架中的所有 JS 组件都依赖于 jQuery 实现。
我们可以把上面这三个库文件拷贝到 lib 文件夹中(注意引用的路径要写正确)。
3、字符集、Viewport设置、浏览器兼容模式
我们将 Bootstrap 的基础模板代码 copy到项目的index.html中,这其中就包括最前面的三个meta标签:
<meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
4、favicon(站点图标)
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
5、引入相应的第三方文件
<!-- 引入 Bootstrap 的核心样式文件(必须) --><link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"><!-- 引入我们自己写的 css 样式文件--><link rel="stylesheet" href="css/my.css">...<script src="lib/jquery/jquery.js"></script><script src="lib/bootstrap/js/bootstrap.js"></script><script src="js/my.js"></script>
注意,先引入第三方的文件,再引入我们自己写的文件。
6、默认字体
在我们默认的样式表中将默认字体设置为:
body{font-family: "Helvetica Neue",Helvetica,Microsoft Yahei,Hiragino Sans GB,WenQuanYi Micro Hei,sans-serif;
}
7、完成页面空结构
先划分好页面中的大容器,然后在具体看每一个容器中单独的情况。
完整代码如下:
<!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, user-scalable=no"><title>我的网站</title><!--建议:第三方引用的css库放在上面,我们自己写的文件,都放在下面--><!-- 引入 Bootstrap 的核心样式文件(必须) --><link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"><!-- 引入我们自己写的 css 样式文件--><link rel="stylesheet" href="css/main.css"><link rel="shortcut icon" type="image/x-icon" href="favicon.ico"><!--[if lt IE 9]><script src="lib/html5shiv/html5shiv.min.js"></script><script src="lib/respond/respond.min.js"></script><![endif]-->
</head><body>
<!-- 头部区域 -->
<header id="header">
</header>
<!-- /头部区域 --><!-- 广告轮播 -->
<section id="main_ad"></section>
<!-- /广告轮播 --><!-- 特色介绍 -->
<section></section>
<!-- /特色介绍 --><!-- 立即预约 -->
<section></section>
<!-- /立即预约 --><!-- 产品推荐 -->
<section></section>
<!-- /产品推荐 --><!-- 新闻列表 -->
<section></section>
<!-- /新闻列表 --><!-- 合作伙伴 -->
<section></section>
<!-- /合作伙伴 --><!-- 脚注区域 -->
<footer></footer>
<!-- /脚注区域 --><script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="js/main.js"></script>
</body></html>
相关资源
- Bootswatch - 免费的 Bootstrap 主题包
- Font Awesome, the iconic font and CSS toolkit
- BootCDN 开源项目免费 CDN 服务
- Bootstrap快速入门 - 云+社区 - 腾讯云
- Buttons - 一个高度可定制的按钮(button) CSS 样式库。
十八、前端必学Bootstrap美化(上篇)相关推荐
- 十九、前端必学Bootstrap美化(下篇)
@Author:Runsen @Date:2020/05/30 作者介绍:Runsen目前大三下学期,专业化学工程与工艺,大学沉迷日语,Python, Java和一系列数据分析软件.导致翘课严重,专业 ...
- web前端必学功法之一:表单校验(1)
web前端必学功法之一:表单校验 案例效果: 这里的布局采用的是bootstrap布局 <div class="container" style="margin-t ...
- 前端必学 - 大文件上传如何实现
前端必学 - 大文件上传如何实现 写在前面 问题分析 开始操作 一.文件如何切片 二.得到原文件的hash值 三.文件上传 四.文件合并 技术点总结[重要] 一.上传文件? 二.显示进度 三.暂停上传 ...
- web前端必学功法之一:用户选择爱好
web前端必学功法之一:用户选择爱好 案例实现效果: 首先做这个页面效果,我们要把页面布局给写好,每个网站做好页面可以解决很大的问题. css代码,这里的页面采用Grid布局 <style> ...
- web前端必学功法之一:留言板
web前端必学功法之一:留言板 案例效果: css部分 <style>.container{width: 600px;}.mes-board{margin: 25px 0;padding: ...
- web前端必学功法之一:轮播图
web前端必学功法之一:轮播图 效果演示: <style>* {margin: 0;padding: 0;}/* 去除a标签的下划线 */a {text-decoration: none; ...
- web前端必学功法之一:省市联动
web前端必学功法之一:省市联动 案例:js实现下面功能 **<!-- 省市联动思路分析:1.准备元素:定义省份与城市的下拉框2.绑定事件:绑定省份下拉框的change事件3.准备数据:准备数组 ...
- web前端必学功法之一:秒表实现
web前端必学功法之一:秒表实现 功能案例: css样式:<style>.date{width: 200px;height: 50px;background-color: black;bo ...
- web前端必学功法之一:五星好评
web前端必学功法之一:五星好评 案例效果: <!--思路分析:1.设置鼠标样式,当鼠标放到星星上时,修改鼠标的样式2.定义元素:通过表格的td元素来存放星星3.绑定事件:绑定每一个星星的鼠标悬 ...
最新文章
- Windows10下安装配置 perl 环境
- cassandra框架模型之一——Colum排序,分区策略 Token,Partitioner bloom-filter,HASH
- 计算机基础课程教学创新,计算机基础课程教学学生创新能力的培养-计算机基础论文-计算机论文(12页)-原创力文档...
- mysql数据库局限性_Mysql分区表局限性总结
- OpenStack_I版 1.准备过程
- Docker安装Oracle教程
- [Ext JS 4] 布局之实战一 - 中间区块不会自动伸展 (tab)
- Topic Model的分类总结(LDA变种)
- 中小企业管理软件(管家婆辉煌版2top+)安装教程
- java中文网站总汇
- 关键路径过程详解、算法及其实现
- 微信小程序请求函数的封装
- 软文发稿推广要怎么做?
- firefox装在linux_在 Linux 中安装 Firefox
- python3d_Power BI将超越python和D3,成为数据可视化的福音、定性数据分析的未来?...
- Yii中CGridView单元格组件和数据提供者的使用
- 7月5号cf服务器维护,cf2015年5月7日维护到几点 cf5月7日更新公告
- VB.net:使用Visual Studio 2010中的VB.net语言工具箱DataGridView调用SQL数据库Database的表格文件
- CentOS 安装 laradock 以及运行 Laravel 项目
- 前端之HTML基础扫盲
热门文章
- 启明云端分享| 基于ESP32-S2模块的彩屏86盒应用,有哪些亮点呢
- php 插入数据 不成功,thinkphp5连接oracle用insert插入数据失败
- mingw64 下 java_MinGW x64 for Windows安装
- python opencv源码_caffegpu源码编译
- ibe加密原理_ibe 基于身份的IBE加密源代码,采用C++语言编写,能够运行。 Crypt_De algrithms 解密 238万源代码下载- www.pudn.com...
- “逃离”互联网:蚂蚁金服原副总裁离职,重返学术界
- DDoS攻击愈演愈烈,反射攻击举足轻重
- annotation java log_使用java注释来注入logger依赖关系
- 虚拟机ubuntu19.04下设置idea快捷键
- 通用测试用例大全(转自——知了.Test)