Bootsrap

用法：

<!DOCTYPE html>

<html lang="en">

<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的HTML标准模板</title>

<!-- Bootstrap -->

<link href="css/bootstrap.min.css" rel="stylesheet">

<!--你自己的样式文件 -->

<link href="css/your-style.css" rel="stylesheet">

<!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->

<!--[if lt IE 9]>

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

<![endif]-->

</head>

<body>

<h1>Hello, world!</h1>

<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>

<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</body>

</html>

标题样式：

Bootstrap中可以通过class名实现h1-h6比如：<div class="h1">Bootstrap标题</div>

在Web的制作中，常常会碰到在一个标题后面紧跟着一行小的副标题：

<h1>Bootstrap标题<small>我是副标题</small></h1>

.lead   ：增大文本字号，加粗；

给文本添加颜色，通过颜色来强调：

.text-muted：提示，使用浅灰色（#999）

.text-primary：主要，使用蓝色（#428bca）

.text-success：成功，使用浅绿色(#3c763d)

.text-info：通知信息，使用浅蓝色（#31708f）

.text-warning：警告，使用黄色（#8a6d3b）

.text-danger：危险，使用褐色（#a94442）

文本对其：在CSS中常常使用text-align来实现文本对其，bootstrap中：

Text-left   左对齐

Text-center 居中对齐

Text-right   右对齐

Text-justify  两端对齐

Bootstrap提供了一套响应式移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

通过class来 操作在相应的屏幕上的布局

手机屏幕（<768px） 类前缀.col-xs-

平板屏幕（>=768px）类前缀.col-sm-

中等屏幕（>=992px）类前缀.col-md-

大屏幕  （>=1200px)类前缀.col-lg-

列数都为12；所有的列（column）必须放在 .row内

<div class=”row”>

<div class=“col-xs-12  clo-md-8  clo-md-6  col-lg-4”>

<div class=“col-xs-12  clo-md-4  clo-md-6  col-lg-4”>

</div>

实例：

<div class=”container”>

<div class=”row”>

内容

</div>

</div>

将最外层的布局元素 .container修改为 .container-fluid  就可以将固定宽度的栅格布局转换成100%宽度的布局

偏移：

有时候我们不希望相邻的列紧挨在一起，可以用列偏移（offset）来实现  给要偏移的元素加 .col-md-offset-*   （*号代表需要偏移的列数）

例如：“col-md-offset-4”就是在中等屏幕的时候向右偏移4列

列排序：

列排序就是改变列表的方向，就是改变左右浮动，并且设置浮动的距离，通过添加类名实现：

“col-md-push-*”和”col-md-pull-*”（*号代表偏移列数）

向右偏移写push   向左写pull；

列的嵌套：

Bootstrap框架还支持列的嵌套

你可以在列中添加一个或者多个行（rom），然后在这个容器中插入列（像前面的一样）

嵌套的列  在写.col-md-*  的时候是按照父盒子的基础上 再进行分配

图标：

Bootstrap框架中也为大家提供了近200个不同的icon图片，而这些图标都是使用CSS3的@font-face属性配合字体来实现的icon效果。

如<span class=”glypicon glyphicon-search”></span>

效果：

按钮：Bootstrap中按钮通过类名“btn”来实现；

<button class=”btn”>基本按钮</button>

效果：

在bottstrap中还可以使用在其他标签元素上，需要在标签元素上添加类名“btn”
<input type="submit" class="btn btn-default" value="input标签按钮"/>
<div class="btn btn-default">div标签按钮</div>
<span class="btn btn-default">span标签按钮</span>

按钮风格：

Bootstap中除了默认的按钮风格还有其他六种风格，功能相同，不同在于按钮的背景颜色，边框颜色和文本颜色；

代码如下：

<button class="btn btn-default">默认按钮</button>
<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-success">成功按钮</button>
<button class="btn btn-warning">警告按钮</button>
<button class="btn btn-danger">危险按钮</button>
<button class="btn btn-link">链接按钮</button>

效果：

按钮大小：

在bootstrap中对按钮的大小也可以定制，通过在基础按钮.btn的基础上追加类名来定制按钮大小

代码：

<button class="btn btn-primary btn-lg">大型按钮</button>
<button class="btn btn-primary ">正常按钮</button>
<button class="btn btn-primary btn-sm">小型按钮</button>
<button class="btn btn-primary btn-xs">微型按钮</button>

效果：

按钮活动状态：

针对按钮的状态小果果主要分为2种，活动状态和禁用状态

活动状态主要包括悬浮状态（hover）,点击状态（active）和焦点状态（focus）

代码：

<button class="btn btn-default active">点击状态</button>
<button class="btn btn-primary focus">焦点状态</button>
<button class="btn btn-success hover">悬浮状态</button>

