bootstrap -1 基础

最新推荐文章于 2022-07-06 21:48:39 发布

原创最新推荐文章于 2022-07-06 21:48:39 发布 · 319 阅读

CC 4.0 BY-SA版权

bootstrap是一个移动优先的框架，对于不是很复杂的页面，PC和移动基本上不做特别适配都可以完成的。

基本模板

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 模板</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- 引入 Bootstrap -->
      <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
      <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
      <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
      <!--[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.3.0/respond.min.js"></script>
      <![endif]-->
   </head>
   <body>
      <h1>Hello, world!</h1>
 
      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
      <script src="https://code.jquery.com/jquery.js"></script>
      <!-- 包括所有已编译的插件 -->
      <script src="js/bootstrap.min.js"></script>
   </body>
</html>

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

meta viewport是为了增加对移动端的支持，device-width 会根据设备大小适配，scale为比例 1:1；

可以增加 maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕。根据实际情况使用。

=====================================================================================

图片响应式：

<img src="..." class="img-responsive" alt="响应式图像">

img-responsive class 为图像赋予了 max-width: 100%; 和 height: auto; 属性，可以让图像按比例缩放，不超过其父元素的尺寸。

.img-responsive {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

=====================================================================================================================

网格系统

最多可分12列。例如，要创建三个相等的列，则使用三个 .col-xs-4。

基本结构：

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

为了在大屏幕显示器上使用偏移，请使用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11 。

row也可以嵌套使用

=====================================================================================

字体排版

<h1>嵌套<small>可以获得副标题，字体略小

< small > 本行内容是在标签内 </ small > < br >

< strong > 本行内容是在标签内加强加粗 </ strong > < br >

< em > 本行内容是在标签内，并呈现为斜体 </ em > < br >

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

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

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

< p class = " text-muted " > 本行内容是减弱的 </ p >

< p class = " text-primary " > 本行内容带有一个 primary class </ p >

< p class = " text-success " > 本行内容带有一个 success class </ p >

< p class = " text-info " > 本行内容带有一个 info class </ p >

< p class = " text-warning " > 本行内容带有一个 warning class </ p >

< p class = " text-danger " > 本行内容带有一个 danger class </ p >

一下代码可以实现缩写内容，鼠标悬停后显示完整文本，增加initialism可以获得较小字体

< abbr title = " World Wide Web " > WWW </ abbr > < br >

<abbrtitle="Real Simple Syndication"class="initialism">RSS</abbr>

以下代码用于引用

<blockquote> 这是一个带有源标题的引用。

<small>Someone famous in <citetitle="Source Title">Source Title</cite>

</small>

</blockquote>

<blockquoteclass="pull-right"> 这是一个向右对齐的引用。

<small>Someone famous in <citetitle="Source Title">Source Title</cite>

</small>

</blockquote>

显示代码，使用 <pre> 或<code>标签即可。

=====================================================================================

表格

标签	描述
<table>	为表格添加基础样式。
<thead>	表格标题行的容器元素（<tr>），用来标识表格列。
<tbody>	表格主体中的表格行的容器元素（<tr>）。
<tr>	一组出现在单行上的表格单元格的容器元素（<td> 或 <th>）。
<td>	默认的表格单元格。
<th>	特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 <thead> 内使用。
<caption>	关于表格存储内容的描述或总结。

表格类

类	描述	实例
.table	为任意 <table> 添加基本样式 (只有横向分隔线)	尝试一下
.table-striped	在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)	尝试一下
.table-bordered	为所有表格的单元格添加边框	尝试一下
.table-hover	在 <tbody> 内的任一行启用鼠标悬停状态	尝试一下
.table-condensed	让表格更加紧凑

<tr>, <th> 和 <td> 类

下表的类可用于表格的行或者单元格：

类	描述	实例
.active	将悬停的颜色应用在行或者单元格上	尝试一下
.success	表示成功的操作	尝试一下
.info	表示信息变化的操作	尝试一下
.warning	表示一个警告的操作	尝试一下
.danger	表示一个危险的操作

下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。

类	描述
.active	对某一特定的行或单元格应用悬停颜色
.success	表示一个成功的或积极的动作
.warning	表示一个需要注意的警告
.danger	表示一个危险的或潜在的负面动作

这些类可被应用到 <tr>、<td> 或 <th>。

<divclass="table-responsive">

<tableclass="table">

</table>

</div>

可以实现响应式表格布局。

=====================================================================================

表单

基本表单：

向父 <form> 元素添加 role="form"。
把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。

<form role="form">
  <div class="form-group">
    <label for="name">名称</label>
    <input type="text" class="form-control" id="name" placeholder="请输入名称">
  </div>
  <div class="form-group">
    <label for="inputfile">文件输入</label>
    <input type="file" id="inputfile">
    <p class="help-block">这里是块级帮助文本的实例。</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox">请打勾
    </label>
  </div>
  <button type="submit" class="btn btn-default">提交</button>
</form>

内联

如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class .form-inline。
水平