初涉bootstrap:bootstrap css

  • 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>
  
    <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 服务,访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费,引入代码如下:

<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">


<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css">script>


<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js">script>


<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js">script>
  • 5
    移动浏览器添加user-scalable=no可以禁用缩放功能。

  • 6 响应式图像

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

偏移列:


改变左右显示顺序:``
style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444,
inset -1px 1px 1px #444;">
我在左边

  • 9

    我是标题4 h4. 我是副标题4 h4


    内联标题的子标题。

  • 10


    引导主题副本。

  • 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 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>
  • 12 缩写:
<abbr title="World Wide Web">WWWabbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSSabbr>
  • 13 列表:
    • 有序列表:

      1. Item 1

      2. Item 2

      3. Item 3

      4. Item 4

    • 无序列表:
<ul>
  <li>Item 1li>
  <li>Item 2li>
  <li>Item 3li>
  <li>Item 4li>
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>Firstnameth>
          tr>
        thead>
        <tbody>
          <tr>
            <td>1td>
            <td>Annatd>
          tr>
          <tr>
            <td>2td>
            <td>Debbietd>
          tr>
          <tr>
            <td>3td>
            <td>Johntd>
          tr>
        tbody>
      table>
    div>
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即可。
表单帮助文本:


帮助文本实例

一个较长的帮助文本块,超过一行,
需要扩展到下一行。本实例中的帮助文本总共有两行。

  • 16按钮
    样式:
    此外还有
    btn-primary btn-success btn-info btn-warning btn-danger
    btn-link btn-lg btn-smbtn-xs btn-block
    还可以加两个属性:active 和disabled

  • 17图片:
    class="img-rounded">
    class还可以为img-circle和img-thumbnail。

你可能感兴趣的:(初涉bootstrap:bootstrap css)