效果：

禁用状态：要禁用按钮有两种方法实现；

在标签中添加disabled属性；

在元素标签中添加类名”disabled”

代码：

<button class="btn btn-primary " disabled="disabled">通过disabled属性禁用按钮</button>
<button class="btn btn-primary disabled">通过添加类名disabled禁用按钮</button>
<button class="btn btn-primary ">未禁用的按钮</button>

效果：

转载于:https://www.cnblogs.com/cx698038/p/6197066.html

Bootsrap基本应用相关推荐

  1. 计算机实战项目之 [含论文+开题报告+答辩PPT+源码等]基于ssm+bootsrap框架的人力资源考勤系统

    <基于ssm+bootsrap框架实现的人力资源考勤系统>该项目含有源码.论文等资料.配套开发软件.软件安装教程.项目发布教程等 使用技术: 前端使用技术:JSP,HTML5,CSS3.J ...

  2. 三万长文看懂bootsrap是什么,bootsrap有啥用

    目录 1介绍bootstrap 1.1如何进去bootsrap​​​ 1.2bootstrap作用 2.bootstrap全局的CSS样式 2.1 bootstrap模板 2.2容器 2.3栅格系统 ...

  3. bootsrap学习

    <!-- 新 Bootstrap 核心 CSS 文件 --> <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/ ...

  4. bootsrap Glyphicons 字体图标

    2019独角兽企业重金招聘Python工程师标准>>> Glyphicons 字体图标 字体图标是 可以直接使用的. 使用的时候,可以指点 颜色 和 大小的,,,都不会失真的,因为它 ...

  5. bootsrap的font awesome的各种图标，包括动画图标

    http://fontawesome.dashgame.com/#spinning

  6. bootsrap+jquery+组件项目引入文件的常见报错

    做一个项目的时候 ,控制台总是会出现各种bug,其实不用慌张,终结起来也就几种类型的错误,在开发中每次遇到错误都善于总结,下次在看到就会胸有成竹知道是什么情况了,以下是在开发过程中总结的一些错误以及错 ...

  7. bootsrap 外边距_Bootstrap CSS 概览

    Bootstrap CSS 概览 在这一章中,我们将讲解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践. HTML 5 文档类型(Doctype) ...

  8. bootsrap 外边距_Bootstrap 网格系统布局详解

    Bootstrap 提供了一套响应式.移动设备优先的流式网格系统(Grid System),随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 一.什么是网格(Grid)? 在平 ...

  9. 索引-bootsrap

    说明:文章是逆序的,越新的越靠上 下拉菜单面包屑 模态框 导航 表单 按钮 栅格系统 介绍下载与体验

最新文章

  1. ng new ng-pro 报错(创建angular6项目报错)
  2. conda （picard）
  3. 【集训队互测2015】最大异或和
  4. 数据结构 递归讲解
  5. java 钉钉获取用户信息,JAVA maven项目如何使用钉钉SDK来获取token、用户
  6. [C++11]推荐使用auto的场景
  7. docker强制删除none的image镜像
  8. Video 视频播放防作弊和禁止下载
  9. C++模板实现，支持多维，安全数组的完整代码
  10. 图书管理系统源码，图书管理系统开发，图书借阅系统源码一
  11. Excel：VBA编程入门（一）
  12. 智能车四轮组打工日记（二）——单电机驱动硬件设计
  13. 【windows实用工具一】tftpd32+Xshell
  14. 工程测量（平面高程控制网）
  15. vr全景接口_制作面向业务的VR接口
  16. peoplesoft查询
  17. web常见的 HTTP 5xx 状态汇总
  18. MySQL数据库如何改名
  19. 入门级运动蓝牙耳机之好评之王！
  20. java io密集型任务_Java 多线程（一）：CPU密集型、IO密集型

热门文章

  1. js调用浏览器的下载框
  2. vue 生产word_nodejs(officegen)+vue(axios)在客户端导出word文档
  3. qpython3l_介绍一下手机里能敲Python代码的软件，QPython3L和Pydroid3，顺便用有道翻译一下后者...
  4. 【若依(ruoyi)】表格实现tooltip
  5. 【thymeleaf】th:text、[[]]、th:utext、[()]输出变量
  6. window 程序报错 自动重启_好程序员web前端教程之详解JavaScript严格模式
  7. oracle开机时间,[20201106]了解oracle数据库启动时间.txt
  8. java反射的编译过程_Java反射机制小结和实际操作
  9. HTML5调用redis,redis实现从数据库获取数据添加到html页面上
  10. bat批处理命令大全_DOS使用环境变量图文教程，bat批处理脚本查看调用环境变量命令...