BootStrap引入

简介

Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。
它是为实现快速开发Web应用程序而设计的一套前端工具包。
它支持响应式布局,并且在V3版本之后坚持移动设备优先。
就是复制黏贴一把梭,html\css\js代码的封装组合
#**************************
在Bootstrap出现之前:
  命名:重复、复杂、无意义(想个名字费劲)
  样式:重复、冗余、不规范、不和谐
  页面:错乱、不规范、不和谐
  在使用Bootstrap之后: 各种命名都统一并且规范化。 页面风格统一,画面和谐。
下载地址:
    https://www.bootcss.com/

目录结构

bootstrap-3.3.7-dist/ 
├── css  // CSS文件
│   ├── bootstrap-theme.css  // Bootstrap主题样式文件,官方提供的,一般不用
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css  // 主题相关样式压缩文件
│   ├── bootstrap-theme.min.css.map
│   ├── bootstrap.css  //引用的时候,引用这一个或者下面那个bootstrap.min.css文件就可以了
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css  // 核心CSS样式压缩文件,其他的文件都是在这个核心文件的基础上加了一些其他的样式
│   └── bootstrap.min.css.map
├── fonts  // 字体文件
│   ├── glyphicons-halflings-regular.eot
│   ├── glyphicons-halflings-regular.svg
│   ├── glyphicons-halflings-regular.ttf
│   ├── glyphicons-halflings-regular.woff
│   └── glyphicons-halflings-regular.woff2
└── js  // JS文件
    ├── bootstrap.js
    ├── bootstrap.min.js  // 核心JS压缩文件
    └── npm.js

#由于Bootstrap的某些组件依赖于jQuery,所以请确保下载对应版本的jQuery文件,来保证Bootstrap相关组件运行正常。

BookStrap引入

//在head标签中引入CSS样式文件
    
    

table标签导入


class='table'  //导入CSS样式,
table-bordered //加上表格
table-striped  //给表格加上斑马线效果
table-hover    //鼠标悬浮效果

Bookstrap基础模版



  
    
    
    //屏幕适配
    
    Bootstrap 101 Template
    
    
    
  
  
    
    
    
    
  

布局容器

//.container 类用于固定宽度并支持响应式布局的容器
    
//标签位于屏幕正中间 ...
//.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。
...

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局。//自动捕获屏幕宽度,栅格系统可以进行嵌套
class = 'row'; //导入栅格系统,这一行会分成12列
class = 'col-md-6'//说明占的栅格的个数
如果这一行的栅格系统超过12列,那么就换行
md指的是中性屏幕
sm指的是小型屏幕,格式可以一起写,
    针对不同屏幕进行适配

BootStrap引入_第1张图片

列偏移

//使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)。例如,.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列(column)的宽度。

标题排版

//HTML 中的所有标题标签,

均可使用。另外,还提供了 .h1 到 .h6 类,为的是给内联(inline)属性的文本赋予标题的样式。

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading
//在标题内还可以包含 标签或赋予 .small 类的元素,可以用来标记副标题。

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text
h6. Bootstrap heading Secondary text
//标签的文字会变小

你可能感兴趣的:(BootStrap引入)