• Bootstrap学习笔记


    bootstrap模板为使IE6、7、8版本(IE9以下版本)浏览器兼容html5新增的标签,引入下面代码文件即可。
    
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    
    同理为使IE6、7、8版本浏览器兼容css3样式,引入下面代码:
    
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    移动端适配问题 
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--Bootstrap中使用了<small>标签来制作副标题-->
    <h1>Bootstrap标题一<small>我是副标题</small></h1>
    <h2>Bootstrap标题二<small>我是副标题</small></h2>
    <h3>Bootstrap标题三<small>我是副标题</small></h3>
    <h4>Bootstrap标题四<small>我是副标题</small></h4>
    <h5>Bootstrap标题五<small>我是副标题</small></h5>
    <h6>Bootstrap标题六<small>我是副标题</small></h6>
    为强调类名(类似前面说的“.lead”),这些强调类都是通过颜色来表示强调,具本说明如下:
    
        .text-muted:提示,使用浅灰色(#999)
        .text-primary:主要,使用蓝色(#428bca)
        .text-success:成功,使用浅绿色(#3c763d)
        .text-info:通知信息,使用浅蓝色(#31708f)
        .text-warning:警告,使用黄色(#8a6d3b)
        .text-danger:危险,使用褐色(#a94442)
    <div class="text-muted">.text-muted 效果</div>
    <div class="text-primary">.text-primary效果</div>
    <div class="text-success">.text-success效果</div>
    <div class="text-info">.text-info效果</div>
    <div class="text-warning">.text-warning效果</div>
    <div class="text-danger">.text-danger效果</div>
    Bootstrap通过定义四个类名来控制文本的对齐风格:
    
      ☑   .text-left:左对齐
    
      ☑   .text-center:居中对齐
    
      ☑   .text-right:右对齐
    
      ☑   .text-justify:两端对齐
    Bootstrap像去点列表一样,通过添加类名“.list-inline”来实现内联列表,简单点说就是把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示。也可以说内联列表就是为制作水平导航而生。
    <ul class="list-inline">
        <li>W3cplus</li>
        <li>Blog</li>
        <li>CSS3</li>
        <li>jQuery</li>
        <li>PHP</li>
    Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。只有屏幕大于768px的时候,添加类名“.dl-horizontal”才具有水平定义列表效果。
    <dl class="dl-horizontal">
        <dt>W3cplus</dt>
        <dd>一个致力于推广国内前端行业的技术博客。它以探索为己任,不断活跃在行业技术最前沿,努力提供高质量前端技术博文</dd>
        <dt>慕课网</dt>
        <dd>一个专业的,真心实意在做培训的网站</dd>
        <dt>我来测试一个标题,我来测试一个标题</dt>
        <dd>我在写一个水平定义列表的效果,我在写一个水平定义列表的效果</dd>
    </dl>

    不管使用哪种代码风格,在代码中碰到小于号(<)要使用硬编码&lt;”来替代,大于号(>)使用“&gt;”来替代。而且对于<pre>代码块风格,标签前面留多少个空格,在显示效果中就会留多少个空格。你只需要在pre标签上添加类名“.pre-scrollable”,就可以控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条

    table

    斑马线表格
    <table class="table table-striped"></table>
    边框
    <table  class="table table-bordered"></table>
    悬浮高亮效果
    <table class="table table-striped table-bordered table-hover"></table>
    表格--紧凑型表格
    <table class="table table-condensed"></table>
    表格--响应式表格
    随着各种手持设备的出现,要想让你的Web页面适合千罗万像的设备浏览,响应式设计的呼声越来越高。在Bootstrap中也为表格提供了响应式的效果,将其称为响应式表格
    当你的浏览器可视区域小于768px时,表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时,表格底部水平滚动条就会消失。
    <div class="table-responsive">
    <table class="table table-bordered"></table>
    </div>
  • 相关阅读:
    linux下文本处理
    JSON对象的序列化和反序列化
    大整数相加的js实现
    前端日志格式化
    对象deepcopy
    基于vue实现的小程序管理后台图文编辑器
    原型和原型链
    函数声明、函数表达式及函数立即执行
    网址
    判断日期是否相等
  • 原文地址:https://www.cnblogs.com/cjshuang/p/5904559.html
Copyright © 2020-2023  润新知