03 Bootstrap CSS

最新推荐文章于 2021-08-04 06:24:34 发布

努力挣钱的Dora

最新推荐文章于 2021-08-04 06:24:34 发布

阅读量163

点赞数

分类专栏： Bootstrap 文章标签： Bootstrap CSS

本文链接：https://blog.csdn.net/beixiaohaizi/article/details/93308595

版权

Bootstrap 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在HTML页面显示代码

第一种是 code 标签。如果您想要内联显示代码，那么您应该使用 code 标签。
第二种是 pre标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 pre标签。在pre上加class .pre-scrollable可以添加滚动条

<p><code>&lt;header&gt;</code> 作为内联元素被包围。</p>
<p>如果需要把代码显示为一个独立的块元素，请使用 &lt;pre&gt; 标签：</p>
<pre>
&lt;article&gt;
	&lt;h1&gt;Article Heading&lt;/h1&gt;
&lt;/article&gt;
</pre>

在这里插入图片描述

表格

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

样式

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

.table
.table-striped
.table-bordered
.table-hover
.table-condensed

`<tr>`, `<th>`和`<td>` 样式

.active
.success
.info
.warning
.danger

表单

垂直或基本表单

向父元素添加 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
默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。
使用 class .sr-only，您可以隐藏内联表单的标签。

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="name">名称</label>
    <input type="text" class="form-control" id="name" placeholder="请输入名称">
  </div>
  <div class="form-group">
    <label class="sr-only" for="inputfile">文件输入</label>
    <input type="file" id="inputfile">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox">请打勾
    </label>
  </div>
  <button type="submit" class="btn btn-default">提交</button>
</form>

在这里插入图片描述

水平表单

List item向父元素添加 class .form-horizontal。
把标签和控件放在一个带有 class .form-group 的
中。
向标签添加 class .control-label。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 水平表单</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form class="form-horizontal" role="form">
	<div class="form-group">
		<label for="firstname" class="col-sm-2 control-label">名字</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="firstname" 
				   placeholder="请输入名字">
		</div>
	</div>
	<div class="form-group">
		<label for="lastname" class="col-sm-2 control-label">姓</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="lastname" 
				   placeholder="请输入姓">
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-10">
			<div class="checkbox">
				<label>
					<input type="checkbox"> 请记住我
				</label>
			</div>
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-10">
			<button type="submit" class="btn btn-default">登录</button>
		</div>
	</div>
</form>

在这里插入图片描述

表单控件

input

type包括有：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color

textarea

当您需要进行多行输入的时，则可以使用文本框 textarea。必要时可以改变 rows 属性（较少的行 = 较小的盒子，较多的行 = 较大的盒子）。

复选框（Checkbox）和单选框（Radio）

当创建表单时，如果您想让用户从列表中选择若干个选项时，请使用 checkbox。如果您限制用户只能选择一个选项，请使用 radio。
对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上。

<label for="name">默认的复选框和单选按钮的实例</label>
<div class="checkbox">
    <label><input type="checkbox" value="">选项 1</label>
</div>
<div class="checkbox">
    <label><input type="checkbox" value="">选项 2</label>
</div>
<div class="radio">
    <label>
        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 选项 1
    </label>
</div>
<div class="radio">
    <label>
        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">选项 2 - 选择它将会取消选择选项 1
    </label>
</div>
<label for="name">内联的复选框和单选按钮的实例</label>
<div>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox1" value="option1"> 选项 1
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox2" value="option2"> 选项 2
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox3" value="option3"> 选项 3
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 选项 1
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios4"  value="option2"> 选项 2
    </label>
</div>

在这里插入图片描述

选择框（Select）

使用展示列表选项，通常是那些用户很熟悉的选择列表，比如州或者数字。
使用 multiple="multiple"允许用户选择多个选项。

<form role="form">
  <div class="form-group">
    <label for="name">选择列表</label>
    <select class="form-control">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
    <label for="name">可多选的选择列表</label>
    <select multiple class="form-control">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
</form>

在这里插入图片描述

静态控件

当您需要在一个水平表单内的表单标签后放置纯文本时，请在

上使用 class .form-control-static

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
</form>

在这里插入图片描述

控件状态

