• 关于Bootstrap的学习


    1、标准模本:

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">  
            <meta name="viewport" content="width=device-width, initial-scale=1"> 移动端开发要加入   
            <title>Bootstrap的HTML标准模板</title>   
            <!-- Bootstrap -->
            <link href="css/bootstrap.min.css" rel="stylesheet">
            <!--你自己的样式文件 -->
            <link href="css/your-style.css" rel="stylesheet">        
            <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询,如果不需要用可以移除 -->
            <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>    使IE6、7、8版本(IE9以下版本)浏览器兼容html5新增的标签
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>  IE6、7、8版本浏览器兼容css3样式
            <![endif]-->
        </head>
        <body>
            <h1>Hello, world!</h1>
            
            <!-- 如果要使用Bootstrap的js插件,必须先调入jQuery -->
            <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
            <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用 -->
            <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
        </body>
    </html>

    2、bootstrap中的标题样式定义了规则,使得在所有浏览器下显示的效果一样

       在Bootstrap中为了让非标题元素和标题使用相同的样式,还特意定义了.h1~.h6六个类名。

    <div class="h1">Bootstrap标题一</div>

    3、副标题

    <h1>Bootstrap标题一<small>我是副标题</small></h1>

    4、强调内容

    <p>我是普通文本,我的样子长成这样我是普通文本,我的样子长成这样我是普通文本,</p>
    <p class="lead">我是特意要突出的文本,我的样子成这样。我是特意要突出的文本,我的样子长成这样。</p>

    5、粗体

    <p>我在学习<strong>Bootstrap</strong>,我要掌握<strong>Bootstrap</strong>的所有知识。</p>

    6、斜体

    <p>我在慕课网上跟<em>大漠</em>一起学习<i>Bootstrap</i>的使用。我一定要学会<i>Bootstrap</i>。</p>

    7、强调类

    强调类都是通过颜色来表示强调,具本说明如下:

    • .text-muted:提示,使用浅灰色(#999)
    • .text-primary:主要,使用蓝色(#428bca)
    • .text-success:成功,使用浅绿色(#3c763d)
    • .text-info:通知信息,使用浅蓝色(#31708f)
    • .text-warning:警告,使用黄色(#8a6d3b)
    • .text-danger:危险,使用褐色(#a94442)

    8、文本对齐风格,通过类名控制class

      ☑   .text-left:左对齐

      ☑   .text-center:居中对齐

      ☑   .text-right:右对齐

      ☑   .text-justify:两端对齐

    9、列表类名

    list-unstyled:取出列表序号

    list-inline:实现内联列表

    10、代码的风格显示

    code风格:

    <div>Bootstrap的代码风格有三种:
      <code>&lt;code&gt;</code>
      <code>&lt;pre&gt;</code>
      <code>&lt;kbd&gt;</code>
    </div>

    pre风格:

    <div>Bootstrap的代码风格有三种:
      <code>&lt;code&gt;</code>
      <code>&lt;pre&gt;</code>
      <code>&lt;kbd&gt;</code>
    </div>

    kbd风格:

    <div>请输入<kbd>ctrl+c</kbd>来复制代码,然后使用<kbd>ctrl+v</kbd>来粘贴代码</div>

    11、表格样式(类名)

      ☑  .table:基础表格

      ☑  .table-striped:斑马线表格

      ☑  .table-bordered:带边框的表格

      ☑  .table-hover:鼠标悬停高亮的表格

      ☑  .table-condensed:紧凑型表格

      ☑  .table-responsive:响应式表格

    12、表格行的类

     .active  .success   .info  .warning  .danger(在<tr>中添加)

     .table-hover(在<table>中添加)

  • 相关阅读:
    响应式布局
    Fiddler2汉化版使用说明
    nonmember,nonfriend替换member函数
    Java回顾之Spring基础
    dudu,想在cnblogs首页看很久以前的文章不行。
    基于Nios II内核的项目程序为什么越优化越慢?
    学习 easyui:禁用 linkbutton 问题
    Socket编程 (异步通讯,解决Tcp粘包) 3
    .NET:可扩展的单据编号生成器 之 基于缓冲区的顺序号
    淘宝API应用开发
  • 原文地址:https://www.cnblogs.com/JoeChan/p/4514225.html
Copyright © 2020-2023  润新知