bootstrap

目录

简介

组成

浏览器

内核：Blink Webkit  Trident

视口

 分辨率

SVG可缩放矢量图形

开发环境配置 

全局css样式

布局容器 

文本盘版样式

设置子母大小写

列表样式

表格样式

表单样式

按钮

图片样式

辅助样式

栅格系统

---

简介

一个基于HTML.CSS和JavaScript语言编写的框架，具有简单。灵活的特性，拥有样式库。组件和插件。常用来开发响应式布局和移动设备优先的web项目，帮助开发者快速搭建前端页面

组成

基本结构:栅格系统

丰富的css样式库：只需要改变标签的class属性值，就可以给标签应用不同的样式

布局组件：有丰富的组件库

插件：基于jQuery插件，功能强大

浏览器

内核：Blink Webkit  Trident

视口

布局视口：浏览器跨宽度，默认以布局视口打开

视觉视口：用户正在看到的网站区域，区域宽度等于欲动设备浏览器窗口的宽度

理想视口：对设备来讲最理想的窗口尺寸

视口的设置

 分辨率

分辨率越高，图像越清晰；分辨率越低，图像越模糊，放大图片时，像素变小，可观察分辨率

SVG可缩放矢量图形

是一种开放标准描述矢量图形的语言

（1）外层标签，<svg>

（2）属性包括：y width x height数字表示，每个数字之间用空格或逗号隔开，表示定义一个在左上角（x，x）坐标位置，宽度为width高度为height的矩形

开发环境配置 

1.在页面中引入本地文件

    <link rel="stylesheet" href="../node/css/bootstrap.min.css">
    <script src="../node/jquery-3.4.1.js"></script>
    <script src="../node/bootstrap.min.js"></script>

使用CDN加速器

CDN的全称是Content Delivery Network ，即内容分发网路，基本思路是尽可能避开互联网上可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快更稳定。

用法

全局css样式

布局容器 

.container （claa="container"）用于固定宽度并且支持响应式布局的容器

.container-fluid:（clas=““container-fluid””）占据整个视口宽度 100%

文本盘版样式

class="text=left"	文本左对齐
class=“text-right“	文本右对齐
class=”text-center”	文本居中对齐
class=‘’text-justify‘’	文本两端对齐
class=‘’text-nowrap‘’	禁止文本换行

设置子母大小写

class=”text-lowercase”	字母小写
class=‘’text-uppercase‘’	字母大写
class=‘’text-capitalize‘’	手字母大写

列表样式

list-unstyle	无样式列表
list-inline	内联列表（一行显示）

表格样式

class=“table”	表格的全局样式
class=‘ttable able-border’	边框
class=‘table table-stiped’	斑马线效果，隔行变色

class=‘’table-hover	鼠标悬停效果
class=‘table-condense’	紧缩表格

状态类:可以为行或者单元格设置颜色

.active	鼠标悬停在行或单元格上市设置颜色
.success	表示成功动作
.info	标识普通提示信息
.warning	标识警告
.danger	标识危险或潜在带来负面影响的动作

表单样式

（1）html中的表单控件：,<form action="远程服务器地址“method="请求方式”>

（2）<textare class=“form-control”><textarea>

<select class="form-control"><select>

<input class="form-conterol">占屏幕宽度的100%

内敛表单：<form class="form-inline"></form>

水平排列表单：<form class="horizontal">

按钮

<a><buttton><input type="button"><input type="submit">

 <a href="#" class="btn btn=default">公司首页</a>
    <button class="btn btn-default">公司简介</button>
    <input type="button" class="btn btn-default" value="服务中心">
    <input type="submit" class="btn btn-default" value="在线咨询">

btn-default	默认样式
btn-primary	首选项
btn-success	成功
btn-info	一般信息
btn-warning	警告
btn-danger	危险
btn-link	链接

激活：active 禁用：disabled

尺寸属性

btn-lg	大按钮
btn-sm	小按钮
btn-xs	超小按钮

图片样式

class=img-rounded	圆角图片
class=img-circle	圆形图片
class=img--thumbnail	边框圆角

辅助样式

文本颜色：

p class=text-muted	柔和的
p class=text-primary	首选项
p class=text-success	成功
p class=text-info	信息
p class=text-warning	警告
p class=text-danger	危险

背景颜色类  bg-success

三角符号：class=“creat”

显示和隐藏内容：class=“show”  class=“hide”

栅格系统

1.屏幕和视口自动分为最多12列

2.通过行和列的组合来创建页面布局

3.行必须包含在container（固定宽度）或container.fluid（100%宽度）中

4.通过行在水平方向创建一组列，内容放置在列中，只有列，航的子元素

5.如果行中包含的列大于12，多余的列所在的元素作为一个整体另起一行排列

栅格参数：*表示1-12的数字

col-lg-*

col-xs-*

col-sm-*

col-mid-*

列偏移

.col-md-offset（-数字）：表示向右偏移四个列宽度

图标

    <button class="btn btn-default">
        <span class="glyphicon glyphicon-left">左对齐</span>
    </button>

下拉菜单

对齐

分割线

菜单栏

按钮组：将按钮放在btn-group容器中

   <div class="btn-group">
        <button class="btn btn-default">left</button>
        <button class="btn btn-scuess">middle</button>
        <button class="btn btn-primary">right</button>
    </div>

按钮工具栏：<div class="btn-toolbat">按钮</div>

尺寸：

.btn-group-lg	大型按钮组
.btn-group	一般按钮组
.btn-group-sm	小型按钮组
.btn-group-xs	超小按钮组

输入框组

使用inout-group

  <div class="input-group " col-lg-2>
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" placeholder="username">
    </div>

 <div class="input-group "col-mid-2>
        <input type="text" class="form-action" placeholder="username">
        <span class="input-group-btn">
            <button class="btn btn-danger">开始搜索
 <span class="creat"></span></button>
        </span>
      </div>

      <ul class="dropdown-menu">
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li class="divider"></li>
        <li><a href="#"></a></li>
      </ul>