前端技术——bootstrap

bootstrap

 

Web框架

 

http://how2j.cn/k/boostrap/boostrap-tutorial/538.html#nowhere

 https://www.bilibili.com/video/av29299488/?p=26

 

使用：

1.导入Js和css

a.导入bootstrap的开发环境

<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-theme.css" />
<script src="js/bootstrap.js"></script>

b.导入jq的引入

<script src="js/jquery.min.js"></script>

 

1、基本样式

1.按钮：

2.表格

3.图片

4.表单

5.文本

6.背景

7.其余

8.栅格布局

ex:

<div class="container">
    <div class="row">
        <div class="col-xs-4 ">1/3</div>
        <div class="col-xs-4 ">1/3</div>
        <div class="col-xs-4 ">1/3</div>
    </div>
</div>

 

2、组件

1.添加小图标

2.下拉菜单

3.按钮组 

4.按钮组下拉菜单

5.输入框组

6.导航栏 （面包屑导航）

7.分页设计

8.标签

9.超大屏幕

10.副标题

11.缩略图

12.警告

13.进度条

14.组列表

15.面板

16.顶部底部

 

3、插件

1.模态窗口

2.可切换导航栏

3.提示工具

4.折叠

5.轮播