boostrap框架
boostrap框架
> Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
1. 下载【下载后的框架就是一个css文件】
- 生产环境下的Bootstrap
```css
编译并压缩后的 CSS文件。不包含文档和源码文件。
```
- Bootstrap源码
```css
没有压缩的CSS文件,包含文档和源码文件。
```
2. 引用 【在网页中引用下载好的css文件】
```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">
<title>Bootstrap</title>
<!-- 引用bootstrap css文件 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>
```
3. 框架中的全局样式
1. 在框架中用来表示一号标题到六号标题
.h1 - .h6
2. 在框架中要设置文字对齐方式可以使用如下类名
text-left | text-center | text-right
3. 在网页中表示超小文字的标签
<small>文字</small>
```css
<small>超小文字</small>
或者使用类名
<div class="small">超小文字</div>
```
4. 字母大小写转化对应的类名
text-uppercase ---> 将小写字母都转化为大写字母
text-lowercase ---> 将大写字母转化为小写字母
text-capitalize ----> 将单词首字母转为大写
注意：以上类名中使用都是 text-transform属性实现的
```css
.text-lowercase {
text-transform: lowercase;
}
.text-uppercase {
text-transform: uppercase;
}
.text-capitalize {
text-transform: capitalize;
}
```
5. 去掉列表前的默认样式
```css
.list-unstyled
```
6. 实现li一行显示添加类名
```css
.list-inline
```
7. 设置表格基本样式
```css
.table
.table-bordered 设置边框
.table-hover 设置鼠标悬停时候的样式
详细情况请到链接处------------ boostrap框架
