• Bootstrap CSS


    1.Bootstrap CSS 概览

    1.HTML5文档类型

    Bootstrap中使用了部分HTML5元素和CSS属性,所以需要在开头添加HTML5文档属性。

    1 <!DOCTYPE html>
    2 <html>
    3 ....
    4 </html>

    2.移动设备优先

    1.考虑到现在移动设备的迅猛发展,Bootstrap3开始优先支持移动设备,然后才是桌面设备。

    所以在代码开始前需要添加:

    1 <meta name="viewport" content="width=device-width,inital-scale=1.0">             //inital-scale=1.0是指1:1缩放
    2 </head>

    2.如果你不想让移动设备进行缩放,使得看起来更像原生的网页,那么可以使用一下代码:

    1 <meta name="viewport" content="width=device-width,inital-scale=1.0, maximum-scale=1.0,user-scalable=no">

    不过不建议对所有的设备都使用。

    3.响应式的图像

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

    这个类的定义:

    1 .img-responsive {
    2   display: inline-block;
    3   height: auto;
    4   max- 100%;
    5 }

    4.全局显示和排版链接

    基本的全局显示

    1 body {
    2   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    3   font-size: 14px;
    4   line-height: 1.428571429;
    5   color: #333333;
    6   background-color: #ffffff;
    7 }
    8 
    9 //以上分别为默认的字体,字体大小,内联高度,字体颜色,背景颜色

    基本的链接

     1 a:hover,
     2 a:focus {
     3   color: #2a6496;
     4   text-decoration: underline;
     5 }
     6 
     7 a:focus {
     8   outline: thin dotted #333;
     9   outline: 5px auto -webkit-focus-ring-color;
    10   outline-offset: -2px;
    11 }

    5.避免跨浏览器不一致

    6.容器

    1 <div class="container">
    2   ...
    3 </div>
    1 .container {
    2    padding-right: 15px;
    3    padding-left: 15px;
    4    margin-right: auto;
    5    margin-left: auto;
    6 }

    2.网格系统

    1.什么是网格

    简单地说,网页设计中的网格用于组织内容,让网站易于浏览,并降低用户端的负载。

    2.Bootstrap的网格系统

    Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类。

    3.网格系统的工作原理(摘自w3cshool)

    网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的:

    • 行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding)。

    • 使用行来创建列的水平组。

    • 内容应该放置在列内,且唯有列可以是行的直接子元素。

    • 预定义的网格类,比如 .row 和 .col-xs-4,可用于快速创建网格布局。LESS 混合类可用于更多语义布局。

    • 列通过内边距(padding)来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距(margin)取负,表示第一列和最后一列的行偏移。

    • 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如,要创建三个相等的列,则使用三个 .col-xs-4

    3.排版

    1.排版

    使用 Bootstrap 的排版特性,您可以创建标题、段落、列表及其他内联元素。

    small实现内联子标题:

    1 <h1>标题1<small>标题1</small></h1>

    lead引导主体副本:

    <p class="lead">这是主题副本</p>

    强调标签:

    1         <!--强调标签-->
    2                 <p><small>强调1</small></p>                   //使用small
    3                 <p><strong>强调1</strong></p>                 //使用strong
    4                 <p><em>强调1</em></p>                         //使用em

    缩写词:

     <!--缩写词-->
                    <abbr title="World Wide Web">WWW</abbr>
                    <abb title="一个组织" class="initialism">RSS</abb>   //当鼠标放在RSS上的时候会显示对这个词的解释(一个组织)

    地址标签:

    1 <!--地址标签-->
    2                 <address>
    3                     <p>常驻地址:</p><br>                                        //由于address的display是一个block,需要内部自己添加<br>换行
    4                     <a href="#">xxxx@qq.com</a>
    5                 </address>

    引用:

    1                 <!--各种引用-->
    2                 <blockquote>引用1</blockquote>
    3                 <blockquote><cite title="source title">引用1</cite></blockquote>
    4                 <blockquote class="pull-right">向右对齐的引用</blockquote>

    自定义列表:

    1                 <!--自定义列表-->
    2                 <dt>列表1</dt>
    3                 <dt>解释1</dt>

    换行与不换行:

    1  <!--超出部分自动换行和不换行-->
    2                <p class="text-nowrap">这是很长的一段文字,超出部分不换行。这是很长的一段文字,超出部分不换行。这是很长的一段文字,超出部分不换行。</p>
    3                 <p class="text-justify">这是很长的一段文字,超出部分将要换行。这是很长的一段文字,超出部分将要换行。文字,超出部分将要换行。这是很长的一段文字,超出部分将要换行。</p>
    4                 <!--这里的是否换行是指:当改变浏览器大小的时候-->

    列表的浮动和偏移:

    1                 <!--列表的浮动和偏移-->
    2                 <dl class="dl-horizontal">
    3                 <dt>列表1</dt>
    4                 <dt>解释1</dt>

    页面滚动:

     1                 <!--页面可滚动-->
     2             <p class="pre-scrollable">
     3                 When you are old and grey and full of sleep, 当你老了,头发花白,睡意沉沉,
     4                 And nodding by the fire,take down this book, 倦坐在炉边,取下这本书来,
     5                 And slowly read,and dream of the soft look 慢慢读着,追梦当年的眼神
     6                 Your eyes had once,and of their shadows deep; 你那柔美的神采与深幽的晕影。
     7                 How many loved your moments of glad grace, 多少人爱过你昙花一现的身影,
     8                 And loved your beauty with love false or true, 爱过你的美貌,以虚伪或真情,
     9                 But one man loved the pilgrim Soul in you 惟独一人曾爱你那朝圣者的心,
    10                 And loved the sorrows of your changing face; 爱你哀戚的脸上岁月的留痕。
    11                 And bending down beside the glowing bars, 在炉罩边低眉弯腰,
    12                 Murmur,a little sadly,how Love fled 忧戚沉思,喃喃而语,
    13                 And paced upon the mountains overhead 爱情是怎样逝去,又怎样步上群山,
    14                 And hid his face amid a crowd of stars. 怎样在繁星之间藏住了脸。
    15             </p>

    大小写:

    1                 <!--大写,小写和首字母大写-->
    2  
    3                 <p class="text-lowercase">WERRR</p>
    4                 <p class="text-uppercase">werrr</p>
    5                 <p class="text-capitalize">wERRR</p>
    本博客基于网络课程完成,旨在学习,有错误请指正!
  • 相关阅读:
    将new Date()的时间转换为常用时间格式
    封装通用的jsonp方式
    javascript实现手机震动API代码
    webstorm 2016.3.2 破解代码(免费)
    淘宝镜像在npm中执行的代码
    jQuery lazyload 懒加载
    uniapp小程序获取时间戳转换时间例子
    微信小程序解析HTML标签
    微信小程序之tab切换效果
    巧用weui.gallery(),点击图片后预览图片
  • 原文地址:https://www.cnblogs.com/comefuture/p/6762559.html
Copyright © 2020-2023  润新知