本篇包括以下内容:排版、代码、表格、表单。

  总结:超无聊,弃更。

· 排版样式                                    

标题

  h1-h6 取消加粗,字体大小也有一定变化。

内联子标题

<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1>

  加入small标签,灰色,父级字体大小65%。

  效果:

引导主题副本

  .lead,更大更粗、行高更高的文本。

<h2>引导主体副本</h2> 

<p class="lead">这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。</p>

效果:

强调

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

  效果:

  后几个,primary:主要;success:成功;info:重要;warning:警告;danger:危险。

缩写

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

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

  停留时会显示title里的内容,abbr默认带虚的下边框。.initialism得到字体更小的文本。

地址(Address)

<address> 

  <strong>Some Company, Inc.</strong><br>

   007 street<br> Some City, State XXXXX<br> 

  <abbr title="Phone">P:</abbr> (123) 456-7890

</address> 

<address> 

  <strong>Full Name</strong><br>

  <a href="mailto:#">mailto@somedomain.com</a> 

</address>

  效果:

引用(Blockquote

<blockquote>

  <p>

    这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。

  </p>

</blockquote>

<blockquote>

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

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

</blockquote>

<blockquote class="pull-right">

  这是一个向右对齐的引用。

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

</blockquote>

  效果:

列表

<h4>未定义样式列表</h4>

<ul class="list-unstyled">

  <li>Item 1</li>

  <li>Item 2</li>

  <li>Item 3</li>

  <li>Item 4</li>

</ul>

<h4>内联列表</h4>

<ul class="list-inline">

  <li>Item 1</li>

  <li>Item 2</li>

  <li>Item 3</li>

  <li>Item 4</li>

</ul>

<h4>定义列表</h4>

<dl>

  <dt>Description 1</dt>

  <dd>Item 1</dd>

  <dt>Description 2</dt>

  <dd>Item 2</dd>

</dl>

<h4>水平的定义列表</h4>

<dl class="dl-horizontal">

   <dt>Description 1</dt>

   <dd>Item 1</dd>

   <dt>Description 2</dt>

   <dd>Item 2</dd>

</dl>

  效果:

排版类整理

描述

.lead

使段落突出显示

.small

设定小文本 (设置为父文本的 85% 大小)

.text-left

设定文本左对齐

.text-center

设定文本居中对齐

.text-right

设定文本右对齐

.text-justify

设定文本对齐,段落中超出屏幕部分文字自动换行

.text-nowrap

段落中超出屏幕部分不换行

.text-lowercase

设定文本小写

.text-uppercase

设定文本大写

.text-capitalize

设定单词首字母大写

.initialism

显示在 <abbr> 元素中的文本以小号字体展示

.blockquote-reverse

设定引用右对齐

.list-unstyled

移除默认的列表样式,列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项,你需要在嵌套的列表中使用该样式)

.list-inline

将所有列表项放置同一行

.dl-horizontal

该类设置了浮动和偏移,应用于 <dl> 元素和 <dt> 元素中,具体实现可以查看实例

.pre-scrollable

使 <pre> 元素可滚动 scrollable

· 代码样式                                                  

  <code>标签,内联显示代码。

  <pre>标签,多行显示代码。

<p><code><header></code> 作为内联元素被包围。</p>

<p>如果需要把代码显示为一个独立的块元素,请使用 <pre> 标签:</p>

<pre>

  <article>

    <h1>Article Heading</h1>

  </article>

</pre>

  效果:

  代码标签一览:

元素/类

描述

<var>

变量赋值: x = ab + y

<kbd>

按键提示: CTRL + P

<pre>

多行代码

<pre class="pre-scrollable">

多行代码带有滚动条

<samp>

电脑程序输出: Sample output

<code>

同一行代码片段: span, div

· 表格样式                                                  

表格类

描述

.table

基本;为任意 <table> 添加基本样式 (只有横向分隔线)

.table-striped

条纹;在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)

.table-bordered

边框;为所有表格的单元格添加边框

.table-hover

悬停;在 <tbody> 内的任一行启用鼠标悬停状态

.table-condensed

精简;让表格更加紧凑

  源代码:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>表格</title>

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

    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  

    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  </head>

<body>