disabled 属性，禁用
对 fieldset 添加 disabled 属性来禁用 fieldset 内的所有控件
Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">聚焦</label>
    <div class="col-sm-10">
      <input class="form-control" id="focusedInput" type="text" value="该输入框获得焦点...">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">禁用</label>
    <div class="col-sm-10">
      <input class="form-control" id="disabledInput" type="text" placeholder="该输入框禁止输入..." disabled>
    </div>
  </div>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput" class="col-sm-2 control-label">禁用输入（Fieldset disabled）</label>
      <div class="col-sm-10">
        <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
      </div>
    </div>
    <div class="form-group">
      <label for="disabledSelect" class="col-sm-2 control-label">禁用选择菜单（Fieldset disabled）</label>
      <div class="col-sm-10">
        <select id="disabledSelect" class="form-control">
          <option>禁止选择</option>
        </select>
      </div>
    </div>
  </fieldset>
  <div class="form-group has-success">
    <label class="col-sm-2 control-label" for="inputSuccess">输入成功</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputSuccess">
    </div>
  </div>
  <div class="form-group has-warning">
    <label class="col-sm-2 control-label" for="inputWarning">输入警告</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputWarning">
    </div>
  </div>
  <div class="form-group has-error">
    <label class="col-sm-2 control-label" for="inputError">输入错误</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputError">
    </div>
  </div>
</form>

在这里插入图片描述

控件大小

<form role="form">
  <div class="form-group">
    <input class="form-control input-lg" type="text" placeholder=".input-lg">
  </div>
  <div class="form-group">
    <input class="form-control" type="text" placeholder="默认输入">
  </div>
  <div class="form-group">
    <input class="form-control input-sm" type="text" placeholder=".input-sm">
  </div>
  <div class="form-group"></div>
  <div class="form-group">
    <select class="form-control input-lg">
      <option value="">.input-lg</option>
    </select>
  </div>
  <div class="form-group">
    <select class="form-control">
      <option value="">默认选择</option>
    </select>
  </div>
  <div class="form-group">
    <select class="form-control input-sm">
      <option value="">.input-sm</option>
    </select>
  </div>
  <div class="row">
    <div class="col-lg-2">
      <input type="text" class="form-control" placeholder=".col-lg-2">
    </div>
    <div class="col-lg-3">
      <input type="text" class="form-control" placeholder=".col-lg-3">
    </div>
    <div class="col-lg-4">
      <input type="text" class="form-control" placeholder=".col-lg-4">
    </div>
  </div>
</form>

在这里插入图片描述

表单帮助文本:.help-block

<form role="form">
  <span>帮助文本实例</span>
  <input class="form-control" type="text" placeholder="">
  <span class="help-block">一个较长的帮助文本块，超过一行，
  需要扩展到下一行。本实例中的帮助文本总共有两行。</span>
</form>

按钮

类型

<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>
<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>
<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>

在这里插入图片描述 ## 大小
8. btn-default 默认
9. btn-primary大的

<p>
  <button type="button" class="btn btn-primary btn-lg">大的原始按钮</button>
  <button type="button" class="btn btn-default btn-lg">大的按钮</button>
</p>
<p>
  <button type="button" class="btn btn-primary">默认大小的原始按钮</button>
  <button type="button" class="btn btn-default">默认大小的按钮</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">小的原始按钮</button>
  <button type="button" class="btn btn-default btn-sm">小的按钮</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">特别小的原始按钮</button>
  <button type="button" class="btn btn-default btn-xs">特别小的按钮</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-lg btn-block">块级的原始按钮</button>
  <button type="button" class="btn btn-default btn-lg btn-block">块级的按钮</button>
</p>

在这里插入图片描述

激活状态 .active

<p>
  <button type="button" class="btn btn-default btn-lg ">默认按钮</button>
  <button type="button" class="btn btn-default btn-lg active">激活按钮</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-lg ">原始按钮</button>
  <button type="button" class="btn btn-primary btn-lg active">激活的原始按钮</button>
</p>

在这里插入图片描述

禁用状态

按钮元素 : disabled 属性
锚元素:disabled class
当禁用一个按钮时，它的颜色会变淡 50%，并失去渐变。

<p>
  <button type="button" class="btn btn-default btn-lg">默认按钮</button>
  <button type="button" class="btn btn-default btn-lg" disabled="disabled">禁用按钮</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-lg ">原始按钮</button>
  <button type="button" class="btn btn-primary btn-lg" disabled="disabled">禁用的原始按钮</button>
