欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Bootstrap

程序员文章站 2022-06-18 16:13:03
一、Bootstrap简介 1、Bootstrap是什么? Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个开源的前端开发框架 基于HTML、CSS、JavaScript,代码简洁、视觉优美,用来快速开发基于PC以及移动端的Web页面,更快速、简单。 201 ......

一、Bootstrap简介

1Bootstrap是什么?

Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个开源的前端开发框架

基于HTMLCSSJavaScript,代码简洁、视觉优美,用来快速开发基于PC以及移动端的Web页面,更快速、简单。

2010  6 月,Twitter 内部的工程师为了解决前端开发任务中的协作统一问题。经历

各种方案后,Bootstrap 最终被确定下来,并于 2011  8 月发布。经过很长时间的迭代升

级,由最初的 CSS 驱动项目发展成为内置很多 JavaScript 插件和图标的多功能 Web 前端

的开源框架。

Bootstrap 最为重要的部分就是它的响应式布局,通过这种布局可以兼容 PC 端、PAD

以及手机移动端的页面访问。

 

Bootstrap官网:http://

中文网:

版本:v3.0v4.0

2、特点

跨设备、跨浏览器

兼容所有主流浏览器,包括IE7IE8

响应式布局

支持PC、移动端(手机、PAD)等,移动设备优先。

丰富的组件

表单、下拉菜单、导航、面板、徽章、标签等

内置jQuery插件

模态框、工具提示、弹出框、轮播图等。

支持动态样式

LESS SASS,可以使用变量、嵌套、混合等,编写样式更快、更灵活

支持HTML5/CSS3

二、起步

下载Bootstrap

CDN:Content Delivery Network,即内容分发网络,提供稳定快速的资源网络

优化网站:

Jscss等一些库文件,压缩

CDN

 

解压后,目录呈现这样的结构:

bootstrap/

├──   css/

│ ├──   bootstrap.css

│ ├──   bootstrap.css.map

│ ├──   bootstrap.min.css

│ ├──   bootstrap-theme.css

│ ├──   bootstrap-theme.css.map

│ └──   bootstrap-theme.min.css

├──   js/

│ ├──   bootstrap.js

│ └──   bootstrap.min.js

└──   fonts/

├──   glyphicons-halflings-regular.eot

├──   glyphicons-halflings-regular.svg

├──   glyphicons-halflings-regular.ttf

├──   glyphicons-halflings-regular.woff

└──   glyphicons-halflings-regular.woff2

 

主要分为三大核心目录:css(样式)js(脚本)fonts(字体)

1.css 目录中有四个 css 后缀的文件,其中包含 min 字样的,是压缩版本,一般使用这个;不包含的属于没有压缩的,可以学习了解 css 代码的文件;而 map 后缀的文件则是css 源码映射表,在一些特定的浏览器工具中使用。

2.js 目录包含两个文件,是未压缩和压缩的 js 文件。

3.fonts 目录包含了不同后缀的字体文件。

准备

开发工具:Hbuild

测试工具:Firfox   chrome (自带响应式设计模式)

基本模板

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <!-- IE浏览器使用最新的引擎渲染页面 -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 移动端适配 -->

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>基本模板</title>

 

    <!-- Bootstrap核心css文件 -->

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