<div class="container">

  <h2>表格</h2>

  <p>联合使用所有表格类:</p>                                          

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

    <thead>

      <tr>

        <th>#</th>

        <th>Firstname</th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td>1</td>

        <td>Anna</td>

      </tr>

      <tr>

        <td>2</td>

        <td>Debbie</td>

      </tr>

      <tr>

        <td>3</td>

        <td>John</td>

      </tr>

    </tbody>

  </table>

</div>

</body>

</html>

  结果如下:

<tr>、<th>、<td>类

描述

.active

将悬停的颜色应用在行或者单元格上

.success

表示成功的操作

.info

表示信息变化的操作

.warning

表示一个警告的操作

.danger

表示一个危险的操作

  类似于前面说的强调(.text-*),区别是强调是文字颜色,这个加的是背景颜色。

响应式表格

  表格的父级添加.table-responsive class即可。测试发现未添加也是响应式的,可依实际情况决定。示例略。

· 表单样式                                                  

基本表单(垂直结构)

  bootstrap创建基本表单的步骤:

    · <form>元素添加role=”form”。

    · 每段标签和控件用div包裹,同时给div加一个.form-group,该class设置的属性是下边距15px。

    · 给所有的文本元素<input>、<textarea>和<select>添加class .form-control。.form-control的设置如下:

.form-control {

    display: block;

    width: 100%;

    height: 34px;

    padding: 6px 12px;

    font-size: 14px;

    line-height: 1.42857143;

    color: #555;

    background-image: none;

    border: 1px solid #ccc;

    border-radius: 4px;

    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);

    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);

    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;

    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;

    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;

}

代码:

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>Bootstrap 实例 - 基本表单</title>

  <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  

  <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

  <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

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

</body>

</html>

  效果:

内联表单

  向<form>标签添加.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>

  这里的display:inline-block;设置在了form下的.form-group中:

@media (min-width: 768px)

.form-inline .form-group {

    display: inline-block;

    margin-bottom:;

    vertical-align: middle;

}

  原来默认的下边距15px被取代了。

  另外,.sr-only可以隐藏内联表单的标签。

.sr-only {

    position: absolute;

    width: 1px;

    height: 1px;

    padding:;

    margin: -1px;

    overflow: hidden;

    clip: rect(0,0,0,0);

    border:;

}

水平表单

  代码:

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

  与垂直表单的几个区别:

  1)<form>添加class .form-horizontal。如此,.form-horizontal下.form-group设置左右外边距-15px。

  2)标签与控件同行,控件添加父级,因为控件class .form-control的宽度为100%。

  3)标签添加class .control-label。

内联的活用

  其他诸如复选框、单选框想内联使用.checkbox-inline或.radio-inline class即可。

静态控件

  需要在一个水平表单内的表单标签后放置纯文本时,可在<p>上使用class .form-control-static。

  可以发现bootstrap框架中有n个校正初始丑陋样式的class。

  示例略。

表单控件状态

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

  效果:

  聚集:input接收到:focus时,输入框的轮廓会被移除,同时应用box-shadow。

  禁用的字段集:对<fieldset>添加disabled属性可禁用<fieldset>内所有控件。

  验证状态:对父元素添加适当的class(.has-warning、.has-error或.has-success)。

表单帮助文本

  在 <input> 后使用 .help-block。加在p或span上都行。

.help-block {

    display: block;

    margin-top: 5px;

    margin-bottom: 10px;

    color: #737373;

}

表单控件大小

  针对控件:

.input-lg {

    height: 46px;

    padding: 10px 16px;

    font-size: 18px;

    line-height: 1.3333333;

    border-radius: 6px;

}
.input-sm {

    height: 30px;

    padding: 5px 10px;

    font-size: 12px;

    line-height: 1.5;

    border-radius: 3px;

}

  针对控件父级:

@media (min-width: 1200px)

.col-lg-2 {

    width: 16.66666667%;

}
@media (min-width: 1200px)

.col-lg-3 {

    width: 25%;

}
@media (min-width: 1200px)

.col-lg-4 {

    width: 33.33333333%;

}

  lg即large;sm不是别的,是small。

参考:菜鸟教程

