如何使用Bootstrap

第一步 下载相关Bootstrap的相关包(如果你在webstorm下写前端 直接创建bootstrap工程就行了)

第二步 引入即可

栅格系统主要用于页面布局

1. 栅格系统必须放在.container类中

2. .row类表示一行和标签下的一个道理

3. 每一行被分为12最小单元

4. .col-md-数字 col代表列 数字代表是占几个最小单元格 md见下表

5. 示例代码

Title .containersmall{ margin-top: 42px; }

页面头 导航栏 内容栏

效果图：

表单用于提交给后台信息

1. .form-group类用于对表单的每一项元素，进行样式添加(比普通表单规范好看)

2. .form-control类用于对input框进行修饰

3. .btn .btn-default 对按钮添加默认样式

4. .btn .btn-primary 蓝色按钮

5. .btn .btn-warning 黄色按钮(警示)

6. .btn .btn-danger 红色按钮(危险)

7. .btn-lg 大按钮

8. .btn-xs 超小按钮

9. .btn-sm 小按钮

哪个好？啥也不说了。比起传统添加样式的方法，bootstrap更快

到底前面五点有怎样的效果呢？

代码比较：

登录 用户名 用户名 密码 密码 登录 登录

表格用于显示后台数据

1. .table类 为普通表格添加基本样式(布局更清晰)

2. .table-striped 表格隔行变色

3. .table-hover 鼠标悬停到某一行变色

代码示例：

普通表单示例图

代码示例

Bootstrap下的表单

代码示例

导航局部导航

什么是导航？就是一个带有.nav的无序列表

1. 带有.nav的无需链表就是一个导航(每一项都是个超链接)

2. .nav-tabs 是横向显示的导航

3. .active 默认选中某一项(添加在上)

4. .nav-pills 胶囊显示导航

全局导航是什么？nav标签里添加 .navbar .navbar-default

1. nav标签配上 .navbar 证明这是一个全局导航

2. 再加上 .navbar=default 采用默认的导航样式

3. div标签里加 .nav-header 下 div(.nav-brand) 写商标

4. 无序列表加 .nav .navbar-nav 写具体导航

5. .nav-left .nav-right 左右浮动

6. .nav-form 搜索栏

本文只用于了解

结束