<!--CDN-->

    <!--<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->

 

    <!-- 如果IE版本低于IE9,该注释生效,html5shiv.min.js让其支持html5标签,respond.min.js让其支持媒体查询 -->

    <!--[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

  </head>

  <body>

    <h1>你好,世界!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="js/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="js/bootstrap.min.js"></script>

  </body>

</html>

注意:控制台报错:

源映射错误:TypeError: NetworkError when attempting to fetch resource. 源 URL:file:///E:/Bootstrap/code/css/bootstrap.css 源映射 URL:bootstrap.css.map[详细了解]

如果不将bootstrap.css.mapbootstrap.css放在一个目录下将报源映射错误

栅格系统

Bootstrap 的栅格系统,提供了一套响应式、移动设备优先的流式栅格系统。

一.移动设备优先

有一份非常重要的 meta,用于设置屏幕和设备等宽以及是否运行用户缩放,及缩放比例的问题。

二.布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个.container 容器。由于 padding 

属性的原因,这两种容器类不能相互嵌套。

.container//固定容器

.container-fluid//100%宽度

 

栅格系统中,浏览器会随着屏幕的大小的增减自动分配最多 12 列。通过一系列的行(row)

与列(column)的组合来创建页面布局。工作原理如下:

  1. “行(row”必须包含在  .container (固定宽度)或  .container-fluid 100%宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。
  2. 通过“行(row”在水平方向创建一组“列(column”。

3.你的内容应当放置于“列(column”内,并且,只有“列(column”可以作为行(row”的直接子元素。

4.类似  .row    .col-xs-4  这种预定义的类,可以用来快速创建栅格布局。

5.栅格系统中的列是通过指定 1  12 的值来表示其跨越的范围。例如,三个等宽的列可以使用三个  .col-xs-4  来创建。

6.如果一“行(row”中包含了的“列(column”大于  12,多余的“列(column所在的元素将被作为一个整体另起一行排列。

<!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>栅格系统</title>

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

    <!--<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->

    <!--[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="js/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="js/bootstrap.min.js"></script>

 

<style>

.col1{

background:red;

}

.col2{

background:#666;

}

.col3{

background:blue;

}

.col4{

background:green;

}

 

</style>

 

  </head>

  <body>

  <!--常用设备尺寸<768[768,992)[992-1200)>=1200>-->

<div class="container">

<!--根据尺寸变化,当到达临界值时会自动适应,匹配相应的设置{实现响应式布局}-->

<div class="row">

<div class="col1 col-xs-3 col-sm-2 col-md-1 col-lg-3">col1</div>

<div class="col2 col-xs-3 col-sm-2 col-md-1 col-lg-3">col2</div>

<div class="col3 col-xs-3 col-sm-2 col-md-1 col-lg-3">col3</div>

<div class="col4 col-xs-3 col-sm-2 col-md-1 col-lg-3">col4</div>

</div>

<hr/>

 

<!--较大尺寸没有设置时默认会继承较小尺寸-->

<div class="row">

<div class="col1 col-xs-3">col1</div>

<div class="col2 col-xs-3">col2</div>

<div class="col3 col-xs-3">col3</div>

<div class="col4 col-xs-3">col4</div>

</div>

<hr/>

 

<!--较小尺寸未设置时默认会独占一行-->

<div class="row">

<div class="col1 col-md-3">col1</div>

<div class="col2 col-md-3">col2</div>

<div class="col3 col-md-3">col3</div>

<div class="col4 col-md-3">col4</div>

</div>

<hr/>

 

<!--列网格总数不能超过12,否则多余的列另起一行-->

<div class="row">

<div class="col1 col-sm-4">col1</div>

<div class="col2 col-sm-4">col2</div>

<div class="col3 col-sm-5">col3</div>

<div class="col4 col-sm-2">col4</div>

</div>

<hr/>

 

</div>

  </body>

</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>栅格系统</title>

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

    <!--<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->

    <!--[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="js/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="js/bootstrap.min.js"></script>

 

<style>

.row div{

background:#ccc;

border: 1px solid red;

}

</style>

 

  </head>

  <body>

  <!--常用设备尺寸<768[768,992)[992-1200)>=1200>-->

<div class="container">

<!--列偏移,添加类col-md-offset-*,只能向右偏移,后面的都会向右移动-->

<div class="row">

<div class="col-md-4">col1</div>

<div class="col-md-4 col-md-offset-2">col2</div>

<div class="col-md-2">col3</div>

</div>

<hr/>

 

<!--列排序,添加类,col-md-push-*(向右)col-md-pull-*(向左),可以实现列的交换-->

<div class="row">

<div class="col-md-4 col-md-push-2">col1</div>

<div class="col-md-2 col-md-pull-4">col2</div>

<div class="col-md-4">col3</div>

</div>

<hr/>

 

<!--列嵌套-->

<div class="row">

<div class="col-md-6">

<div class="col-md-3">col1</div>

<div class="col-md-3">col2</div>

<div class="col-md-3">col3</div>

<div class="col-md-3">col4</div>

</div>

<div class="col-md-6">col2</div>

</div>

</div>

  </body>

</html>

排版样式

1.页面主体

Bootstrap 将全局 font-size 设置为 14pxline-height 行高设置为 1.428(

20px)<p>段落元素被设置等于 1/2 行高( 10px);颜色被设置为#333

2.标题

Bootstrap 分别对 h1 ~ h6 进行了 CSS 样式的重构,并且还支持普通内联元素定义 class=(.h1   ~   h6)来实现相同的功能。

注:Bootstrap字体颜色、字体样式、行高均被固定了,从而保

证了统一性,而原生的会根据系统内置的首选字体决定,颜色是最黑色。

 h1   ~   h6 元素之间,还可以嵌入一个 small 元素作为副标题.

h1  ~  h3  small 元素的大小只占父元素的 65%,那么通过计算,h1 ~ h3 下的 small  23.4px19.5px15.6pxh4   ~   h6  small 元素的大小只占父元素的 75%   ,分别为:13.5px10.5px9px。在 h1   ~   h6 下的 small 样式也进行了改变,颜色变成淡灰色:#777,行高为 1,粗度为 400

<!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>排版样式</title>

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

    <!--<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->

    <!--[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="js/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="js/bootstrap.min.js"></script>

  </head>

  <body>

<!--标题-->

<h1>标题1<small>小标题1</small></h1>

<h2>标题2<span class="small">小标题2</span></h2>

<h3>标题3</h3>

<h4>标题4</h4>

<h5>标题5</h5>

<h6>标题6</h6>

<span class="h1">span下的h1标题</span>

<hr/>

<!--页头组件-->

<div class="page-header">

<h1>标题1<small>页头组件</small></h1>

</div>

<!--class lead突出显示-->

<p class="lead">突出(lead)段落</p>

<p>段落</p>

<hr/>

 

<!--内联文本元素-->

<span>普通文本</span><br/>

<mark>标记文本</mark>

<span class="mark">span下的mark</span><br/>

<del>被删除的文本</del><br/>

<s>无用的文本</s><br/>

<ins>插入的文本</ins>

<u>带下划线的文本</u><br/>

<small>小号文本</small>

<span class="small">span下的小号文本</span><br/>

<strong>着重强调的文本</strong><br/>

<b>用于高亮单词或短语,不带有任何着重的意味</b><br/>

<em>斜体文本</em><br/>

<i>用于发言、技术词汇</i>

<hr/>

 

<!--对齐-->

<p class="text-left">左对齐</p>

<p class="text-right">右对齐</p>

<p class="text-center">居中对齐</p>

<p class="text-justify">两端对齐</p>

<p style="border:1px solid red;width:30px" class="text-nowrap">超出后不换行</p>

<hr/>

 

<!--改变大小写-->

<p class="text-lowercase">hello world!</p>//小写

<p class="text-uppercase">hello world!</p>//大写

<p class="text-capitalize">hello horld!</p>//首字母大写

<hr/>

 

<!--缩略语

      class="initialism"复写html5abbr

-->

<abbr title="http://www.baidu.com" class="initialism">百度</abbr>

<div title="阿里">阿里巴巴</div>

 

<!--地址-->

<address>

中国北京*

</address>

 

<!--引用    blockquote-reverse或者pull-right:居右引用-->

<blockquote>

<p>钢铁是咋样练成的?</p>

<footer>百度百科</footer>

</blockquote>

<blockquote class="blockquote-reverse">

<p>钢铁是咋样练成的?</p>

<footer>百度百科</footer>

</blockquote>

<hr/>

<blockquote class="pull-right">

<p>钢铁是咋样练成的?</p>

<footer>百度百科</footer>

</blockquote>

<!--列表

list-unstyled:移除默认样式(无序列表不加小圆点)

list-inline:内联(设置为一行)

-->

<!--默认无序列表-->

<ul>

<li>无序列表1</li>

<li>无序列表2</li>

<li>无序列表3</li>

</ul>

<ul class="list-unstyled list-inline">

<li>无序列表1</li>

<li>无序列表2</li>

<li>无序列表3</li>

</ul>

<hr/>

<!--水平排列描述列表

    dl-horizontal:dt和dd水平排列

    -->

<dl class="dl-horizontal">

<dt>LOL</dt>

<dd>是一款游戏</dd>

</dl>

 

<!--内联代码-->

<code><section></code>

<hr/>

<!--用户输入-->

press   <kbd>ctrl   +   ,</kbd>

<hr/>

<!--代码块-->

<pre><p>Please   input...</p></pre>

 

  </body>

</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>代码样式</title>

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

    <!--<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->

    <!--[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="js/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="js/bootstrap.min.js"></script>

  </head>

  <body>

<!--内联样式-->

<code>Console.log()</code>表示在控制台输出信息<br/>

<code>List<Double></code><br/>

<!--用户输入-->

请按<kbd>ctrl+s</kbd>进行保存

<hr/>

<!--代码块 pre-scrollable带滚动条-->

<pre class="pre-scrollable">

var a=10;

var b=20;

return a+b;

var a=10;

var b=20;

return a+b;

var a=10;

var b=20;

return a+b;

var a=10;

var b=20;

return a+b;

var a=10;

var b=20;

return a+b;

var a=10;

var b=20;

return a+b;

</pre>

 

<!--变量-->

var <var>abc</var>=10;

  </body>

</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>表格</title>

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

    <!--<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->

    <!--[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="js/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="js/bootstrap.min.js"></script>

  </head>

  <body>

<div class="container">

<!--表格

.table:实现基本的表格样式

.table-striped:条纹状表格(让<tbody>里的行产生一行隔一行加单色背景效果) 注:表格效果需要基于基本格式.table

. table-bordered:带边框的表格

.table-hover:让<tbody>下的表格悬停鼠标实现背景效果

        -->

<table class="table table-bordered table-striped table-hover table-condensed">

<thead>

<!--状态类

可以单独设置每一行/列的背景样式

active:鼠标悬停在行或单元格上

success:标识成功或积极的动作

info:标识普通的提示信息或动作

warning:标识警告或需要用户注意

danger:表示危险或潜在的带来负面影响的动作

                -->

<tr class="success">

<th>编号</th>

<th>姓名</th>

<th>性别</th>

<th>年龄</th>

<th>地址</th>

</tr>

</thead>

<tbody>

<tr class="warning">

<td class="danger">1</td>

<td>张三</td>

<td></td>

<td>20</td>

<td>北京</td>

</tr>

<!-- .sr-only:隐藏某一行 -->

<tr class="sr-only">

<td>2</td>

<td>李四</td>

<td></td>

<td>19</td>

<td>上海</td>

</tr>

<tr>

<td>3</td>

<td>马云</td>

<td></td>

<td>18</td>

<td>杭州</td>

</tr>

</tbody>

</table>

</div>

  </body>

</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>表单</title>

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

<script src="js/jquery.min.js"></script>

<script src="js/bootstrap.min.js"></script>

<style>

</style>

</head>

<body>

<!--基本用法-->

<form>

<div class="form-group">

<label for="email">邮箱</label>

<input type="email" id="email" class="form-control" placeholder="请输入邮箱" disabled>

</div>

<div class="form-group">

<label for="pwd">密码</label>

<input type="password" id="pwd" class="form-control" placeholder="请输入密码">

</div>

</form>

<hr/>

<!--内联表单

(表单元素居于一行)

-->

<form class="form-inline">

<div class="form-group">

<!--sr-only隐藏label-->

<label for="email" class="control-label sr-only">邮箱</label>

<input type="email" id="email" class="form-control" placeholder="请输入邮箱">

</div>

<div class="form-group">

<label for="pwd" class="control-label">密码</label>

<input type="password" id="pwd" class="form-control" placeholder="请输入密码">

</div>

<!--输入框组(组件)-->

<div class="form-group">

<label for="money" class="control-label">金额</label>

<div class="input-group input-group-lg">

<div class="input-group-addon">$</div>

<input type="text" id="money" class="form-control" placeholder="请输入金额"/>

<div class="input-group-addon">.00</div>

</div>

<div class="input-group input-group-lg">

<div class="input-group-addon">

<input type="checkbox" name="" id="">

</div>

<input type="text" id="money" class="form-control" placeholder="请输入性别">

</div>

<div class="input-group input-group-lg">

<div class="input-group-addon">

<input type="radio" name="" id="">

</div>

<input type="text" id="money" class="form-control" placeholder="请输入年龄">

</div>

<div class="input-group input-group-lg">

<div class="input-group-btn">

<button class="btn btn-default">Go!</button>

</div>

<input type="text" id="money" class="form-control" placeholder="请输入关键字">

</div>

</div>

</form>

<hr/>

<!--水平排列的表单-->

<form class="form-horizontal">

<div class="form-group">

<label for="email" class="control-label col-sm-2 col-sm-offset-2">邮箱</label>

<div class="col-sm-6">

<input type="email" id="email" class="form-control" placeholder="请输入邮箱">

</div>

</div>

<div class="form-group">

<label for="pwd" class="control-label col-sm-2 col-sm-offset-2">密码</label>

<div class="col-sm-6">

<input type="password" id="pwd" class="form-control" placeholder="请输入密码">

</div>

</div>

</form>

<hr/>

<!--被支持的控件-->

<form>

<textarea  class="form-control" name="" id="" cols="30" rows="5" readonly>

阅读服务协议

阅读服务协议

阅读服务协议

阅读服务协议

</textarea>

<!--

         复选框

         disabled:设置禁用

        -->

<div class="checkbox disabled">

<label>

<input type="checkbox" disabled>吃饭

</label>

</div>

<div class="checkbox">

<label>

<input type="checkbox">睡觉

</label>

</div>

<div class="checkbox disabled">

<label>

<input type="checkbox">打豆豆

</label>

</div>

 

<!--

         设置内联样式

        -->

<label class="checkbox-inline disabled">

<input type="checkbox"  disabled>睡觉

</label>

<label class="checkbox-inline">

<input type="checkbox">打豆豆

</label>

        <!--

         设置下拉列表

        -->

<select class="form-control">

<option>1</option>

<option>2</option>

<option>3</option>

</select>

</form>

<hr/>

<form class="form-horizontal">

<!--校验状态

Has-success:成功状态

Has-error:失败状态

Has-warning:警告状态

 

添加额外的图标

glyphicon-ok:成功状态

glyphicon-warning-sign:警告状态

glyphicon-remove:错误状态

 

注意:图标显示在文本框中需要加上.has-feedback.form-control-feedback

-->

<div class="form-group has-success has-feedback">

<label for="email" class="control-label col-sm-2 col-sm-offset-2">邮箱</label>

<div class="col-sm-6">

<input type="email" id="email" class="form-control" placeholder="请输入邮箱" >

<span class="glyphicon glyphicon-ok form-control-feedback"></span>

</div>

</div>

<div class="form-group has-error has-feedback">

<label for="pwd" class="control-label col-sm-2 col-sm-offset-2">密码</label>

<div class="col-sm-6">

<input type="password" id="pwd" class="form-control" placeholder="请输入密码">

<span class="glyphicon glyphicon-remove form-control-feedback"></span>

</div>

</div>

</form>

<hr/>

</body>

</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>按钮</title>

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

    <!--<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->

    <!--[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="js/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="js/bootstrap.min.js"></script>

  </head>

  <body>

<!--可作为按钮使用的标签元素-->

<button class="btn btn-default">button按钮</button>

<input type="button" class="btn btn-default" value="input按钮"/>

<a href="#" class="btn btn-default" role="button">超链接按钮</a>

<br/>

<!--预定义样式、尺寸

       样式:btn-default,btn-success,btn-info,btn-warning,btn-danger,btn-primary,

btn-link

尺寸:btn-lg >默认>btn-sm>btn-xs

btn-block:块级按钮(占整行)

-->

<button class="btn btn-default btn-lg">默认按钮</button>

<button class="btn btn-primary ">首选项按钮</button>

<button class="btn btn-success btn-sm">成功按钮</button>

<button class="btn btn-info btn-xs">一般信息按钮</button>

<button class="btn btn-warning">警告按钮</button>

<button class="btn btn-danger">危险按钮</button>

<button class="btn btn-link">链接按钮</button>

<!--块状按钮-->

<button class="btn btn-default btn-block">块状按钮</button>

  

<!--激活状态(.active)、禁用状态(.disabled)-->

<button class="btn btn-default btn-block active">激活状态按钮</button>

<button class="btn btn-default btn-block disabled">禁用状态按钮</button>

<a href="#" class="btn btn-default disabled" role="button">禁用超链接按钮</a>

 

</body>

</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>图片</title>

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

    <!--<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->

    <!--[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="js/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="js/bootstrap.min.js"></script>

<style>

img{

width:600px;

}

</style>

  </head>

  <body>

<!--图片 img-thumbnail自带响应式  img-responsive响应式的

.img-rounded:圆角

.img-circle:圆

.img-thumbnail:缩略图

-->

<img src="images/jquery.png" class="img-rounded"><br/>

<img src="images/react.png" class="img-circle"><br/>

<img src="images/qq.jpg" class="img-thumbnail"><br/>

<img src="images/react.png" class="img-circle img-responsive"><br/>

  </body>

</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>辅助类</title>

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

    <!--<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->

    <!--[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="js/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="js/bootstrap.min.js"></script>

<style>

img{

width:600px;

}

.crd{

width:200px;

}

</style>

  </head>

  <body>

<!--情景文本颜色-->

<p class="text-muted">默认文本(柔和灰)</p>

<p class="text-primary">首选文本(主要蓝)</p>

<p class="text-success">成功文本(成功绿)</p>

<p class="text-info">一般文

(0)
打赏 Bootstrap 微信扫一扫

相关文章:

  • Bootstrap

    只需10秒 PS制作全景图

    全景图一度成为各相机app的装逼不二法宝,今天本宝宝来教你,如何用ps十秒钟制作全景图,动次打次,动起来。 教程结束,以上就是ps制作全景... [阅读全文]
  • Bootstrap

    设计模式之原型模式

    找工作时我们经常需要复印几份相同的简历。如果用编程来实现就是简单的复制粘贴,我们觉得很理所当然。 可以看出我们需要几份简历就需要实例化几次。如果写错... [阅读全文]
  • Bootstrap

    遗忘的html标签

    <sup> 标签可定义上标文本。 包含在 <sup> 标签和其结束标签 </sup> 中的内容将会以当前文本流中... [阅读全文]
  • Bootstrap

    fork/join 全面剖析

    fork/join作为一个并发框架在jdk7的时候就加入到了我们的java并发包java.util.concurrent中,并且在java 8 的l... [阅读全文]
  • Bootstrap

    Android ConstraintLayout 布局警告

    使用 ConstraintLayout 布局出现警告: 此视图不受垂直约束。在运行时,除非添加垂直约束,否则它将跳转到左侧 解决办法: 从... [阅读全文]

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

Bootstrap
验证码: Bootstrap
Copyright © 2017-2022  保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com