</p>
<p>
  <a href="#" class="btn btn-default btn-lg" role="button">链接</a>
  <a href="#" class="btn btn-default btn-lg disabled" role="button">禁用链接</a>
</p>
<p>
  <a href="#" class="btn btn-primary btn-lg" role="button">原始链接</a>
  <a href="#" class="btn btn-primary btn-lg disabled" role="button">禁用的原始链接</a>
</p>

在这里插入图片描述

按钮标签

<a class="btn btn-default" href="#" role="button">链接</a>
<button class="btn btn-default" type="submit">按钮</button>
<input class="btn btn-default" type="button" value="输入">
<input class="btn btn-default" type="submit" value="提交">

在这里插入图片描述

按钮组

<div class="container">
  <h2>Button 按钮组 - 设置按钮大小</h2>
  <p>通过 .btn-group-* 类来控制按钮组中使用按钮的大小。</p>
  <h3>大按钮:</h3>
  <div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
  <h3>默认大小按钮:</h3>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
  <h3>小按钮:</h3>
  <div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
  <h3>超级小按钮:</h3>
  <div class="btn-group btn-group-xs">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
</div>

在这里插入图片描述

垂直按钮组

<div class="container">
  <h2>垂直按钮组</h2>
  <p>如果要设置垂直方向的按钮可以通过 .btn-group-vertical 类来设置：</p>
  <div class="btn-group-vertical">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
</div>

在这里插入图片描述

自适按钮组

<div class="container">
  <h2>自适应按钮组</h2>
  <p>以通过 .btn-group-justified 类来设置自适应大小的按钮组。</p>
  <div class="btn-group btn-group-justified">
    <a href="#" class="btn btn-primary">Apple</a>
    <a href="#" class="btn btn-primary">Samsung</a>
    <a href="#" class="btn btn-primary">Sony</a>
  </div>
</div>

在这里插入图片描述
注意: 如果是元素, 你需要在外层使用 .btn-group 类来包裹:


<div class="container">
  <h2>自适应按钮组</h2>
  <div class="btn-group btn-group-justified">
    <div class="btn-group">
      <button type="button" class="btn btn-primary">Apple</button>
    </div>
    <div class="btn-group">
      <button type="button" class="btn btn-primary">Samsung</button>
    </div>
    <div class="btn-group">
      <button type="button" class="btn btn-primary">Sony</button>
    </div>
  </div>
</div>

下拉按钮

<div class="container">
  <h2>内嵌按钮组</h2>
  <p>内嵌按钮组创建下拉菜单：</p>
  <div class="btn-group">
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Sony <span class="caret"></span></button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Tablet</a></li>
        <li><a href="#">Smartphone</a></li>
      </ul>
    </div>
  </div>
</div>

在这里插入图片描述

下拉按钮多一个分割线

<div class="container">
  <h2>分隔按钮</h2>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Sony</button>
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Tablet</a></li>
      <li><a href="#">Smartphone</a></li>
    </ul>
  </div>
</div>

在这里插入图片描述

图片

.img-rounded：添加 border-radius:6px 来获得图片圆角。
.img-circle：添加border-radius:50% 来让整个图片变成圆形。
.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。

<img src="/wp-content/uploads/2014/06/download.png" class="img-rounded">
<img src="/wp-content/uploads/2014/06/download.png" class="img-circle">
<img src="/wp-content/uploads/2014/06/download.png" class="img-thumbnail">

在这里插入图片描述

响应式图片

<div class="container">
	<h2>图片</h2>
	<p> .img-responsive类让图片支持响应式，将很好地扩展到父元素 (通过改变窗口大小查看效果):</p>                  
	<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236"> 
</div>

在这里插入图片描述

辅助样式

文本样式

