bootstrap使用教程
来源:互联网 发布:excel数据抽样 编辑:程序博客网 时间:2024/06/06 17:35
bootstrap使用教程
大家好,我是一枚新手前端,技术方面交流分享一下。接下来要给大家分享的是bootstrap这种布局方式。废话不多说,直接开始吧。
首先,第一步,直接在百度上面搜索”boostrap”,这个关键词。然后就会出现如下界面:
第二步,直接点击中间的按钮,上面写着”Bootstrap3中文文档(v3.3.7)”的按钮,然后就会出现相应的界面:
第三步,找到顶部的第二个“起步”,如下是引用bootstrap的路径,先要引用css和js。注:(bootstrap.min.css和bootstrap.css)区别不大,一个是压缩过的,一个是格式化过的(就是写的简洁一点,方便看的懂,后面加上min的大多只有一行,密密麻麻的,中间没有空格,所以是压缩过的。)
<!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><!-- 可选的 Bootstrap 主题文件(一般不用引入) --><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
第四步,然后,我们回到顶部,找到”全局 CSS 样式”,点开这个,会出现如下内容:
第五步,右边出现了一行文字,点击栅格化系统,接下来是这样的:
第六步,鼠标往下滚动,会出现”栅格参数”,就像这样:
第七步,鼠标往下滚动,会出现”实例:从堆叠到水平排列”,就像这样:
直接复制代码到编辑器里面就可以实现了.如果实现了效果,其它的效果可以举一反三。
第八步,如果效果实现了,接下来我们开始用bootstrap里面的js插件,首先我们返回到顶部找到”JavaScript 插件”,比如模态框,就点击右边的模态框3个字就行了,就像这样:
第九步,点开以后,会出现如下界面:
<div class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --></div><!-- /.modal -->
复制里面的代码到编辑器就行了
哦,忘了给大家介绍”组件”这个工具了。这个是字体图标,意思就是说:这些看着像图片一样的东西,其实是字体。把代码复制进去就可以了。我们先看看它的介绍:
接下来看看它的实例:
到了这里,如果大家能够熟练运用,写布局应该不成问题。谢谢大家,觉得可以,记得关注哟。
- bootstrap使用教程
- bootstrap-wysiwyg--富文本编辑器使用教程
- 【0030】bootstrap前端框架使用教程
- Bootstrap 教程
- Bootstrap 教程
- BootStrap教程
- Bootstrap教程
- Bootstrap 教程
- Bootstrap 教程
- Bootstrap 教程
- bootstrap教程
- bootstrap教程
- Bootstrap 教程
- Bootstrap-fileinput插件使用教程 支持多文件上传
- 最火的前端开发框架Bootstrap使用教程
- 最受欢迎的前端开发框架Bootstrap使用教程
- 最火的前端开发框架Bootstrap使用教程
- Bootstrap 使用
- 题目:JavaScript编程题 查找字符串"sdddrtkjsfkkkasjdddj"中出现次数最多的字符和次数。
- netty系列3-Java BIO编程
- 神经网络中的各种激活函数
- JDK各个版本的新特性jdk1.5-jdk8
- android中setImageResource加载大图片出现oom解决方案
- bootstrap使用教程
- leetcode 263|264|313. Ugly Number 1|2 313. Super Ugly Number
- Spring @Transactional注解不回滚不起作用无效
- com.google.protobuf学习笔记
- 部署模型-电商网站后台分布式部署方案
- 最简单的卸载ubantu系统(Windows和Linux双系统)
- Brute Force算法介绍及C++实现
- CentOS 7中启动/停止/重启服务
- layer弹出图片二维码