bootstrap学习
2017-09-11 本文已影响21人
哼_
bootsrap的特点
- 跨设备,跨浏览器(但我们还是不考虑IE9以下的浏览器)
- 响应式布局
- 提供全面的组件
- 内置jQuery插件
- 支持HTML和css3
- 支持less动态样式
bootstrap文档下载
下载最新版的bootstrap的文档,版本是3.3.4
下载之后解压打开之后,会出现以下树状结构
image.png
- css最重要的是
bootstrap.css和压缩文件,是一样的 - js也是一个压缩版的,一个不压缩的
- fonts文件夹,是用特定的浏览器工具打开的,我们就不看了.是服务器端可以引入打开的.
- jquery,引入http的,jquery库
学习准备
- 开发工具
- 测试工具,除了常规的浏览器,其实就是作为移动端的测试工具,可以使用chrome的移动web测试工具.
- 基础,有HTML5的基础,js和jquery 的基础,会学习起来比较轻松.
排版样式
页面主体
准备一个这样的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 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
bootstrap几乎把所有的标签给复写了,加了很多自己的样式,比如margin,color,font-size;
p h1-h6 h1-h6之间还可以嵌入一个small标签,
image.png
内联文本元素: 就是在标签里面添加<mark></mark>标记
mark默认的是淡黄色,margin和padding
del也是一个标签,有自己默认的样式
image.png
image.png
对齐
这是代码
<p class="text-left">我是左对齐</p>
<p class="text-right">我是右对齐</p>
<p class="text-center">我是居中对齐</p>
<p class="text-nowrap" style="width:50px;">我是不换行</p>
这是效果图
image.png
缩略语不是缩略语,是转成大写,和大小写一样了.
<abbr class="initialism">我是abbr标签</abbr>效果图:
image.png
class=initialism
字体大小90%,字母变大写
大小写
image.png
<p class="text-uppercase">我是大写bootstrap</p>
<p class="text-lowercase">我是小写BOOOTstrap</p>
<p class="text-capitalize">我是首字母大写bootstrap</p>
效果图:
image.png
引用文本
这个跟左对齐,右对齐的效果一样,没什么说的.
<blockquote>我是引用文本</blockquote>
<blockquote class="blockquote-reverse">我是引用文本</blockquote>
列表
image.png
第一个类名,清除默认样式,第二个类名,是一行显示
水平排列
image.png
不加类名,就是默认样式,上下的,加上类名,表示左右显示,
image.png
代码
image.png
效果图:
image.png
表格和按钮
API有,也用过,粘贴复制就可以了.
<label></label>标签:for 属性规定 label 与哪个表单元素绑定
接下来说一些,我自己在用bootstrap时不经常使用的知识点:
列表组组件:list-group-item类名
面板容器:
panel
panel-default
panel-body panel-heading panel-footer
表格类面板
image.png
响应式嵌入组件
image.png
embed<embed></embed>
把其他视频文件转成mp4格式的,怎么转.打开