<div class="container">
		<p class="text-muted">该段落使用了样式 "text-muted"。</p>            
		<a class="text-muted" href="//www.w3cschool.cc">链接使用了样式 "text-muted"。</a>  
	</div>
	<br />
	<div class="container">
		<p class="text-primary">该段落使用了样式 "text-primary"。</p>            
		<a class="text-primary" href="//www.w3cschool.cc">链接使用了样式 "text-primary"。</a>   
	</div>
	<br />
	<div class="container">
		<p class="text-success">该段落使用了样式 "text-success"。</p>            
    	<a class="text-success" href="//www.w3cschool.cc">链接使用了样式 "text-success"。</a>  <br/>
	</div>
	<br />
	<div class="container">
		<p class="text-info">该段落使用了样式 "text-info"。</p>            
		<a class="text-info" href="//www.w3cschool.cc">链接使用了样式 "text-info"。</a>      <br/>  
	</div>
	<br />
	<div class="container">
		<p class="text-warning">该段落使用了样式 "text-warning"。</p>            
		<a class="text-warning" href="//www.w3cschool.cc">链接使用了样式 "text-warning"。</a>    <br/>  
	</div>
	<br />
	<div class="container">
		<p class="text-danger">该段落使用了样式 "text-danger"。</p>            
		<a class="text-danger" href="//www.w3cschool.cc">链接使用了样式 "text-danger"。</a> 
 	</div>

在这里插入图片描述

背景样式

<div class="container"> 
	<p class="bg-primary">该段落使用了类 "bg-primary"。</p>
	<a class="bg-primary" href="/index.php">该链接使用了类 "bg-primary"。</a>
</div>
<div class="container"> 
	<p class="bg-success">该段落使用了类 "bg-success"。</p>
	<a class="bg-success" href="/index.php">该链接使用了类 "bg-success"。</a>
</div>
<div class="container"> 
	<p class="bg-info">该段落使用了类 "bg-success"。</p>
	<a class="bg-info" href="/index.php">该链接使用了类 "bg-success"。</a>
</div>
<div class="container"> 
	<p class="bg-warning">该段落使用了类 "bg-success"。</p>
	<a class="bg-warning" href="/index.php">该链接使用了类 "bg-success"。</a>
</div>
<div class="container"> 
	<p class="bg-danger">该段落使用了类 "bg-success"。</p>
	<a class="bg-danger" href="/index.php">该链接使用了类 "bg-success"。</a>
</div>

在这里插入图片描述

其他

<div class="container">
	<h2>实例</h2>
	<div class="pull-left">元素浮动到左侧</div>
	<div class="pull-right">元素浮动到右侧</div>
</div>	
<div class="container">
	<h2>实例 center-block</h2>
	<div class="center-block" style="width:150px;background-color:#ccc;">该 div 显示在中间</div>
</div>
 <div class="clearfix visible-xs">清除浮动</div>
	<div class="container">
	<h2>实例</h2>
	<p> .show 类强制一个元素显示:</p>
	<p class="show">该段落强制显示</p>
	<p> .hidden 类强制一个元素隐藏 :</p>
	<p class="hidden">该段落强制隐藏</p>      
</div>     
<div class="container">
	<h2>实例</h2>
	<p> .sr-only 类除了屏幕阅读器外，其他设备上都隐藏元素:</p>
	<a class="sr-only" href="#">跳转到主要内容</a>
	<p>与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户):</p>
	<a class="sr-only sr-only-focusable" href="#">跳转到主要内容</a>
</div>
<div class="container">
	<h2>实例</h2>
	<p> .text-hide 类将页面元素所包含的文本内容替换为背景图:</p>
	<div class="text-hide">在 div 元素中插入一些文本。</div>
</div>
<div class="container">
	<h2>实例</h2>
	<p> .close 类可以显示一个关闭按钮。</p>
	<button type="button" class="close"><span aria-hidden="true">x</span><span class="sr-only">关闭</span></button>
</div>	
<div class="container">
	<h2>实例</h2>
	<p> .caret 类显示了一个下拉的功能: <span class="caret"></span></p>
	<p> .caret 类在按钮中使用：</p>
	<div class="btn-group">
		<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Menu <span class="caret"></span></button>
		<ul class="dropdown-menu" role="menu">
			<li><a href="#">一个链接</a></li>
			<li><a href="#">另一个链接 link</a></li>
			<li><a href="#">其他功能</a></li>
		</ul>
	</div>        
</div>

在这里插入图片描述

Bootstrap 响应式实用工具

在这里插入图片描述

努力挣钱的Dora

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
03 Bootstrap CSS

在HTML页面显示代码第一种是 code 标签。如果您想要内联显示代码，那么您应该使用 code 标签。第二种是 pre标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 pre标签。在pre上加class .pre-scrollable可以添加滚动条<p><code>&lt;header&gt;</code> 作...
复制链接

扫一扫