BootStrap 篇(一)BootStrap CSS

更多 BootStrap 详情请移步菜鸟教程

1.HTML 模板

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


<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js">script>


<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js">script>

2.Bootstrap 网格系统

下面是 Bootstrap 网格的基本结构:

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

不同设备中的适应

  • 小型
<div class="col-sm-3">....div>
  • 中型
<div class="col-md-6">....div>
  • 大型
<div class="col-lg-4">....div>

实例

<div class="col-sm-9 col-md-6 col-lg-8">....div>

这是分别适用于三种设备。在手机上,它将是左边 25% 右边 75% 的布局。在平板电脑上,它将是 50%/50% 的布局。在大型视口的设备上,它将是 33%/66% 的布局

3.Bootstrap 排版

强调

<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 classp>
<p class="text-success">本行内容带有一个 success classp>
<p class="text-info">本行内容带有一个 info classp>
<p class="text-warning">本行内容带有一个 warning classp>
<p class="text-danger">本行内容带有一个 danger classp>

列表

去除无序列表前面的着重号

<ul class="list-unstyled">
  <li>Item 1li>
  <li>Item 2li>
  <li>Item 3li>
  <li>Item 4li>
ul>

将所有的列表放在同一行

<ul class="list-inline">
  <li>Item 1li>
  <li>Item 2li>
  <li>Item 3li>
  <li>Item 4li>
ul>

更多排版类

描述
.lead 使段落突出显示
.small 设定小文本 (设置为父文本的 85% 大小)
.text-left 设定文本左对齐
.text-center 设定文本居中对齐
.text-right 设定文本右对齐
.text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap 段落中超出屏幕部分不换行
.text-lowercase 设定文本小写
.text-uppercase 设定文本大写
.text-capitalize 设定单词首字母大写
.initialism 显示在元素中的文本以小号字体展示,且可以将小写字母转换为大写字母
.blockquote-reverse 设定引用右对齐
.list-unstyled 移除默认的列表样式,列表项中左对齐 (
      中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项,你需要在嵌套的列表中使用该样式)
.list-inline 将所有列表项放置同一行
.dl-horizontal 该类设置了浮动和偏移,应用于
元素和
元素中,具体实现可以查看实例
.pre-scrollable 使
 元素可滚动,代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条

4.Bootstrap 代码

Bootstrap 允许您以两种方式显示代码:

  • 第一种是 标签。如果您想要内联显示代码,那么您应该使用 标签。
  • 第二种是
     标签。如果代码需要被显示为一个独立的块元素或者代码有多行,那么您应该使用 
     标签。

使用

标签时,开始和结束标签使用了 unicode 变体:<>

实例

<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>

结果如下所示:

BootStrap 篇(一)BootStrap CSS_第1张图片

更多实例

元素/类 描述
变量赋值: x = ab + y
按键提示: CTRL + P
多行代码
多行代码带有滚动条
电脑程序输出: Sample output
同一行代码片段: span, div

5.Bootstrap 表格

Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素:

标签 描述
),用来标识表格列。)。 内使用。
为表格添加基础样式。
表格标题行的容器元素(
表格主体中的表格行的容器元素(
一组出现在单行上的表格单元格的容器元素()。
默认的表格单元格。
特殊的表格单元格,用来标识列或行(取决于范围和位置)。必须在
关于表格存储内容的描述或总结。

条纹表格

"table table-striped">
...

结果如下所示:

BootStrap 篇(一)BootStrap CSS_第2张图片

边框表格

"table table-bordered">
...

结果如下所示:

BootStrap 篇(一)BootStrap CSS_第3张图片

悬停表格

"table table-hover">
...

结果如下所示:

BootStrap 篇(一)BootStrap CSS_第4张图片

上下文类

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

实例

<table class="table">
  <caption>上下文表格布局caption>
  <thead>
    <tr>
      <th>产品th>
      <th>付款日期th>
      <th>状态th>tr>
  thead>
  <tbody>
    <tr class="active">
      <td>产品1td>
      <td>23/11/2013td>
      <td>待发货td>tr>
    <tr class="success">
      <td>产品2td>
      <td>10/11/2013td>
      <td>发货中td>tr>
    <tr class="warning">
      <td>产品3td>
      <td>20/10/2013td>
      <td>待确认td>tr>
    <tr class="danger">
      <td>产品4td>
      <td>20/10/2013td>
      <td>已退货td>tr>
  tbody>
table>

结果如下所示:

BootStrap 篇(一)BootStrap CSS_第5张图片

响应式表格

通过把任意的 .table 包在 .table-responsive class 内,您可以让表格水平滚动以适应小型设备(小于 768px)。当在大于 768px 宽的大型设备上查看时,您将看不到任何的差别。

实例

"table-responsive"> "table"> ...

结果如下所示:

BootStrap 篇(一)BootStrap CSS_第6张图片

6.Bootstrap 表单

垂直或基本表单

基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤:
- 向父 元素添加 role=”form”。
- 把标签和控件放在一个带有 class .form-group 的

中。这是获取最佳间距所必需的。
- 向所有的文本元素 、 和 添加 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>

结果如下所示:

BootStrap 篇(一)BootStrap CSS_第7张图片

内联表单

如果需要创建一个表单,它的所有元素是内联的,向左对齐的,标签是并排的,请向

标签添加 class .form-inline。

实例


<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>

结果如下所示:

image

水平表单

水平表单与其他表单不仅标记的数量上不同,而且表单的呈现形式也不同。如需创建一个水平布局的表单,请按下面的几个步骤进行:
- 向父 元素添加 class .form-horizontal。
- 把标签和控件放在一个带有 class .form-group 的

中。
- 向标签添加 class .control-label。

实例


class="form-horizontal" role="form">
  <div class="form-group">
    
    <div class="col-sm-10">
      "text" class="form-control" id="firstname" placeholder="请输入名字">
    div>
  div>
  <div class="form-group">
    
    <div class="col-sm-10">
      "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">
        
      div>
    div>
  div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      
    div>
  div>

结果如下所示:

BootStrap 篇(一)BootStrap CSS_第8张图片

静态控件

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

上使用 class .form-control-static。

实例

<p class="form-control-static">[email protected]p>

结果如下所示:

image

7.Bootstrap 按钮

描述
.btn 为按钮添加基本样式
.btn-default 默认/标准按钮
.btn-primary 原始按钮样式(未被操作)
.btn-success 表示成功的动作
.btn-info 该样式可用于要弹出信息的按钮
.btn-warning 表示需要谨慎操作的按钮
.btn-danger 表示一个危险动作的按钮操作
.btn-link 让按钮看起来像个链接 (仍然保留按钮行为)
.btn-lg 制作一个大按钮
.btn-sm 制作一个小按钮
.btn-xs 制作一个超小按钮
.btn-block 块级按钮(拉伸至父元素100%的宽度)
.active 按钮被点击
.disabled 禁用按钮

8.Bootstrap 图片

Bootstrap 提供了三个可对图片应用简单样式的 class
- .img-rounded:添加 border-radius:6px 来获得图片圆角。
- .img-circle:添加 border-radius:50% 来让整个图片变成圆形。
- .img-thumbnail:添加一些内边距(padding)和一个灰色的边框。

描述
.img-rounded 为图片添加圆角 (IE8 不支持)
.img-circle 将图片变为圆形 (IE8 不支持)
.img-thumbnail 缩略图功能
.img-responsive 图片响应式 (将很好地扩展到父元素)

你可能感兴趣的:(BootStrap 篇(一)BootStrap CSS)