前端框架Bootstrap
一. 使用Bootstrap的准备
因为Bootstrap是基于JQuery的,所以导入Bootstrap前一定要先导入JQuery。
这里先用cdn的方式导入JQuery(用cdn要保证你有网,不然就没用了)。
注意:无论用框架还是什么,都尽量先别用最新版的,因为最新版的Bug要是碰到了就很倒霉,旧版本相对来说比较稳定,我们不做第一个吃螃蟹的人。
1. 用cdn导入JQuery
1.1 打开BootCDN官网:https://www.bootcdn.cn/
1.2 点击JQuery
1.3 选择压缩的版本,点击复制标签
1.4 打开pycharm的设置
1.5 修改创建HTML文件的模板,让每次创建的HTML都自己用cdn导入JQuery
2. 关于Bootstrap代码无提示的解决方式
没有提示是因为浏览器没有加载过Bootstrap。
1. 下载3.X版本-用于生产环境的Bootstrap() 2. 解压后css文件夹中只留一个bootstrap.min.css文件,其他全删掉(min代表是压缩的) 3. js文件夹中只留bootstrap.min.js文件,其他全删掉 4. 将整个解压的包复制到pycharm项目中 5. 用link和script标签导入包中的css和js
这样操作过之后,用cdn导入的都会有代码提示了。
2.1 进入Bootstrap中文网:http://www.bootcss.com/
2.2 点击中文文档3
2.3 点击下载
2.4 下载用于生产环境的Bootstrap
2.5 解压后css文件夹中只留一个bootstrap.min.css文件,其他全删掉(min代表是压缩的)
2.6 js文件夹中只留bootstrap.min.js文件,其他全删掉
2.7 将这个文件夹放入我们pycharm创建的项目中,需要使用的HTML文件中导入js和css即可。
注意:上面将js和css文件夹中删除掉其他Js和css文件是为了方便,不然代码提示的时候会有一堆提示。
这样操作之后按照cdn导入Bootstrap的方式就能正常提示代码了。
3. 用cdn导入Bootstrap
3.1 打开BootCDN官网:https://www.bootcdn.cn/
3.2 点击Bootstrap
3.3 找到3.x版本的Bootstrap(为什么不用新版本的理由同上,这里使用3.4.1版本),还是用压缩版本
3.4 同导入JQuery的1.4步骤与1.5,不过这两个标签一定不能放在JQuery标签前面。
二. Bootstrap的使用
1. 布局容器
<div class = 'container'></div> //页面两边留白,微博也是这种样式<div class = 'container-fluid'></div> //全屏,铺满浏览器//用bootstrap一定要先写一个布局容器(上面两个选一个,内容全写在上面的div里面)<div class = 'container'><div class = 'row'> //一行,默认等分为12块<div class = 'col-md-3'></div> //col-md-占的块数<div class = 'col-md-3'></div><div class = 'col-md-3'></div><div class = 'col-md-3'></div> //每一列里面也默认分为12块,也可以在里面用col-md-占的块数<div class = 'col-md-3'></div> //再加上3后超过12,会跑到下一行</div></div>//如果想实现响应式布局,<div class = 'col-md-3 col-xs-3'></div>,col-xs-块数(在手机上会使用该方式)
2. 列偏移
//类继承加一个col-md-offset-移动的块数<div class = 'col-md-3 col-md-offset-3'></div>//移到最右边(默认左边,内部用的是float)<div class = 'col-md-3 pull-right'></div>
3. 表格(与表单、导航条都是重点)
<table class='table table-hover table-bordered table-striped'><thead><tr><th></th><th></th></tr></thead><tbody><tr><td></td><td></td></tr></tbody></table>
4. 带框的都继承类form-control,一键美颜
5. button按钮的样式
<button class = 'btn btn-success'>绿色</button> <button class = 'btn btn-info'>青色</button> <button class = 'btn btn-warning'>橙色</button> <button class = 'btn btn-danger'>红色</button> <button class = 'btn btn-primary'>蓝色</button> <a href='' class = 'btn btn-success'> //a标签页变成按钮的样子
6. fontawesome有很多图标样式
中文网:http://www.fontawesome.com.cn/faicons/
图标下载后解压下将css和font文件夹复制到pytcharm项目中,要用时导入css即可。
注意:将HTML和css及font都放在同一目录下,
导css文件固定格式:<link rel="stylesheet" href="css/font-awesome.css">
7. sweetalert
7.1 打开网址:https://lipis.github.io/bootstrap-sweetalert/ 点击Vew on GitHub
7.2 下载ZIP
7.3 下载完成后解压
下载文件,解压后的文件复制至项目中(与HTML文件放在同一文件夹内),将dist文件夹的css和js导入即可
使用时如:swal('hello', 'how are you', 'info') //第三个参数有特殊作用,还有'success'和'warning'等
//(JS代码alert改成swal即可)
一些样式该网站往下拉就有,可以复制试试:https://lipis.github.io/bootstrap-sweetalert/
8. 详尽见Bootstrap中文网
https://v3.bootcss.com/
转载于:https://www.cnblogs.com/maoruqiang/p/10976536.html
前端框架Bootstrap相关推荐
- 前端框架 Bootstrap 4.5.2 发布
前端框架 Bootstrap 4.5.2 发布了,此版本主要解决了以下两个问题: 恢复 make-container-max-widths mixin.它将保留在 v4 的代码库中. 从 .row 移 ...
- 前端框架 Bootstrap 4.4.0 发布
前端框架 Bootstrap 4.4.0 发布了,以下是更新内容: 新的响应式 .row-cols 类,用于快速指定跨断点的列数 新的 escape-svg() 函数,可简化用于表单等的嵌入式背景图像 ...
- 前端框架——bootstrap/knockoutjs/angularjs
前端框架--bootstrap/knockoutjs/angularjs 转载于:https://blog.51cto.com/caochun/1854522
- 前端框架BootStrap之柱状图模板
前端框架BootStrap之柱状图模板 写在前面:有段时间没更新博客了.本身是Java后端的.但是公司限制.后端在写.安卓在写.前端也在写.前端也和安卓一样比较菜,有不足的地方望路过的大佬指正.最近做 ...
- 【Java Web前端开发】前端框架 bootstrap+jquery+angularjs探索
文章目录 1 Bootstrap 2 jQuery 3 AngularJS 1 Bootstrap 在Bootstrap的官网介绍中,Bootstrap is the most popular HTM ...
- 前端框架-Bootstrap
Bootstrap 前端框架-twitter <!DOCTYPE html> <html lang="en"> <!--Bootstrap 前端框架- ...
- bootstrap table 适应移动端_前端框架bootstrap和layui有什么区别
做前端的小伙伴肯定都用过或听过Bootstrap和LayUi,小编我虽然不是专业的前端程序员,但是对于前端还是颇有研究,闲暇事情会经常研究各种前端框架的源码,一来可以借鉴优秀框架的思想,二来可以顺便学 ...
- 前端框架——BootStrap学习
BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好 接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...
- jquery 替换括号里面内容_【推荐】前端框架 Bootstrap 5.0 alpha 发布,不再依赖 jQuery...
来源:https://www.oschina.net/news/116540/bootstrap-5-0-alpha-released Bootstrap 团队发布了 Bootstrap 5 的 Al ...
- 前端框架 Bootstrap 5.0 alpha 发布
Bootstrap 团队发布了 Bootstrap 5 的 Alpha 版本.Bootstrap 5 的两个重要变化是,它不再依赖 jQuery,并且不再支持 Internet Explorer.针对 ...
最新文章
- OMG!我居然把新首页设计出来了!
- 蛋疼的mocha库-promise异步测试
- 社交软件这样赚钱:line表情包卖了2亿多美元
- linux 6.7 nfs安装yum,centos6.7下安装配置NFS
- asp.net core利用DI实现自定义用户系统,脱离ControllerBase.User
- springboot - 应用实践(3)springboot的核心
- vbs计算机病毒代码,vbs病毒的简单例子源代码解析
- Excel统一将小写的金额转为大写汉字金额的操作
- CSS边框boder
- 沁恒微USB蓝牙单片机CH573F初步熟悉
- word转换成pdf后图片压缩失真的解决方法
- 夕四今晚加班到2点30,而王二还不打算走《打工人的那些事》
- D语言使用dub编译ms-coff文件
- 本地计算机出现多个网络连接,电脑网络连接出现感叹号?教你一招解决
- google sdk speech-to-text(谷歌语音转文本、谷歌语音转字幕)
- JAVA使用OPC UA 方式与设备通信(milo)
- javaScript 生成随机字母 随机数字的5种方法
- 计算机上机考试能复制粘贴吗?
- dz社区模板源码手机自适应
- 宿迁高考成绩查询2021,2021宿迁市地区高考成绩排名查询,宿迁市高考各高中成绩喜报榜单...
热门文章
- 一个网站哪些页面需要用到redis_网页和网站有什么区别?做一个网站难不难?都需要哪些技能?...
- gin -get请求的小示例2-Handle处理post请求
- 1-csv文件,解决数字不全或者数组+e的显示的问题
- python selenium 等待元素_python3 selenium 设置元素等待的三种方法
- oracle数据库SQL防止超长,SQL Server和Oracle防止数据锁定的比较
- 素因子分解算法python语言_python中求取最小公倍数的两种方法
- python3 unicodedecodeerror_Python3 UnicodeDecodeError
- Ubuntu 搜狗输入法崩溃
- IDEA 不识别的MAVEN 项目应如何处理
- 内存映射函数remap_pfn_range学习——示例分析(1)