bootstrap_bootstrap3 - CSDN
bootstrap 订阅
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。 [1]  国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。 [2] 展开全文
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。 [1]  国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。 [2]
信息
开发商
Twitter
软件授权
美国Twitter公司
软件名称
Bootstrap
更新时间
2019-02-13
软件版本
v4.4.1(稳定版)
软件平台
IE/Chrome/Opera/Firefox/Safari等
软件语言
HTML、CSS、JavaScript
软件大小
713K
Bootstrap版本形态
目前使用较广的是版本2、3和4,其中2的最新版本的是2.3.2,3的最新版本是3.4.1,4的最新版本是4.4.1 [3]  在2018年1月下旬,Bootstrap团队发布了Bootstrap 4 正式版,4的最主要变化包括以下方面:
收起全文
  • 细说BootStrap

    2019-07-19 16:11:26
    本课程工34节内容,详细讲述了BootStrap的样式、组件和JavaScript组件。
  • BootStrap的简单介绍

    2020-05-23 14:43:42
    BootStrap 概念:一个前端开发的框架,Bootstrap是基于html、css、Javascript的。 框架:框架是一个半成品软件,开发人员可以在框架基础上进行开发,简化编码。 好处: ① 定义了许多CSS样式和js插件。开发者可以...

    BootStrap

    • 概念:一个前端开发的框架,Bootstrap是基于html、css、Javascript的。
      1. 框架:框架是一个半成品软件,开发人员可以在框架基础上进行开发,简化编码。
      2. 好处:
        ① 定义了许多CSS样式和js插件。开发者可以直接引用这些样式和插件。
        ② 响应式布局:同一套页面可以兼容不同分辨率的设备。
    • 快速入门
      1. 下载Bootstrap

      2. 下载后有三个文件夹,将这三个文件夹复制到项目中

      3. 创建html页面,引入必要的资源

        <!DOCTYPE html>
        <html lang="zh-CN">
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">  <!--窗口宽度是设备宽度,缩放比例是1:1-->
            <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
            <title>Bootstrap HelloWorld</title>
        
            <!-- Bootstrap -->
            <!--引入的资源文件是从cdn获取的,这里将其改为从本地获取,原来的是https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet-->
            <link href="css/bootstrap.min.css" rel="stylesheet">
        
            <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
            <script src="js/jquery-3.4.1.min.js"></script>
            <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
            <script src="js/bootstrap.min.js"></script>
        </head>
        <body>
        <h1>你好,世界!</h1>
        
        </body>
        </html>
        

    响应式布局

    • 同一套页面可以兼容不同分辨率的设备,按照我的想法是随着页面的缩小而调整页面布局,随着页面的增大也调整布局使之适应页面的内容。
    • 实现:依赖于栅格系统
      栅格系统:将一行平均分为12个格子,可以指定元素占几个格子
    • 步骤:
      1. 定义容器:相当于之前的table
        • 容器的分类:
          • container:两边有空白,除了最小的屏幕
          • container-fluid:每一种设备都是100%宽度
      2. 定义行。相当于之前的tr      样式:row
      3. 定义元素。指定该元素在不同的设备上,所占的格子数目。样式:col-设备代号-格子数目
        • 设备代号
          • xs:超小屏幕 手机 (<768px) :col-xs-12
          • sm:小屏幕 平板 (≥768px)
          • md:中等屏幕 桌面显示器 (≥992px)
          • lg:大屏幕 大桌面显示器 (≥1200px)
        • 注意事项:
          1. 一行中如果格子数目超出12,那么就会自动换行
          2. 栅格类属性可以向上兼容
          3. 如果真实设备的宽度小于了设置栅格属性的设备代码的最小值,会一个元素占满一整行。

    CSS样式和JS插件

    全局css样式

    • 按钮 :class = “btn btn-default”

    • 图片:
      * class = “img-responsive”
      * 图片形状

       	1. <img src="..." alt="..." class="img-rounded">  //方的
       	2. <img src="..." alt="..." class="img-circle">  //圆的
       	3. <img src="..." alt="..." class="img-thumbnail">  //相框型的
      
    • 表格:

       1. table
       2. table-bordered    边框
       3. table-hover    悬浮效果
      
    • 表单

       1. 给表单添加:class="form-control"
       2. 给form上添加:class=“form-horizontal”:水平排列
       3. 
      

    组件

    导航条
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <!-- 右边三个横线按钮,汉堡按钮 -->
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>    <!-- 汉堡按钮的横线,有一个就加一条横线 -->
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
            </div>
    
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    
    分页条:
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li>
                <a href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li>
                <a href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
    

    插件

    轮播图
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>
    
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="..." alt="...">    <!-- 图片的地址之类的 -->
                <div class="carousel-caption">
                    ...  <!-- 这儿写图片下的字,不写比较好看 -->
                </div>
            </div>
            <div class="item">
                <img src="..." alt="...">
                <div class="carousel-caption">
                    ...
                </div>
            </div>
            ...    <!-- 这儿的...表示可以有多张图片 -->
        </div>
    
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
    
    展开全文
  • 一、Introduction 如果说到Bootstrap你会想到什么?是Twitter推出的那个用于前端开发的开源工具包吗?Unfortunately,本文要讨论的并非是...机器学习中的Bagging,AdaBoost等方法其实都蕴含了Bootstrap的思想...

    一、Introduction

     

    如果说到Bootstrap你会想到什么?是Twitter推出的那个用于前端开发的开源工具包吗?Unfortunately,本文要讨论的并非是Bootstrap工具包,而是统计学习中一种重采样(Resampling)技术。这种看似简单的方法,对后来的很多技术都产生了深远的影响。机器学习中的Bagging,AdaBoost等方法其实都蕴含了Bootstrap的思想。

     

    下面引用的是谢益辉博士关于Bootstrap (和 Jackknife)基本思想的论述,希望能帮助读者对于Bootstrap 建立一个初步的认识:

     

    在统计的世界,我们面临的总是只有样本,Where there is sample, there is uncertainty,正因为不确定性的存在,才使统计能够生生不息。传说统计学家、数学家和物理学家乘坐一列火车上旅行,路上看到草原上有一只黑羊,统计学家说,“基于这个样本来看,这片草原上所有的羊都是黑的”,数学家说,“只有眼前这只羊是黑的”,物理学家则说,“你们都不对,只有羊的这一面是黑的”。这是关于统计和其他学科的一个玩笑话,说明了统计的一些特征,比如基于样本推断总体。

     

    一般情况下,总体永远都无法知道,我们能利用的只有样本,现在的问题是,样本该怎样利用呢?Bootstrap的奥义也就是:既然样本是抽出来的,那我何不从样本中再抽样(Resample)?Jackknife的奥义在于:既然样本是抽出来的,那我在作估计、推断的时候“扔掉”几个样本点看看效果如何?既然人们要质疑估计的稳定性,那么我们就用样本的样本去证明吧。

     

    John Fox的那一系列附录中有一篇叫“Bootstrapping Regression Models”,当我看到第二页用方框框标出那句话时,我才对Bootstrap的思想真正有了了解(之前迷茫了很长时间)。Bootstrap的一般的抽样方式都是“有放回地全抽”(其实样本量也要视情况而定,不一定非要与原样本量相等),意思就是抽取的Bootstrap样本量与原样本相同,只是在抽样方式上采取有放回地抽,这样的抽样可以进行B次,每次都可以求一个相应的统计量/估计量,最后看看这个统计量的稳定性如何(用方差表示)。Jackknife的抽样痕迹不明显,但主旨也是取样本的样本,在作估计推断时,每次先排除一个或者多个样本点,然后用剩下的样本点求一个相应的统计量,最后也可以看统计量的稳定性如何。

     

    在R中简单随机抽样的函数是sample(),其中有个参数replacement表示是否放回,经典的抽样基本都是不放回(replace = FALSE),而Bootstrap则是replace = TRUE;从FALSE到TRUE,小小的一个变化,孕育了Bootstrap的经典思想。

     

    统计推断是从样本推断相应的总体, 有参数法和非参数法。早期的统计推断是以大样本为基础的。自从英国统计学家威廉·戈塞特(Willam Gosset)在1908年发现了t分布后,就开创了小样本的研究。费希尔(Fisher)在1920年提出了似然(likelihood)的概念,一直被认为是高效的统计推断思维方法。半个多世纪以来,这种思维一直占有主导地位,统计学家研究的主流就是如何将这种思维付诸实践,极大似然函数的求解是这一研究的关键问题。

    当今计算机技术的高度发展,使统计研究及其应用跃上了一个新台阶。这不仅提高了计算的速度,而且可以把统计学家从求解数学难题中释放出来,并逐渐形成一种面向应用的、基于大量计算的统计思维——模拟抽样统计推断, Bootstrap 法就是其中的一种。

     

    Bootstrap方法最初由美国斯坦福大学统计学教授Efron在1977年提出。作为一种崭新的增广样本统计方法,Bootstrap方法为解决小规模子样试验评估问题提供了很好的思路。当初,Efron教授将他的论文投给了统计学领域的一流刊物《The Annals of Statistics》,但在被该刊接受之前,这篇后来被奉为扛鼎之作的文章曾经被杂志编辑毫不客气地拒绝过,理由是“太简单”。从某种角度来讲,这也是有道理的,Bootstrap的思想的确再简单不过,但后来大量的事实证明,这样一种简单的思想却给很多统计学理论带来了深远的影响,并为一些传统难题提供了有效的解决办法。Bootstrap方法提出之后的10年间,统计学家对它在各个领域的扩展和应用做了大量研究,到了20世纪90年代,这些成果被陆续呈现出来,而且论述更加全面、系统。

     

    很多人会对Bootstrap这个名字感到困惑。英语Bootstrap的意思是靴带,来自短语:“pull oneself up by one′s bootstrap”,18世纪德国文学家拉斯伯(Rudolf Erich Raspe)的小说《巴龙历险记(或译为终极天将)》(Adventures of Baron Munchausen) 记述道:“巴龙掉到湖里沉到湖底,在他绝望的时候,他用自己靴子上的带子把自己拉了上来。”现意指不借助别人的力量,凭自己的努力,终于获得成功。在这里“bootstrap”法是指用原样本自身的数据抽样得出新的样本及统计量,根据其意现在普遍将其译为“自助法”。

     

    二、Explanation

     

    Bootstrap法是以原始数据为基础的模拟抽样统计推断法,可用于研究一组数据的某统计量的分布特征,特别适用于那些难以用常规方法导出对参数的区间估计、假设检验等问题。其基本思想是:在原始数据的范围内作有放回的再抽样, 样本容量仍为n,原始数据中每个观察单位每次被抽到的概率相等, 为1/n , 所得样本称为Bootstrap样本。于是可得到参数θ的一个估计值θ^(b),这样重复若干次,记为B 。

     

    设随机样本 X = [x1, x2,...,xn]是独立同分布样本xi~F(x), i = 1, 2,..., n。R(X, F)为某个预先选定的随机变量, 是关于X和F的函数。现要求根据观测样本[x1, x2,...,xn]来估计R(X, F)的分布特征。例如,设θ = θ(F)为总体分布F的某个参数,Fn是观测样本X的经验分布函数(如果你不了解什么是“经验分布函数”可以参考http://blog.csdn.net/baimafujinji/article/details/51720090), θ的估计,记估计误差为

       (1)

    现要由观测样本X =[x1, x2,...,xn]估计R(X, F)的分布特征,Bootstrap方法的实质就是一个再抽样过程,计算R(X, F)分布特征的基本步骤归纳如下:
    1)根据观测样本X =[x1, x2,...,xn]构造经验分布函数Fn;
    2)从Fn中抽取样本,称其为Bootstrap样本;
    3)计算相应的Bootstrap统计量R*(X*,Fn),其表达式为

       (2)

    式中是Bootstrap样本的经验分布函数;Rn为Tn的Bootstrap统计量;

     

    4)重复过程2)、3)N次,即可获得Bootstrap统计量R*(X*,Fn)的N个可能取值;
    5)用R*(X*, Fn)的分布去逼近R(X, F)的分布, 即用Rn的分布去近似Tn的分布,可得到参数θ(F)的N个可能取值,即可统计求出参数θ的分布及其特征值。

     

    由Bootstrap方法的实现步骤可以看出:

    1)Rn的统计特性是基于经验分布函数得到的,Tn的统计特性是通过真实分布函数F描述的;

    2)Bootstrap方法的一个重要环节就是计算自助统计量Rn的分布;

    3)Bootstrap方法的核心思想是利用自助统计量Rn的统计特性来近似Tn的统计特性,因此,Bootstrap方法的效果好坏在很大程度上取决于这二者的近似程度;

    4)由式(1)可以看出,Tn的统计特性决定于θ(F)的统计特性。对于某个具体的分布F而言,θ(F)是一个确定的值,因此,Tn的统计特性取决于的统计特性;

    5)由式(2)以及Bootstrap方法的抽样过程可以看出,Rn的统计特性近似于一个N(0,σ^2) 的正态分布。因此,Rn近似Tn的程度主要取决于近似θ(F)的程度。对于大样本而言,Rn与Tn的统计特性有良好的相似性。但对于小子样特别是极小子样的情况下,二者之间的差异却是不可忽略的。

     

    以Bootstrap方法获取正态分布均值的先验分布为例研究Rn的统计特性。已知观测样本数据 X = [x1, x2, ..., xn], xi~N(μ,σ^2),i = 1, 2, ..., n,则X = [x1, x2, ..., xn]的经验分布(这里考虑参数Bootstrap方法)Fn也是一正态分布
    其中,

       (3)

    用经验分布Fn的均值来估计μ, 则有估计误差, 构造的Bootstrap统计量, 其中

     

     

     

     

    三、Application

     

    文献【5】中给出了22例胎儿受精龄(Y,周)与胎儿外形测量指标:身长(X1,cm),头围(X2,cm),体重(X3,g),数据列于表1。

     

    很容易算得三个指标的平均值向量为:X = (33.0455, 23.2636, 936.9091) ---------(2)

    协方差矩阵为

    ---------(3)

    对其进行主成分分析,得3个特征根分别为:λ1 = 2.92613, λ2 = 0.07140, λ3 = 0.00247。我们用bootstrap 法来估计第一特征根的标准差及置信区间。

     

    首先在22个个体中作有放回的抽样,每个个体被抽中的概率为1/22,抽样次数仍为n=22,这可以用计算机产生1~22的均匀分布的随机数,相应的编号即为抽中的个体,由这些个体组成的样本就是一个bootstrap样本。如第一
    次我们得到22个随机数为:10, 20, 3, 19, 12, 2, 3, 2, 5, 20, 8, 13, 12, 18, 17, 22, 2, 1, 19, 7, 8, 13。由对应的bootstrap 样本求得

    如此重复B次(B分别取50, 100, 200, 500, 800, 1000),得

    的频数分布可知,其分布是偏态的。故以上、下2.5%分位数作为其95%置信区间。结果列于附表前半部分。由此得到λ1 的置信区间, 如B = 1000 时, 其95%的置信区间为:2.8919~ 2.9672, 其标准误为0.01946。在整个计算过程中, 只是重复地抽样, 重复地计算λ1, 根据其频数分布的分位数即得到了其置信区间, 无需繁杂的数学推导。事实上,小样本时主成分的置信区间尚无理想的计算方法。

    在这里, 来自未知总体F 的原样本被视为经验分布Fe,Bootstrap是在经验分布的基础上作有放回的抽样, 由于Fe 是F 的非参数估计,故由此产生的方法称为非参数的bootstrap , 相应的估计量称为非参数的bootstrap统计量。

     

    事实上, bootstrap亦可以从参数的角度考虑。如上例, X = (X1 , X2 , X3) ,此时设经验分布Fp 是以式(2)为均向量、式(3)为协方差阵的3元正态分布。此时的Bootstrap的样本是从Fp中而不是从Fe (样本)中随机产生,其余步骤相同。由于此时Fp 是F 的一个参数估计,则该法称为参数的bootstrap,相应的估计称为参数的bootstrap估计。结果列于附表后部分。B = 1000时,其95% 的置信区间为: 2. 8431~ 2. 9705,其标准误为0. 03495。

     

     

    -----------------------------------------------------------------------

    本文主要根据以下文献整理而成

     

    [1] 谢益辉,我的一些统计方法观,http://cos.name/2008/11/outlook-on-statistical-methods/,2007-01-27

    [2] 谢益辉,朱钰,Bootstrap方法的历史发展和前沿研究,统计与信息论坛,2008年2月,第23卷,第2期

    [3] 陈峰,陆守曾,杨珉,Bootstrap估计及其应用,中国卫生统计,1997年,第14卷,第5期

    [4] 刘伟,龙琼,陈芳,付敏,Bootstrap方法的几点思考,飞行器测控学报,2007年10月,第26卷,第5期

    [5] 陈峰,主成分回归分析,中国卫生统计,1991年,第8卷,第1期

    展开全文
  • 本系列课程以Bootstrap官方资料为基础,全面透彻解析了Bootstrap的各个方面的知识;通过专业化的分析转化,把晦涩难懂的理论转化为简单的语言和直观的实例,让大家在边看边学边练中掌握Bootstrap的使用。Vue.js...
  • Bootstrap简单网页制作

    2018-07-25 23:18:50
    我们每期会根据不用的项目案例安排不同的技术栈免费课程!免费!免费!免费!来帮助大家提高,有兴趣的同学可以私信我哦~ 所有项目都是以真实项目为实战例。 我们在开发前端页面的时候,如果每一个按钮、样式、...





    我们每期会根据不用的项目案例安排不同的技术栈免费课程!免费免费免费!来帮助大家提高,有兴趣的同学可以私信我哦~
    所有项目都是以真实项目为实战例。

    我们在开发前端页面的时候,如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零开始去写,那就太浪费时间了。所以我们需要一个框架,帮我们实现一个页面的基础部分和解决一些繁琐的细节,只要在它的基础上进行个性化定制就可以了。

    Bootstrap 就是这样一个简洁、直观、强悍的前端开发框架,只要学习并遵守它的标准,即使是没有学过网页设计的开发者,也能做出很专业、美观的页面,极大地提高了工作效率。像下面这个漂亮的网站就是基于 Bootstrap 来开发的。

    Bootstrap 的中文文档地址在这里 Bootstrap 中文文档,目前主流版本为 3.3.x。不过因为文档的内容结构比较零散,只是从头到尾把一个个组件拆开来讲一遍,缺乏趣味性和实战性(这也是现在很多教程的通病),因此在本教程中,我们会自己动手开发一个完整的企业网站案例,在实践的过程中来学习和理解 Bootstrap这个前端开发框架的知识。

    注意

    为了锻炼你阅读文档和主动学习的能力,我们只会把每个知识点最核心的知识告诉你,而它的扩展知识将以链接的形式附在后面。


    企业网站是十分常见的一种页面形式。一般包括一个展示企业形象的首页、几个介绍企业资料的文章页、一个“关于”页面。如下就是最终的首页效果。(当然了,这个界面还是比较粗糙的,不过我们这个教程重点是 Bootstrap 的学习,如果你要深入学习 CSS 样式方面的知识,请参看我们的相关教程)

    项目结构与页面规划

    我们先创建站点目录,例如放在 web 站点 /home/wwwroot/htdocs/wx-xxmm 下,在里面新建一个 Template 目录,用于存放页面 html 文件,新建一个 assets 目录,存放图片、自定义样式表等静态资源文件,以及一个 js 目录,存放自己写的 javascript 代码。

    然后在 Template 目录里,把这个项目的所有文件创建好:

    • 首页(Home_index.html)
    • 客户案例详情(Home_case.html)
    • 联系方式及意见反馈表单(Home_about.html)

    首页

    首页的效果图前面有展示,它包括这几个区域。做任何页面之前,我们都要先把结构规划好,这样脑子里有清晰的思路,工作起来才有效率。

    • 导航条
    • 轮播图
    • 客户案例列表
    • 产品截图列表
    • 底部网站信息

    首页 HTML 骨架与素材准备

    然后准备几张图片素材(分别是轮播图、客户案例、产品截图,各 3 张),把它们放到 assets 目录里面。然后在 assets 目录里面新建一个 style.css 文件,用于保存自定义样式。

    然后在 Template 目录里新建文件 Home_index.html ,按照上面规划的页面结构,写好这些基础的 HTML 和 CSS 代码,把页面的骨架搭好。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="../assets/style.css" rel="stylesheet">
    </head>
    <body>
        <!--导航-->
        <div class="nav">
            <a href="">微信公众号管家</a>
            <ul>
                <li><a href="">首页</a></li>
                <li><a href="">关于</a></li>
                <li><a href="">登录</a></li>
            </ul>
        </div>
        <!--轮播图-->
        <div class="slide">
            <div>
                <h1>轮播图1</h1>
                ![](../assets/slide_1.jpg)</div>
            <div>
                <h1>轮播图2</h1>![](../assets/slide_2.jpg)</div>
            <div>
                <h1>轮播图3</h1>![](../assets/slide_3.jpg)</div>
        </div>
        <!--案例-->
        <div class="case">
            <div>
                <h2>案例1</h2>
                ![](../assets/case_1.jpg)
            </div>
            <div>
                <h2>案例2</h2>
                ![](../assets/case_2.jpg)
            </div>
            <div>
                <h2>案例3</h2>
                ![](../assets/case_3.jpg)
            </div>
        </div>
        <!--产品功能截图-->
        <div class="screenshoot">
            <div>
                <h2>截图1</h2>![](../assets/screenshot_1.jpg)</div>
            <div>
                <h2>截图2</h2>![](../assets/screenshot_2.jpg)</div>
            <div>
                <h2>截图3</h2>![](../assets/screenshot_3.jpg)</div>
        </div>
        <!--底部-->
        <div class="footer">
            版权所有 2016
            <a href="">四光年科技</a>
        </div>
    </body>
    </html>

    注意我们在页面里引入了样式表文件 ../assets/style.css(目前这个文件里面是空的)

    在浏览器里打开这个页面,看看是否正常访问。因为没有写任何 CSS 样式代码,看上去挺丑的。

    引入 Bootstrap 框架相关文件

    前面说到 Bootstrap 是一个前端开发框架。其实说白了就是一个样式表文件(bootstrap.min.css)和一个 javascript 文件(bootstrap.min.js),在页面里把它们引入进来后,就可以直接使用里面的 CSS 规则和各种组件了。

    远程 CDN 引入方式

    编辑 Home_index.html ,把几个 Bootstrap 框架包含的文件添加进来,这里推荐使用 CDN 源 上的远程文件,可以节约本地的带宽。

    另外,由于 Bootstrap 还依赖 jQuery 库,所以也要一并把这个 jquery.min.js 文件引入。

    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link href="../assets/style.css" rel="stylesheet">
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    注意这几个文件的前后顺序,如果不对,会导致页面无法正常运行。

    1. 先引入 bootstrap.min.css (Bootstrap的样式表文件)
    2. 然后引入自己写的 css 文件(style.css)
    3. 然后引入 jQuery(javascript 库)
    4. 最后引入 bootstrap.min.js 程序文件

    本地文件引入方式

    如果在没有联网的环境,或者用上面的方式引入文件后浏览器报错,可以把 Bootstrap 的所有文件下载到本地后再引用到页面中。打开下面这个地址,把压缩包下载后解压,全部放到 assets 目录的 bootstrap 里面。

    下载Bootstrap包含的文件到本地

    然后修改 Home_index.html 里的引入文件代码,使用本地引用文件的方式来使用 Bootstrap

    <link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
    <link href="../assets/style.css" rel="stylesheet">
    <script src="../assets/jquery.min.js"></script>
    <script src="../assets/bootstrap/js/bootstrap.min.js"></script>

    Bootstrap 做了些什么?

    打开 assets/bootstrap/ 目录下的样式表文件 bootstrap.min.css ,可以看到里面定义了大量的 CSS 规则,例如下面这段就定了一个类名为 btn-primary 的规则。

    .btn-primary{color:#fff;background-color:#337ab7;border-color:#2e6da4}

    现在测试一下,在 Home_index.html 文件里面写一个按钮,添加 classbtn btn-primary

    <body>
        <button type="button" class="btn btn-primary">按钮</button>
    </body>

    刷新页面,你会看到一个蓝色的按钮。不需要自己写一行 CSS 代码,只要在页面里面给某个元素指定一个 class ,就可以直接显示出预定的样式—— 这就是使用 Bootstrap 前端框架的魔力。

    使用导航条组件

    导航条位于页面最顶部,提供整个网站所有页面的链接,最终效果如下:

    我们可以直接使用 Bootstrap导航条组件

    <!--导航-->
    <nav class="navbar navbar-default">
       <div class="container-fluid">
           <ul class="nav navbar-nav">
               <li class="active"><a href="">首页</a></li>
               <li><a href="">关于</a></li>
               <li><a href="">登录</a></li>
           </ul>
       </div>
    </nav>
    1. 添加一个 nav 标签,并设置 classnavbar navbar-default ,rolenavigation
    2. 然后在里面添加一个类名为 container-fluiddiv ,用来容纳导航条里的其他元素(链接、按钮等)。
    3. 添加一些导航链接 <li> ,然后把第一个 <li>class 指定为 active ,表示激活状态。

    刷新页面,一个漂亮的导航条就诞生了!我们只是写了一些 HTML 代码,没有写一句 CSS 代码,非常省时省力。

    导航条还漏了一个“网站标题”,把下面这段 <div class="navbar-header"> 添加到 <ul class="nav navbar-nav"> 的前面就可以了

    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">微信公众号管家</a>
      </div>
    
      <ul class="nav navbar-nav">
        <li class="active"><a href="">首页</a></li>

    如果要添加更多的效果,例如下拉菜单、固定在顶部等等,请在文档中查看,相信你现在应该很容易看明白了。

    Bootstrap文档——导航条

    学一门新知识的最好办法是通过实践操作由浅入深先入门再填坑,不要从头到尾去看枯燥的文档,先用起来,掌握最核心的知识点,然后再去了解其他延伸的内容。我们的课程不是“照本宣科读文档”,更重要的是培养你的学习方法。

    使用轮播图组件

    为了实现一个轮播图效果(也有人叫“幻灯片”),以前我们可能会自己写代码,或者去找 jQuery 的插件。其实 Bootstrap 已经自带了一个轮播组件—— Carousel ,效果如下:

    <!--轮播图-->
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
       <!-- Indicators -->
       <ol class="carousel-indicators">
           <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
           <li data-target="#carousel-example-generic" data-slide-to="1"></li>
           <li data-target="#carousel-example-generic" data-slide-to="2"></li>
       </ol>
       <!-- Wrapper for slides -->
       <div class="carousel-inner" role="listbox">
           <div class="item active">
               ![](../assets/slide_1.jpg)
               <div class="carousel-caption">
                   <h1>轮播1的标题</h1>
                   <p>这里是轮播图1的说明</p>
               </div>
           </div>
           <div class="item">
               ![](../assets/slide_2.jpg)
               <div class="carousel-caption">
                   <h1>轮播2的标题</h1>
                   <p>这里是轮播图2的说明</p>
               </div>
           </div>
           <div class="item">
               ![](../assets/slide_3.jpg)
               <div class="carousel-caption">
                   <h1>轮播3的标题</h1>
                   <p>这里是轮播图3的说明</p>
               </div>
           </div>
       </div>
       <!-- Controls -->
       <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
           <span class="glyphicon glyphicon-chevron-left"></span>
           <span class="sr-only">Previous</span>
       </a>
       <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
           <span class="glyphicon glyphicon-chevron-right"></span>
           <span class="sr-only">Next</span>
       </a>
    </div>

    轮播图组件分三部分

    • <ol class="carousel-indicators"> 是“指示器”,就是下方的那三个白色小点,标记当前播放到哪张图片了。
    • <div class="carousel-inner" role="listbox"> 里面是主体内容区域,包括几张图片和对应说明,分别用 <div class="item"> 包裹起来
    • 最后的两个 <a class="left carousel-control"> 元素是手动操作图片左右切换的按钮。

    使用自定义样式来完善 Bootstrap 默认样式

    刷新页面,几张图片开始自动播放。但是我们会发现一个问题——如果三张图片大小不一致,这个轮播区域会忽大忽小地变化。

    这种情况就是 Bootstrap 力不能及的范围了,因为它不知道我们将会使用什么样的素材,因此要自己写一些自定义样式的 CSS 代码来处理这些特殊的情况

    打开自定义样式表文件 assets/style.css ,在里面添加如下的代码,把图片高度固定设置为 500px,并且设置最小宽度为 100% ,撑满页面。

    .carousel-inner > .item > img {
      min-width: 100%;
      height: 500px;
    }

    好了,现在轮播图的图片滚动很正常了。

    客户案例列表

    在这个区域中,有三个宽度均等的横向排列的小块,每个小块是由一个圆形图片和一些说明文字组成。最终效果如下:

    栅格布局

    想想看,如果是你自己写 CSS ,准备怎样实现这个均等排列的效果?例如下面通过设置固定宽度/百分比来处理:

    .item { float:left, width: 300px; /*或者 width: 33%*/ }

    如果一行要显示4个、6个、或者更多呢?这样计算起来就太不灵活了(100/6 等于 16.6666666……)。

    其实我们并不关心每一份的宽度是多少像素/百分比,我们只关心能不能自动地平均划分成多少份Bootstrap栅格系统布局就是为了实现自动计算每一份的宽度而诞生的。

    栅格可以理解为一个安全门,它的总长度可以拉长,可以缩短,但是总的间隔数量是不变的,并且所有间隔的宽度都一样

    这个伸缩的过程,像不像我们把浏览器拉宽、变窄的操作? Bootstrap栅格系统规定了每个页面的宽度被平均划分为 12 等份,不管整个页面的宽度是 1000像素,还是500像素,都会自动计算每一份(1/12)的宽度是多少。

    通过给栅格布局内部的元素指定 classcol-md-份数 ,来告诉它的宽度占据这12份里面的几份

    例如下面的代码中,有3个 divclasscol-md-4(先不管中间那个 -md- 是什么,关注这个数字就好),算一算4 + 4 + 4 是不是正好等于 12

    <div class="container">
        <div class="row">
            <div class="col-md-4">bb</div>
            <div class="col-md-4">cc</div>
            <div class="col-md-4">ee</div>
        </div>
    </div>

    刷新页面,然后用 Chrome 浏览器的开发工具看看效果,发现整个页面的宽度正好被平均分成了 3 份(12/4 = 3)。栅格系统自动帮我们计算了这 3 份的宽度。

    举一反三,如果要把页面平均分为 6 份,那每一份的 class 就应该指定 col-md-2 (12/6 = 2);如果是 4 份, class 就是 col-md-3(12/4 = 3)

    完整的栅格布局的说明在这里,一开始看不懂没有关系,自己多动手试试就明白了。一定要动手实践

    Bootstrap 文档——栅格系统

    圆形图片样式

    虽然自己写一个 CSS 规则 border-radius: 50% 也可以实现圆形图片,但是如果能够少写一行代码,为什么不偷个懒呢(不要重复造轮子), Bootstrap 提供了一个圆形图片的 CSS 类 – img-circle(从名称就能看出来它的作用是什么)。

    好了,知道栅格布局方式,和圆形图片样式,可以把“案例列表”的 HTML 代码改造一下了。

    <!--案例-->
    <div class="case container">
       <div class="row">
           <div class="col-md-4">
               ![](../assets/case_1.jpg)
               <h2>案例1</h2>
               <p>非常不错的产品,我很喜欢</p>
           </div>
           <div class="col-md-4">
               ![](../assets/case_2.jpg)
               <h2>案例2</h2>
               <p>非常不错的产品,我很喜欢</p>
           </div>
           <div class="col-md-4">
               ![](../assets/case_3.jpg)
               <h2>案例3</h2>
               <p>非常不错的产品,我很喜欢</p>
           </div>
       </div>
    </div>

    另外,和轮播图一样,为了防止图片大小不一致导致的页面错乱,还要在 style.css 里添加一些自定义的样式,固定图片大小,然后把每个元素的内部设置为居中对齐。

    .case {
      text-align: center;
      margin-top: 20px;
    }
    .case img {
      height: 200px;
    }

    Bootstrap 还提供了“圆角图片”、带边框线的“缩略图样式”等图片样式,也可以直接使用,在这里查看文档

    Bootstrap文档-图片

    产品截图列表——用栅格布局将页面拆分成左右宽度不一样的两栏

    先回顾一下前面的知识:怎样用栅格布局把页面切割成若干等份?

    思考一下:如果我们要把页面分成左右两栏,但是两栏宽度不一样,应该怎么做呢?

    其实 Bootstrap 的栅格布局同样可以实现这种“宽度不一致的分割”。最终效果:

    <div class="container">
       <div class="row">
           <div class="col-md-4">bb</div>
           <div class="col-md-8">cc</div>
       </div>
    </div>

    左边的 <div> 占有 4 份(col-md-4),右边的

    占有 8 份(col-md-8),但是加起来总数还是 12 份

    在 Chrome 里看到效果如下,确实是左边的一栏相对较窄,右边的一栏较宽一些。

    开始修改“产品截图”区域的代码,从上到下共有三行,每行的一栏是图片,占有 5 份宽度(col-md-5);另一栏是说明文字,占据剩下的 7 份宽度(col-md-7)。

    <!--产品功能截图-->
        <div class="container screenshot">
            <div class="row item">
                <div class="col-md-5">![](../assets/screenshot_1.jpg)</div>
                <div class="col-md-7">
                    <h2>截图1</h2>
                    <p>截图说明1,截图说明1,截图说明1,截图说明1,截图说明1,</p>
                </div>
            </div>
            <div class="row item">
                <div class="col-md-7">
                    <h2>截图2</h2>
                    <p>截图说明2,截图说明2,截图说明2,截图说明2,截图说明2,</p>
                </div>
                <div class="col-md-5">![](../assets/screenshot_2.jpg)</div>
            </div>
            <div class="row item">
                <div class="col-md-5">![](../assets/screenshot_3.jpg)</div>
                <div class="col-md-7">
                    <h2>截图3</h2>
                    <p>截图说明3,截图说明3,截图说明3,截图说明3,截图说明3,</p>
                </div>
            </div>
        </div>

    注意,我们在第二行把图片和文字的左右顺序交换了一下,这样看起来错落有致、更美观一些。

    同样,再添加一点自定义的 CSS 代码,在每一行之间显示一条分割线,并且预留一些空白。

    .screenshot .item {
      border-top: 1px solid #CCC;
      padding-bottom: 30px;
      padding-top: 20px;
    }

    页面底部

    这部分没什么特别的内容,使用 HTML5 的新增标签 <footer></footer> ,使之更“语义化”(代码也少了几个字母……)。

    <!--底部-->
    <div class="container">
      <footer>
          微信公众号管家版权所有 2016
          <a href="">四光年科技</a>
      </footer>
    </div>

    覆盖 Bootstrap 的默认样式

    其实除了可以添加自定义样式外,还可以覆盖Bootstrap 的默认样式,让它更符合我们的要求。

    比如,把顶部的导航条改成黑色底,白色文字。

    .navbar {
      background-color: #000;
    }
    .navbar-nav li a, .navbar-nav li a:focus, .navbar-nav li a:visited {
      color: #FFF;
    }

    其实这个效果完全不用这么麻烦,直接用一个 Bootstrap 自带的 class 就可以实现。我们在做页面的时候,尽可能优先使用已有的组件、样式,不要自己去写,一来节省时间,二来可以避免很多不可预料的问题。

    Bootstrap 反色导航条

    客户案例详情页

    新建一个文件 Home_case.html ,客户案例详情页实际上和平时常见的 “新闻内容页”、“产品介绍页”非常类似,我们这里先做个简化版。最终效果如下:

    布局

    把页面分成左右两栏,左边是正文区域,右边是相关信息,通过栅格系统来布局可以很容易实现。

    <div class="container">
        <div class="row">
         <div class="col-md-9">
           <!--正文-->
         </div>
         <div class="col-md-3">
            <!--相关信息-->
         </div>
        </div>
    </div>

    大标题与小标题

    进入正文区域(在 <div class="col-md-9"> 内部),首先添加大标题与小标题,在 Bootstrap 里有专门的类 <div class="page-header">
    <small> 标签可以让里面的文本大小为父元素的 85%,比如下面的代码中, <small> 里面的文本大小,是 <h1> 里面其他文本大小的 85%。

    <div class="page-header">
          <h1>四光年科技<small>有价值的、有趣的信息服务</small></h1>
        </div>

    内容摘要——使用“引用”

    <blockquote>
      <p>交给你全栈开发的一招一式,我们不会装作什么都懂,也不会教你花架子,只是能保证你学完后,拥有自己的一套内功心法,能举一反三,轻松写代码</p>
    </blockquote>

    在正文内容区域使用各种文本效果

    除了平时常用的 <b>(加粗)、<i>(斜体)、<u>(删除)等,还可以使用这几个更“语义化”的 HTML5 标签。

    • 高亮 <mark></mark>
    • 删除 <del></del>
    • 着重 <strong></strong>
    • 插入的文本 <ins></ins>

    <p>
         <strong>程序员修炼之道</strong>
     </p>
     <p>
    <mark>“衣带渐宽终不悔,为伊消得人憔悴”</mark>,编程大约有三个境界,新手、高手和<del>高不成低不就的中手</del>,适合新手的教程很多,指导中手的教程却很少;没有几十万行代码的锤炼或者长期在一个高手团队里打磨切磋,中手需要在这个层次“众里寻他千百度”,才能“蓦然回首”。 <ins>我们偏好实践,以正确的原则指导正确的行动</ins>
     </p>

    另有几种文本样式不太常见,请自行阅读文档

    Bootstrap文档-内联文本元素

    居中对齐

    在正文中插入一张图片,默认是左对齐的。我们将它用一个 <div class="text-center"> 包裹起来,这样它内部的所有元素都居中对齐了。

    <p class="text-center">
         ![](../assets/screenshot_1.jpg)
     </p>

    实际上这个类的作用和下面的 CSS 规则产生的效果是一样的

    .text-center {
        text-align: center;
    }

    显示“代码”

    如果这篇文章是和程序开发有关的,很有可能需要显示一段代码,为了和其他普通文本区分开来,我们要把代码用 <code> 或者 <pre> 包裹起来,前者是行内代码,后者是块代码

    代码.png

    <p>听说 PHP 很简单,常用的函数有<code>echo</code><code>is_array</code><code>mysql_connect</code>等等</p>
    <p>
        例如
         <pre>
         // example
         if($a == 1){
             echo 'variable a = 1';
         }else{
             echo 'variable a = 2';
         }
         </pre>
     </p>

    更多可以使用的代码样式,请参看文档

    Bootstrap文档-代码

    顶和踩——按钮的使用与外观

    在文章的最后,我们可以让用户表达下自己的看法,是喜欢还是讨厌。这里添加两个按钮,一个是“顶”,一个是“踩”,并且用不同的颜色来区分。效果如下:


    Bootstrap 框架里,“按钮”这个组件十分常见,属性也比较复杂。我们先从最简单的“默认按钮”开始吧。

    <button class="btn">基本按钮</button>
    <button class="btn btn-default">默认按钮</button>

    给一个元素(通常是<button><a>)添加 class btn btn-default,就形成了一个默认按钮。btn-default的样式是一个灰色的按钮外观。

    为了让按钮显示不同的颜色来代表不同的含义,我们把btn-default修改成其他的类名。比如 btn-danger 表示“危险”,在外观上看来就是红色按钮;btn-info表示“信息”,是一个浅蓝色的按钮。

    <button class="btn btn-primary">按钮</button>
    <button class="btn btn-success">按钮</button>
    <button class="btn btn-info">按钮</button>
    <button class="btn btn-danger">按钮</button>
    <button class="btn btn-warning">按钮</button>
    <button class="btn btn-link">按钮</button>

    通过添加btn-lgbtn-xs等 class,还可以调整按钮的大小

    <button class="btn btn-primary btn-xs">最小的按钮</button>
    <button class="btn btn-primary btn-sm">小按钮</button>
    <button class="btn btn-primary">普通大小按钮</button>
    <button class="btn btn-primary btn-lg">加大按钮</button>

    更多按钮的用法,可以在这里查看

    Bootstrap文档-按钮

    知道如何灵活使用按钮组件后,回到我们的案例,添加两个在页面中居中的按钮,一个红色、一个蓝色。

    <p class="text-center">
         <button class="btn btn-primary"></button>
         <button class="btn btn-danger"></button>
     </p>

    右侧——列表组件

    我们最后来处理右侧的区域,这里有一张图片,下方是一个“相关内容”的列表,直接用<ul><li>列表元素会在每个列表项前面显示一个圆点,Bootstrap里有个作用于<ul>list-unstyled类,可以隐藏这个圆点。

    <div class="col-md-3">
     <p>
         ![](../assets/case_1.jpg)
     </p>
     <h3>相关内容</h3>
     <ul class="list-unstyled">
         <li><a href="">深圳市四光年信息技术有限公司</a></li>
         <li><a href="">深圳市腾讯计算机系统</a></li>
         <li><a href="">北京市百度互联网计算有限公司</a></li>
         <li><a href="">杭州市阿里巴巴集团</a></li>
     </ul>
    </div>

    联系方式及意见反馈——使用表单

    新建一个文件Home_about.html。关于”页面能够让潜在的客户联系自己,包括两块内容:公司信息(地址、联系方式),以及一个提交建议的表单

    联系方式

    我们可以直接使用“地址”标签(<address>),这也是一个 HTML5 规范里的语义化标签。

    这里还有个很有意思的<abbr>标签,给它添加一个title属性后,鼠标放在文本上面,会浮动显示一个小提示。

    <div class="container">
       <h2>联系方式</h2>
       <address>
           <strong>深圳市四光年信息技术有限公司.</strong><br> 深圳市南山区深南大道100号<br>
           <abbr title="Phone">联系电话:</abbr> 400-123-123
       </address>
    </div>

    表单的骨架

    普通的表单组件如果不添加任何样式,看起来是很粗糙的,通过给这些控件添加Bootstrap框架预设的class,可以马上让表单看起来更加专业、更美观。

    先把这个表单的 HTML 代码写好(默认样式比较丑陋)。

    <h2>建议</h2>
    <form action="">
      <div>
          <label for="">姓名</label>
          <input id="truename" type="text" />
      </div>
      <div>
          <label>称呼</label>
          <input type="radio" checked />先生
          <input type="radio" />女士
      </div>
      <div>
          <label for="job">你的职位</label>
          <select name="" id="job">
              <option value="">开发者</option>
              <option value="">运营</option>
              <option value="">管理人员</option>
          </select>
      </div>
      <div>
          <label for="">你最喜欢”公众号管家“的哪个功能</label>
          <input type="checkbox" checked>文章高级排版
          <input type="checkbox">多公众号切换
          <input type="checkbox">素材集中管理
          <input type="checkbox">其他
      </div>
      <div>
          <label for="">更多建议</label>
          <textarea rows="3" cols=""></textarea>
      </div>
      <p>请不要超过500个字</p>
      <div>
          <button class="btn btn-primary">提交</button>
      </div>
    </form>

    绑定 Bootstrap 样式

    <form>增加一个role属性,值为form,表示它是一个“表单”。

    <form action="" role="form">

    修改第一个<input type="text">输入框控件,先把包裹它的<div>添加一个类名form-group,然后给它自己添加一个类名form-control

    <div class="form-group">
          <label for="">姓名</label>
          <input class="form-control" id="truename" type="text" />
      </div>

    记住这两个 class

    form-group表示它内部的两个控件(<label><input>在功能上是一个整体,“group”字面上就是组的意思。

    再看form-control,表示让表单组件显示Bootstrap规定的样式。(不仅仅用于<input>,还包括<textarea>等)

    我们把代码里所有的表单组件全部加上class="form-control"

    刷新下页面,比之前顺眼多了!已经显示了Bootstrap的样式。

    特殊的 checkbox 多选框和 radio 单选框组件

    但是checkboxradio好像有点奇怪——换行有错误。那是因为checkbox多选框、radio单选框和<label>一起用的时候,是不能直接添加一个class="form-control"类名的。

    请仔细观察修改后的代码(看起来啰嗦了不少)。

    <div class="form-group">
     <label for="">称呼</label>
     <div class="radio">
         <label>
             <input type="radio" checked />先生
         </label>
     </div>
     <div class="radio">
         <label>
             <input type="radio" />女士
         </label>
     </div>
    </div>
    <div class="form-group">
         <label for="">你最喜欢”公众号管家“的哪个功能</label>
         <div class="checkbox">
             <label>
                 <input type="checkbox" checked>文章高级排版
             </label>
         </div>
         <div class="checkbox">
             <label>
                 <input type="checkbox">多公众号切换
             </label>
         </div>
         <div class="checkbox">
             <label>
                 <input type="checkbox">素材集中管理
             </label>
         </div>
         <div class="checkbox">
             <label>
                 <input type="checkbox">其他
             </label>
         </div>
        </div>
    1. 首先要用一个 <div class="checkbox><div class="radio>把整个组件包裹起来
    2. 然后用<label>把多选框/单选框(<input type="checkbox><input type="radio">)包裹起来(而普通的文本输入框中,<label><input>是并列的)
    3. 最后一定要删掉<input type="radio"><input type="checkbox">上面的form-control类名。

    让 label 和 input 水平布局,节省页面空间

    “姓名”输入框看起来太长了,把整个页面宽度都占满了,有没有办法控制输入框的宽度呢?
    还有<label><input>组件默认是从上到下垂直排列,每一项都占据了一整行,也挺浪费空间的。能不能让它们在同一行左右水平排列?

    首先在<form>上添加一个类名form-horizontal,这一步很关键。

    <form action="" class="form-horizontal" role="form">

    刷新,咦,没变化?

    那是因为虽然<form>通知了它里面的组件进行水平分布,但是这些组件还没有设置“宽度”。我们给<label>添加 class control-labelcol-md-宽度,然后将<input>用一个<div>包裹起来,并给这个<div>设置一个固定的较小宽度,让它不再占满一整行的空间(例如col-md-4)。

    <div class="form-group">
         <label for="" class="col-md-2 control-label">姓名</label>
         <div class="col-md-4">
             <input class="form-control" id="truename" type="text" />
         </div>
        </div>
    
        <div class="form-group">
         <label for="" class="col-md-2 control-label">称呼</label>
         <div class="col-md-4">
             <div class="radio">
                 <label>
                 <input type="radio" checked />先生
             </label>
             </div>
             <div class="radio">
                 <label>
                 <input type="radio" />女士
             </label>
             </div>
         </div>
        </div>
    
        <!--略,将所有组件都修改成合适的宽度-->

    好了,现在看起很紧凑了。

    有关表单组件的更多资料,请阅读

    Bootstrap-支持的控件

    拒绝千篇一律——使用第三方主题

    正因为Bootstrap框架如此流行,所以你在上网的时候会经常看到它(尤其是那个灰头土脸的默认风格出现次数特别多)。看多了就容易审美疲劳了。

    我们可以使用一些第三方的Bootstrap主题,给我们的页面换个漂亮的皮肤

    打开 https://bootswatch.com这个网站,里面有很多免费的Bootstrap主题可以下载。

    Bootstrap主题

    找一个你最喜欢的,点击“Download”按钮,会下载一个 bootstrap.min.css到本地。我们把 assets目录里旧的那个同名文件改成bootstrap_default.min.css(不要删除,以备以后可以恢复),然后把这个新的文件复制进去。

    刷新页面,瞬间耳目一新!


    我们每期会根据不用的项目案例安排不同的技术栈免费课程!免费免费免费!来帮助大家提高,有兴趣的同学可以私信我哦~
    所有项目都是以真实项目为实战例。

    最好懂的 Bootstrap 实战案例教程





    展开全文
  • Bootstrap是什么

    2019-01-13 23:06:51
    Bootstrap是由Mark Otto和Jacob Thornton...同时,Bootstrap还提供了一套编码规范,使团队编写的CSS和JavaScript代码更加规范,进而使团队的开发效率得到极大地提升。 最初发布 Bootstrap 的时候,他们两位都在 ...

     

    Bootstrap是由Mark Otto和Jacob Thornton两位设计师合作开发的一款基于 HTML、CSS、JavaScript 的前端开源框架,它简洁灵活,使得 Web 开发更加快速、简单。同时,Bootstrap还提供了一套编码规范,使团队编写的CSS和JavaScript代码更加规范,进而使团队的开发效率得到极大地提升。

    最初发布 Bootstrap 的时候,他们两位都在 Twitter 工作。当时,他们面临着为公司内部提供一套标准化的前端开发工具的需求。在发布Bootstrap 的那篇博客中,Mark Otto 这样介绍他们的新项目:

    Twitter诞生初期,为了完成前端开发任务,工程师们几乎尝试了自己熟悉的所有库。应用之间的不一致性导致它们难以扩展和维护。Bootstrap最初就是这个问题的一个解决方案,而且在Twitter内部第一次Hackweek上得到了认可。Hackweek结束后,我们手头上的项目已经相当稳定,可以在公司内部部署使用了。

    ——Mark Otto

    https://dev.twitter.com

    2011 年 8 月,Bootstrap在 GitHub 上以开源项目正式发布,一经推出就颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。

    Bootstrap是一个易用、优雅、灵活、可扩展的前端工具包,里面包含了丰富的Web组件,包括布局、栅格、表格、表单、导航、按钮、进度条、媒体对象等,基于这些组件,可以快速搭建一个漂亮、功能完备的网站。由于Firefox、Chrome、Safari等主流浏览器对W3C标准有着较好的支持,因此,Bootstrap在网页夸浏览器兼容方面也有相当不错的表现。

    关于作者

    歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

    展开全文
  • Stata:Bootstrap 简介

    2020-02-27 11:08:38
      作者: 吴雄(湘潭大学),童天天(中南财经政法大学) Stata 连享会: 知乎 | 简书 | 码云   Source: The Bootstrap in Stata ...1. bootstrap 简介 ...bootstrap 是一种崭新的增广样本统计方法,为...
  • bootstrap3

    2020-07-23 23:32:33
    基本结构Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。 CSSBootstrap 自带以下特性:全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及...
  • 原文地址:https://www.cnblogs.com/haogj/p/4980353.html 最终结果: 创建基本的页面 &amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;html lang=&...amp
  • 基于Bootstrap 开发响应式界面,固定表头,完全可配置,支持data属性,显示/隐藏列,显示/隐藏表头,使用AJAX获取JSON数据,点击表头可简单的进行排序,支持自定义列显示,支持单/复选,强大的分页功能,支持名片...
  • Bootstrap的安装和使用

    2018-08-23 14:54:37
    Bootstrap的安装和使用一. Bootstrap简介Bootstrap是前端开发中比较受欢迎的框架,简洁且灵活。它基于HTML、CSS和JavaScript,HTML定义页面元素,CSS定义页面布局,而JavaScript负责页面元素的响应。Bootstrap将HTML...
  • 一个简单的使用 Bootstrap 布局的登录表单就完成了。我们回顾一下,实现这个布局时,完全不用自己书写 CSS 样式代码,直接使用 Bootstrap 预定义好的类来完成即可。如果自己定义各样式内容,要达到上述响应式布局...
  • bootstrap相配合使用的插件 一:bootbox bootbox是一个小型JavaScript数据库,基于bootstrap模态框开发,能够简单的制作一个bootstrap弹出效果,是非阻塞事件。 ps:阻塞事件:单线程,当上一段代码(方法)执行...
  • 最近的论文写作中,需要用到Bootstrap方法,即所谓的“自举法”、“靴带法”。Bootstrap在英语中作为一个名词的话,其的意思是“拔靴带”,也就是通过自身的 力量,自己把自己抬起来。注意这个限定——“通过自身的...
  • 有人说前端发展太快,框架太多,各有所需,各有所长。看看这幅图,估计都知道这些框架,...bootstrap上大一的时候学html的时候就听老师说过,接触也快一年多了,所以这里准备写一篇关于bootstrap如何自定义导航栏的...
  • 技术:bootstrap,font-awesome,jquery-validate; 特点:响应式布局,表单验证(用户两次密码是否相同,必填信息是否填写)背景图片自适应屏幕大小; 宗旨:从实战中学知识。 个人主页:http://www.itit123.cn/ ...
  • 使用bootstrap响应式使用工具类 visible-sm visible-xs hidden-xs hidden-sm等对不同屏幕适配 3. 侧滑栏的侧滑效果不使用jquery方法来实现,使用的是css3 transforms属性进行div的移动,侧滑的动画效果使用的是...
  • BootStrap table 是一个轻量级的table插件,使用AJAX获取JSON格式的数据,其分页和数据填充很方便,支持国际化。最近后台使用此插件做了一个表格应用,做个总结。 1.使用方法 可以通过又拍云提供的CDN获取js插件...
  • Bootstrap&amp;amp;amp;amp;amp;lt;select&amp;amp;amp;amp;amp;gt;下拉菜单实现 初级者使用bootstrap框架时,大部分对官方提供的下拉菜单dropdown组件不是很感冒! 所以,这里就提供简单原生下拉标签&...
  • Bootstrap水平居中 // 文本: class ="text-center" // 图片居中: class = "center-block" //其他元素: //bootstrap3水平居中:利用bootstrap列偏移 class = "col-md-offset-4 col-lg-offset-4col-xl-...
1 2 3 4 5 ... 20
收藏数 317,797
精华内容 127,118
关键字:

bootstrap