广州睿东网络科技有限公司是国内最专业的香港空间,云主机,香港VPS,香港服务器租用提供商,专注为国内站长提供高速且稳定的香港空间,云主机,香港VPS,香港服务器租用,欢迎您的选购!
当前位置:首页 -> 香港主机 -> 香港空间

Bootstrap全局CSS样式

云服务器 34℃ 1880评论
itinfo 互联网IT信息


1Bootstrap样式之概述、栅格、排版、代码、表格


概述

HTML 5 文档类型(Doctype)

    Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作,需要使用 HTML5 文档类型(Doctype)禁用响应式布局。 <!DOCTYPE html>

移动设备优先

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

Bootstrap 浏览器/设备支持,如图:

栅格

    每行(row) 12列 (col)

    基本流布局

    响应式布局

    偏移

    嵌套

    排序

如图:

排版之标题和页面主题

    标题

    元素

    <h1>-<h6>

    <small>

    样式

    .h1-.h6

    .small

    页面主题

    全局

    font-size:14px(@font-size-base)

    line-height:1.428  (@line-height-base)

    中心内容

    .lead

案例:效果图:

代码实例:


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"> 

<title>Bootstrap 实例 - 标题</title>

<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">

   <script src="./js/jquery.min.js"></script>

   <script src="./js/bootstrap.min.js"></script>

</head>

<body>


<h1>我是标题1 h1</h1>

<h2>我是标题2 h2</h2>

<h3>我是标题3 h3</h3>

<h4>我是标题4 h4</h4>

<h5>我是标题5 h5</h5>

<h6>我是标题6 h6</h6>

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

<h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>

<h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>

<h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>

<h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>

<h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>


<div class="container">

<h2>排版</h2>

<p>这是一个普通的段落。</p>

<p class="lead">这是个文字突出的段落。</p>

<p>这是一个普通的段落。</p>

</div>


</body>

</html>


排版之内联文本

    内联文本

    <mark>

    <del>

    <s>

    <ins>

    <u>

    <small>

    <strong>

    <em>

案例:效果图:

代码实例:


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>排版</title>

<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">

   <script src="./js/jquery.min.js"></script>

   <script src="./js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<mark>mark</mark>

<del>del</del>

<s>sssss</s>

<ins>ins</ins>

<u>u</u>

<small>small</small>

<strong>strong</strong>

<em>em</em>

</div>


</body>

</html>


排版之对齐和大小写:

    对齐

    text-left

    text-center

    text-right

    text-justify

    text-nowrap

    大小写

    text-lowercase

    text-uppercase

     text-capitalize

案例:效果图:

代码实例:


<!DOCTYPE html>

<html>

<head>

<title>排版</title>

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

   <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">

   <script src="./js/jquery.min.js"></script>

   <script src="./js/bootstrap.min.js"></script>

</head>

<body>

 

<div class="container">

  <h2>排版</h2>

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

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

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

  <p class="text-justify">对齐文本。该段落会根据屏幕的大小对超出屏幕的文字进行换行</p>     

  <p class="text-nowrap">该段落不会根据屏幕的大小对超出屏幕的文字进行换行。</p>

  <p><strong>提示:</strong> 尝试重置浏览器大写查看 “text-justify” 和 “text-nowrap” 段落的效果。</p>     


  <h2>排版</h2>

  <p class="text-lowercase">Lowercased text(小写文本).</p>

  <p class="text-uppercase">Uppercased text(大写文本).</p>     

  <p class="text-capitalize">Capitalized text(首字母大写文本).</p>

</div>


</body>

</html>


排版之缩略语、地址、引用

    缩略语

    <abbr>

    title

    .initialism

    地址

    <address>

    引用

    <footer>

    .blockquote-reverse

案例:效果图:

代码实例:


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"> 

<title>排版</title>

<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">

   <script src="./js/jquery.min.js"></script>

   <script src="./js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<abbr title="attribute">attr</abbr>

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>


<address>

 <strong>Twitter, Inc.</strong><br>

 5 Market Street, Suite 900<br>

 San Francisco, CA 94103<br>

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

</address>


<address>

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

 <a href="mailto:#">first.last@example.com

</a>

</address>


<blockquote>

 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

</blockquote>


<blockquote>

 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

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

</blockquote>

</div>



</body>

</html>


