首页 > 其他 > 详细

Bootstrap框架、Font Awesome图标、SweetAlert插件

时间:2019-09-12 00:31:28      阅读:82      评论:0      收藏:0      [点我收藏+]

Bootstrap

下载网址:https://www.bootcss.com/

IT行业不要轻易尝试最新版本:

技术分享图片

技术分享图片

 

技术分享图片

还可用BootCDN:

BootCDN网址:https://www.bootcdn.cn/

技术分享图片

技术分享图片

添加文件夹之后导入文件

  因为bootstrap动态效果是依赖于jQuery的,所以你应该先导入jQuery

  使用前端框架,所有的样式,都仅仅只需要用户调节标签类属性即可操作

技术分享图片

全局 CSS 样式(https://v3.bootcss.com/css/

1.使用框架第一步:布局容器(https://v3.bootcss.com/css/#overview-container

技术分享图片

2.栅格系统(详见https://v3.bootcss.com/css/#grid

  bootstrap会将一行均分成12份,row表示一行,col-xxx-xxx表示多份

  使用栅格系统,你脑子里一定要做一个数学运算   12 + - X = ?

技术分享图片

技术分享图片

技术分享图片

技术分享图片

一个row里面还可以无限的嵌套row

技术分享图片

3.排版(详见https://v3.bootcss.com/css/#type

技术分享图片

4.代码(详见https://v3.bootcss.com/css/#code

5.表格(详见https://v3.bootcss.com/css/#tables

格式:

技术分享图片

设置颜色:

技术分享图片

6.表单(详见https://v3.bootcss.com/css/#forms

技术分享图片

技术分享图片

7.按钮(详见https://v3.bootcss.com/css/#buttons

颜色:

技术分享图片

技术分享图片

8.图片(详见https://v3.bootcss.com/css/#images

9.辅助类(详见https://v3.bootcss.com/css/#helper-classes

技术分享图片

技术分享图片

技术分享图片

技术分享图片

组件(https://v3.bootcss.com/components/

10.图标(详见https://v3.bootcss.com/components/#glyphicons

  还有更多图标,专门做图标的网站:http://www.fontawesome.com.cn/

下载:

技术分享图片

技术分享图片

添加文件夹之后导入文件(也支持CDN):

技术分享图片

使用:

技术分享图片

点击图标库之后用哪个图标就点哪个拷贝代码,以及还有更多方法:

技术分享图片

动态图标:

技术分享图片

11.下拉菜单(https://v3.bootcss.com/components/#dropdowns

  按钮式下拉菜单(https://v3.bootcss.com/components/#btn-dropdowns

12.导航条(https://v3.bootcss.com/components/#navbar

13.分页(https://v3.bootcss.com/components/#pagination

14.徽章(https://v3.bootcss.com/components/#badges

15.巨幕(https://v3.bootcss.com/components/#jumbotron

16.页头(https://v3.bootcss.com/components/#page-header

17.缩略图(https://v3.bootcss.com/components/#thumbnails

18.进度条(https://v3.bootcss.com/components/#progress

  动画效果(https://v3.bootcss.com/components/#progress-animated

19.列表组(https://v3.bootcss.com/components/#list-group

20.面板(https://v3.bootcss.com/components/#panels

JavaScript 插件

21.模态框(https://v3.bootcss.com/javascript/#modals

22.下拉菜单(https://v3.bootcss.com/javascript/#dropdowns

23.轮播图(https://v3.bootcss.com/javascript/#carousel

SweetAlert插件

  下载地址:https://lipis.github.io/bootstrap-sweetalert/

技术分享图片

技术分享图片

如何使用(导入文件,同上):

技术分享图片

技术分享图片

效果:

技术分享图片

Bootstrap框架、Font Awesome图标、SweetAlert插件

原文:https://www.cnblogs.com/francis1/p/11509530.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!