bootstrap学习

bootsrap的特点

1. 跨设备,跨浏览器(但我们还是不考虑IE9以下的浏览器)
2. 响应式布局
3. 提供全面的组件
4. 内置jQuery插件
5. 支持HTML和css3
6. 支持less动态样式

bootstrap文档下载

下载最新版的bootstrap的文档,版本是3.3.4
下载之后解压打开之后,会出现以下树状结构

image.png

1. css最重要的是bootstrap.css和压缩文件,是一样的
2. js也是一个压缩版的,一个不压缩的
3. fonts文件夹,是用特定的浏览器工具打开的,我们就不看了.是服务器端可以引入打开的.
4. jquery,引入http的,jquery库

学习准备

1. 开发工具
2. 测试工具,除了常规的浏览器,其实就是作为移动端的测试工具,可以使用chrome的移动web测试工具.
3. 基础,有HTML5的基础,js和jquery 的基础,会学习起来比较轻松.

排版样式

页面主体
准备一个这样的html
这里有判断兼容性.

  
    
    
    
    
    

    
    

    
    
    
  
  
    
你好，世界！

    
    
    
    
  

bootstrap几乎把所有的标签给复写了,加了很多自己的样式,比如margin,color,font-size;
p h1-h6 h1-h6之间还可以嵌入一个small标签,

image.png

内联文本元素: 就是在标签里面添加标记
mark默认的是淡黄色,margin和padding
del也是一个标签,有自己默认的样式

image.png

image.png

对齐
这是代码

我是左对齐
我是右对齐
我是居中对齐
我是不换行

这是效果图

image.png

缩略语不是缩略语,是转成大写,和大小写一样了.
我是abbr标签
效果图:

image.png

class=initialism
字体大小90%,字母变大写

大小写

image.png

我是大写bootstrap
我是小写BOOOTstrap
我是首字母大写bootstrap

效果图:

image.png

引用文本
这个跟左对齐,右对齐的效果一样,没什么说的.

我是引用文本
我是引用文本

列表

image.png

第一个类名,清除默认样式,第二个类名,是一行显示
水平排列

image.png

不加类名,就是默认样式,上下的,加上类名,表示左右显示,

image.png

代码

image.png

效果图:

image.png

表格和按钮

API有,也用过,粘贴复制就可以了.
标签:for 属性规定 label 与哪个表单元素绑定
接下来说一些,我自己在用bootstrap时不经常使用的知识点:
列表组组件:list-group-item类名
面板容器:
panel
panel-default
panel-body panel-heading panel-footer
表格类面板

image.png

响应式嵌入组件

image.png

embed
把其他视频文件转成mp4格式的,怎么转.打开