bootstrap入门-4.排版及其他固定样式的更多相关文章

  1. BootStrap入门教程 (二) :BASE CSS(排版(Typography),表格(Table),表单(Forms),按钮(Buttons))

    上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffoldin ...

  2. Bootstrap入门(三)<p>标签的css样式

    Bootstrap入门(三)<p>标签的css样式 前提:引入css文件,内容放在一个class为container的div中   <p>标签属性 1.“ text-left ...

  3. Bootstrap -- 网格系统、排版样式类、 <blockquote>、 <abbr> 元素

    Bootstrap -- 网格系统.排版样式类. <blockquote>. <abbr> 元素 1. Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏 ...

  4. BootStrap入门教程 (一)

    BootStrap入门教程 (一)   2011年,twitter的"一小撮"工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端 ...

  5. (转帖)BootStrap入门教程 (二)

    上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffoldin ...

  6. Bootstrap入门(十六)组件10:well和具有响应式特性的嵌入内容

    Bootstrap入门(十六)组件10:well和具有响应式特性的嵌入内容 well组件可以为内容增添一种切入效果. 具有响应式特性的嵌入内容可以根据被嵌入内容的外部容器的宽度,自动创建一个固定的比例 ...

  7. Bootstrap入门(十三)组件7:导航条

    Bootstrap入门(十三)组件7:导航条 1.默认样式的导航条 2.嵌入表单和按钮 3.嵌入文本和非导航的链接 4.组件排列和下拉菜单 5.固定在顶部/底部 6.反色的导航条 7.路径导航 首先先 ...

  8. BootStrap入门教程 (二)

    文本转自 http://www.cnblogs.com/ventlam/archive/2012/05/29/2520807.html 上讲回顾:Bootstrap的手脚架(Scaffolding)提 ...

  9. Bootstrap<基础三> 排版

    Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈. 使用 Bootstrap 的排版特性,您可以创建标题.段落. ...

随机推荐

  1. 蒟蒻修养之cf橙名计划2

    29 由于第一篇没写题意导致大部分神题题解已经完全不知道在说啥了...所以还是重开一篇保平安... [303A]题意:求三个长度为$n(n<=10^5)$的排列$a,b,c$使得$a_i+b_i ...

  2. BZOJ4515: [Sdoi2016]游戏

    Description Alice 和 Bob 在玩一个游戏. 游戏在一棵有 n 个点的树上进行.最初,每个点上都只有一个数字,那个数字是 123456789123456789. 有时,Alice 会 ...

  3. BZOJ1391: [Ceoi2008]order

    Description 有N个工作,M种机器,每种机器你可以租或者买过来. 每个工作包括若干道工序,每道工序需要某种机器来完成,你可以通过购买或租用机器来完成. 现在给出这些参数,求最大利润 Inpu ...

  4. thinkphp 联表查询,排序

    $info =M('productbase'); $info= $info->alias('a')->field('a.id,cid,title,address,protype,time, ...

  5. 最完美解决方案:js弹出窗口关闭当前页面,而不弹出提示框

    该功能主要用于业务系统中的登录操作,登录后弹出全屏的业务系统主界面,而不需要工具栏.地址栏.菜单等功能. 之前针对不同浏览器找了无数种方法,包括网上能查到的所有方法,弹出的结果都不理想.结果有的IE6 ...

  6. Nginx做NodeJS应用负载均衡配置实例

    这篇文章主要介绍了Nginx做NodeJS应用负载均衡配置实例,本文直接给出配置实例,需要的朋友可以参考下. 负载均衡可以把用户的请求分摊到多个服务器上进行处理,从而实现了对海量用户的访问支持.负载均 ...

  7. iOS 最全面试题

    HTTP/1.0 在HTTP/1.0版本中,并没有官方的标准来规定Keep-Alive如何工作,因此实际上它是被附加到HTTP/1.0协议上,如果客户端浏览器支持Keep-Alive,那么就在HTTP ...

  8. Hibernate中一对一关联映射/组件映射

    Hibernate映射:一对一关联 1.按照外键映射 2.按照主键映射 组件映射 下面以员工账号表和员工档案表(员工账号和档案表之间是一对一的关系)为例,介绍这两种映射关系,并使用这两种 映射方式分别 ...

  9. oracle中复制表和数据 && 多表插入语句

    创建测试表和测试数据 create table test  (id number,name varchar(10));  insert into  test values(1,'liufang');  ...

  10. Web前端代码页面布局总结

    一.  html (1)编码:所有编码均采用xhtml,标签必须闭合,属性值用双引号包括,编码统一为utf-8. (2)语义化:语义化html,正确使用标签. (3)文件命名:命名以中文命名,依实际模 ...