初涉bootstrap：bootstrap css

来源：互联网发布：威客网络兼职网站编辑：程序博客网时间：2024/05/28 05:15

1 页面head部分需要加入如下代码

<meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="sytlesheet" type="text/css" href="/BootStrapTest/bootstrap/css/bootstrap.css">  <script src="/BootStrapTest/bootstrap/js/jquery-1.7.2.min.js" type="text/javascript"></script>  <!-- 务必在bootstrap.js之前引入jquery.js-->    <script type="text/javascript" src="/BootStrapTest/bootstrap/js/bootstrap.js"></script>

需要注意bootstrap.js必须放在jquery.js之后。

2 JavaScript 放置在文档最后面可以使页面加载速度更快
3 如果引入：

  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script

可以解决ie6-8的响应式布局效果

4 百度静态资源库（可以不引入本地的js）

百度的静态资源库的 CDN 服务，访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费,引入代码如下：<!-- 新 Bootstrap 核心 CSS 文件 --><link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"><!-- 可选的Bootstrap主题文件（一般不使用） --><script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css"></script><!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
移动浏览器添加user-scalable=no可以禁用缩放功能。
6 响应式图像

<img src="..." class="img-responsive" alt="响应式图像">

通过添加 class=”img-responsive”

7 padding和margin的区别：
margin是 DIV与周边元素的距离padding是 DIV里边内容与这个DIV的距离
8 栅格系统（最多12列）
基本结构：

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

偏移列：<div class="col-xs-6 col-md-offset-3" </div> 改变左右显示顺序：`` <div class="col-md-4 col-md-push-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 我在左边 </div>

9 <h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>
内联标题的子标题。
10 <p class="lead">
引导主题副本。
11 文本的强调：

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

12 缩写：

<abbr title="World Wide Web">WWW</abbr><br><abbr title="Real Simple Syndication" class="initialism">RSS</abbr>

13 列表：
- 有序列表：
- <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ol>
- 无序列表：

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

14 表格
一个表格的结构：

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

<tr class="active">

将悬停的颜色应用此行，还可以换为success，warning，danger，info。

 <caption>边框表格布局</caption>

表格标题
响应式表格：
table标签放入下面这个div内

<div class="table-responsive">

15 表单
基本表单：

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

每个div放一个标签和一个控件。
内联表单：一横排。在给form的class设为form-inline即可。
水平表单：用户名和密码。在form的class设为form-horizontal即可。
表单帮助文本：
<form role="form"> <span>帮助文本实例</span> <input class="form-control" type="text" placeholder=""> <span class="help-block">一个较长的帮助文本块，超过一行，需要扩展到下一行。本实例中的帮助文本总共有两行。</span> </form>

16按钮
样式：<button type="button" class="btn btn-default">按钮</button>
此外还有
btn-primary btn-success btn-info btn-warning btn-danger
btn-link btn-lg btn-smbtn-xs btn-block
还可以加两个属性：active 和disabled
17图片：
<img src="/wp-content/uploads/2014/06/download.png" class="img-rounded">
class还可以为img-circle和img-thumbnail。

0 0