排版之列表:

    列表

    无序列表

    <ul>

    有序列表

    <ol>

    无样式列表

    .list-unstyled

    内联列表

    .list-inline

    描述

    <dl> 

    水平描述

    .dl-horizontal

案例:效果图:

代码实例:


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"> 

<title>排版</title>

<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">

   <script src="./js/jquery.min.js"></script>

   <script src="./js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h4>有序列表</h4>

<ol><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li></ol>

<h4>无序列表</h4>

<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li></ul>

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

</div>


</body>

</html>


代码样式:

    内联代码

    <code>

    用户输入

    <kbd>

    基本代码块

    <pre>

    变量

    <var>

    程序输出

    <samp>

案例:效果图:

代码实例:


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"> 

<title>Bootstrap 实例 - 代码</title>

<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">

    <script src="./js/jquery.min.js"></script>

    <script src="./js/bootstrap.min.js"></script>

</head>

<body>

<!-- 内联代码 -->

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

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

<!-- //用户输入 -->

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>

To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

<!-- 代码块 -->

<pre>

&lt;article&gt;

&lt;h1&gt;Article Heading&lt;/h1&gt;

&lt;/article&gt;

</pre>

<!-- 变量 -->

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>


<!-- 程序输出 -->

<samp>This text is meant to be treated as sample output from a computer program.</samp>


</body>

</html>


表格

    基本表格

    .table

    条纹状表格

    .table-striped

    带边框表格

    .table-bordered

    紧缩表格

    .table-condensed

    鼠标悬停

    .table-hover

    响应式表格

    .table-responsive

案例:效果图:

代码实例


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"> 

<title>表格</title>

<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">

    <script src="./js/jquery.min.js"></script>

    <script src="./js/bootstrap.min.js"></script>

</head>

<body>

<table class="table">

<caption>基本的表格布局</caption>

   <thead>

      <tr>

         <th>名称</th>

         <th>城市</th>

      </tr>

   </thead>

   <tbody>

      <tr>

         <td>Tanmay</td>

         <td>Bangalore</td>

      </tr>

      <tr>

         <td>Sachin</td>

         <td>Mumbai</td>

      </tr>

   </tbody>

</table>

<table class="table table-striped">


</body>

</html>

2Bootstrap样式之表单、按钮、图片、辅助类、响应式工具


表单之基本、水平、内联表单:

    基本表单如图:

    水平表单如图:

    内联表单如图:

案例:效果图:

代码实例:


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"> 

<title>表单</title>

<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">

  <script src="./js/jquery.min.js"></script>

  <script src="./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>

<!-- 内联表单 -->

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

</body>

</html>


表单之输入框、文本域、多选和文本框、下拉列表和静态控件

输入框

    .form-control

    文本域

    form-control

    rows

多选和单选框

    内联多选和单选框

    .checkbox-inline

    .radio-inline

    下拉列表

    form-control

    静态控件

    form-control-static

案例:效果图:

代码实例:


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"> 

<title>表单</title>

<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">

    <script src="./js/jquery.min.js"></script>

    <script src="./js/bootstrap.min.js"></script>

</head>

<body>


<!-- 输入框(Input) -->

<form role="form">

  <div class="form-group">

    <label for="name">标签</label>

    <input type="text" class="form-control" placeholder="文本输入">

  </div>

 </form>

 <!-- 文本框(Textarea) -->

 <form role="form">

  <div class="form-group">

    <label for="name">文本框</label>

    <textarea class="form-control" rows="3"></textarea>

  </div>

</form>

<!-- 复选框(Checkbox)和单选框(Radio) -->

<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="checkbox-inline">

    <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked>选项 1

  </label>

  <label class="checkbox-inline">

    <input type="radio" name="optionsRadiosinline" id="optionsRadios4" value="option2">选项 2

  </label></div>

<!-- 选择框(Select) -->

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

<!-- 静态控件 -->

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

  <div class="form-group">

    <label for="inputPassword" class="col-sm-2 control-label">密码</label>

    <div class="col-sm-10">

      <input type="password" class="form-control" id="inputPassword" placeholder="请输入密码">

    </div></div>

</form>

</body>

</html>


表单之状态和校验

状态

焦点状态

禁用状态

.disabled

只读状态

.readonly

校验

<div class="form-group has-success|warning|error">

反馈图标:has-feedback

     glyphicon-ok form-control-feedback

     glyphicon-warning-sign form-control-feedback

     glyphicon-remove form-control-feedback

