Bootstrap快速入门并且建立常用模板
对于移动端,能够快速搭建网站,操作相对简单 ,更容易掌握,这篇文章就介绍一下BootStrap
一 什么是Bottstrap
一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷
二 使用Bootstrap好处
1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
2. 响应式布局。
* 同一套页面可以兼容不同分辨率的设备。
三、快速入门
1. 下载用于生产环境的Bootstrap
2. 在项目中将这三个文件夹复制
3. 创建html页面,引入必要的资源文件
代码如下:
<!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">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap HelloWorld</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好,Bootstrap的世界!</h1>
</body>
</html>
Bootstrap快速入门并且建立常用模板的更多相关文章
- Bootstrap快速入门
Bootstrap有两个重点,一个是概念的理解,理解bootstrap是如何通过div来代替过去的table布局的:一个是常用结构的熟悉,做到需要的组件马上就能找到,小修修改改可用就行.其最帅的一点就 ...
- [PowerShell] 快速入门, 基本语法, 常用类型, 函数, .NET 互操作
PowerShell 快速入门 开始之前, 我们认定你已经有一定的编程基础, 熟悉 .NET 中的类型与对象. 此文章对于 .NET 开发者来说更简单哦! 在 PowerShell 中, 几乎一切都是 ...
- bootstrap快速入门笔记(四)-less用法指南, mixin和变量
一,less变量,less文件 1.bootstrap.less 这是主要的 Less 文件.该文件中导入了一些其他的 less 文件.该文件中没有任何代码. 2.forms.less 这个 Less ...
- jQuery UI 之 Bootstrap 快速入门
转载自(http://www.shouce.ren/example/show/s/6444) 1. 下载 这个页面是用来展示 jQuery UI Bootstrap 项目的 -- 我们将 Bootst ...
- bootstrap快速入门笔记(九)-响应式工具
一,可用的类 超小屏幕手机 (<768px) 小屏幕平板 (≥768px) 中等屏幕桌面 (≥992px) 大屏幕桌面 (≥1200px) .visible-xs-* 可见 隐藏 隐藏 隐藏 ...
- bootstrap快速入门笔记(八)-按钮,响应式图片
一,默认样式:.btn-default , .btn-primary , .btn-success ,.btn-info, btn-warning ,btn-link 二,尺寸:.btn-lg, . ...
- bootstrap快速入门笔记(七)-表格,表单
一,表格 1,<table>中加.table类 2,条纹表格:通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式. **跨浏览器兼容性: ...
- bootstrap快速入门笔记(二)-栅格系统,响应式类
一,栅格系统大致有以下: 1,行row必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,一行有12列 2.“列(column)”在水平方向创建一 ...
- bootstrap快速入门笔记(一)
一,头部基本格式:<head lang="en"> <meta charset="UTF-8"> <meta name=" ...
随机推荐
- robotframework+python3+selenium之web相关关键字---第二集
1.F5可查看所有关键字,如图: 2.浏览器相关关键字: 2.1 Open Browser https://www.baidu.com chrome # 打开浏览器,rf默认使用火狐浏 ...
- Tomcat 在IE中下载rar文件直接以乱码方式打开解决方案
这几天一直很纳闷,在Tomcat部署的网站中的下载文件中,如果文件是rar类型的,一点击下载rar文件就直接打开,并且出现乱码,右键另存为浏览器也是默认为html格式,一直以为是浏览器IE的问题,后来 ...
- bypass_safedog
1.SQL注入 手工bypass要点 先通过破坏关键字测试出拦截规则 之后进行针对性绕过 1.Mysql 1.1.联合注入 0x01 and绕过 直接 and 1=1 直接就会被拦截 在数值的前面加特 ...
- Python模块和模块引用(一)
""" import my_module as mm courses = ['History','Math','Physics','CompSci'] index = m ...
- php操作redis--列表篇
常用函数:lpush/rpush/lpop/rpop/lrange/lrem等 应用场景:关注列表,粉丝列表,发送缓冲队列等 特点:可理解为数组操作,插入和删除数据按照一定的规律排序,数据可重复 连接 ...
- HTML ASCII 参考手册
HTML 和 XHTML 用标准的 7 比特 ASCII 代码在网络上传输数据. 7 比特 ASCII 代码可提供 128 个不同的字符值. 7 比特 可显示的 ASCII 代码 结果 描述 实体编号 ...
- PHP FILTER_SANITIZE_URL 过滤器
定义和用法 FILTER_SANITIZE_URL 过滤器删除字符串中所有非法的 URL 字符. 该过滤器允许所有的字母.数字以及 $-_.+!*'(),{}|\^~[]`">< ...
- SQL中忘记用户登陆密码该如何修改
1.每个数据库登陆之前都必须先启动它本身的数据服务,SQL数据库也不例外,首先我们要做的是先打开我们的SQL数据服务! 2.随后在我们的开始菜单中找到我们的SQL启动图标,打开即可 3.弹出登录窗体( ...
- 最全的PS快捷键大全!
一.工具箱 01.(多种工具共用一个快捷键的可同时按[Shift]加此快捷键选取)02.矩形.椭圆选框工具 [M]03.裁剪工具[C]04.移动工具[V]05.套索.多边形套索.磁性套索[L]06.魔 ...
- (转)oracle group by 和order by的关系(在一起使用注意事项)
转:http://lzfhope.blog.163.com/blog/static/636399220092554045196/ 环境:oracle 10g单单group by 或者order by本 ...