bootstrap入门-4.排版及其他固定样式

时间:2024-10-06 10:37:32

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

  总结:超无聊,弃更。

· 排版样式                                    

标题

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

内联子标题

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

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

  效果:

bootstrap入门-4.排版及其他固定样式

引导主题副本

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

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

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

效果:

bootstrap入门-4.排版及其他固定样式

强调

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

  效果:

bootstrap入门-4.排版及其他固定样式

  后几个,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>

  效果:

bootstrap入门-4.排版及其他固定样式

引用(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>

  效果:

bootstrap入门-4.排版及其他固定样式

列表

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

  效果:

bootstrap入门-4.排版及其他固定样式

排版类整理

描述

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

  效果:

bootstrap入门-4.排版及其他固定样式

  代码标签一览:

元素/类

描述

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

  结果如下:

bootstrap入门-4.排版及其他固定样式

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

  效果:

bootstrap入门-4.排版及其他固定样式

内联表单

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

bootstrap入门-4.排版及其他固定样式

  与垂直表单的几个区别:

  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>

  效果:

bootstrap入门-4.排版及其他固定样式

  聚集: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。

参考:菜鸟教程