案例:效果图:

代码实例:


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"> 

<title>表单</title>

<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">

    <script src="./js/jquery.min.js"></script>

    <script src="./js/bootstrap.min.js"></script>

</head>

<body>

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


</body>

</html>


按钮:

尺寸

使用 .btn-lg、.btn-sm 或 .btn-xs 可以获得不同尺寸的按钮

块级(block)元素

.btn-block 类

预定义样式

案例:

代码实例:


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"> 

<title>Bootstrap 实例 - 按钮选项</title>

<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">

    <script src="./js/jquery.min.js"></script>

    <script src="./js/bootstrap.min.js"></script>

</head>

<body>


<!-- 标准的按钮 -->

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


<div>

  <button type="button" class="btn btn-primary btn-lg">大的原始按钮</button>

  <button type="button" class="btn btn-default btn-lg">大的按钮</button>

</div>

<div>

  <button type="button" class="btn btn-primary">默认大小的原始按钮</button>

  <button type="button" class="btn btn-default">默认大小的按钮</button>

</div>

<div>

  <button type="button" class="btn btn-primary btn-sm">小的原始按钮</button>

  <button type="button" class="btn btn-default btn-sm">小的按钮</button>

</div>

<div>

  <button type="button" class="btn btn-primary btn-xs">特别小的原始按钮</button>

  <button type="button" class="btn btn-default btn-xs">特别小的按钮</button>

</div>

<div>

  <button type="button" class="btn btn-primary btn-lg btn-block">块级的原始按钮</button>

  <button type="button" class="btn btn-default btn-lg btn-block">块级的按钮</button>

</div>


</body>

</html>


图片:

响应式图片

在 Internet Explorer 8-10 中,设置为 .img-responsive 的 SVG 图像显示出的尺寸不匀称。为了解决这个问题,在出问题的地方添加 width: 100% 9; 即可。Bootstrap 并没有自动为所有图像元素设置这一属性,因为这会导致其他图像格式出现错乱。

图片形状

案例:效果图:

代码实例:


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Bootstrap 实例 - 图像</title>

<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">

    <script src="./js/jquery.min.js"></script>

    <script src="./js/bootstrap.min.js"></script>

</head>

<body>


<img src="download.png" class="img-rounded">

<img src="download.png" class="img-circle">

<img src="download.png" class="img-thumbnail">


<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre">


</body>

</html>


辅助类

情景文本颜色如图:

情景背景颜色如图:

关闭按钮如图:

三角符号如图:

快速浮动如图:

显示隐藏如图:

清除浮动如图:

案例:

代码实例:


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"> 

<title>辅助类</title>

<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">

  <script src="./js/jquery.min.js"></script>

  <script src="./js/bootstrap.min.js"></script>

</head>

<body>

<p class="text-muted">...</p>

<p class="text-primary">...</p>

<p class="text-success">...</p>

<p class="text-info">...</p>

<p class="text-warning">...</p>

<p class="text-danger">...</p>


<p class="bg-primary">...</p>

<p class="bg-success">...</p>

<p class="bg-info">...</p>

<p class="bg-warning">...</p>

<p class="bg-danger">...</p>


<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

<div class="pull-left">...</div>

<div class="pull-right">...</div>

</body>

</html>


响应式工具

可用的类

通过单独或联合使用以下列出的类,可以针对不同屏幕尺寸隐藏或显示页面内容。如图:

打印类

和常规的响应式类一样,使用下面的类可以针对打印机隐藏或显示某些内容。如图:

案例:

代码实例:


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>响应式</title>

<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">

    <script src="./js/jquery.min.js"></script>

    <script src="./js/bootstrap.min.js"></script>

</head>

<body>


<div class="container" style="padding: 40px;">

<div class="row visible-on">

<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;

 box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

<span class="hidden-xs">特别小型</span>

<span class="visible-xs">✔ 在特别小型设备上可见</span>

</div>

<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;

 box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

<span class="hidden-sm">小型</span>

<span class="visible-sm">✔ 在小型设备上可见</span>

</div>

<div class="clearfix visible-xs"></div>

<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;

 box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

<span class="hidden-md">中型</span>

<span class="visible-md">✔ 在中型设备上可见</span>

</div>

<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;

 box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

<span class="hidden-lg">大型</span>

<span class="visible-lg">✔ 在大型设备上可见</span>

</div>

</div>

</div>


</body>

</html>