day06 jQuery的UI库:jQuery插件库 npm的使用 Bootstrap的全局CSS样式

day06 jQuery的UI库:jQuery插件库 npm的使用 Bootstrap的全局CSS样式

 

一.jQuery的UI库: jQuery插件库

    登录注册框演示: 以这个为例: http://www.jq22.com/jquery-info15518

    1.下载你喜欢的插件库

        能直接下载的就直接下载

        不能直接下载的,就复制粘贴

    2.最重要的一步: 根据你的需要改代码

        增: 可以增加

        删: 最好不要删,有些东西可能就用不了了

        改: 先改一遍,看看哪个东西是什么功能

        

二.npm 包管理器的使用 (node package manager)

    这个工具在哪: 前端的后台语言nodesjs会带来npm

    1.装包: node.js

        前端的后端语言, 是依据JavaScript演变来的

        注意添加node.js的安装目录path到环境变量中

        >node

        Welcome to Node.js v12.13.1.

    2.带来的工具: npm

        >npm -v

        6.12.1

    3.npm的使用

        3.1.初始化当前工作目录

            C:\Users\THINKPAD>cd C:\Users\THINKPAD\PycharmProjects\s15\day51                //切换至工作目录

            npm init                                                                        //交互: 初始化时生成package.json文件, 它来管理所有包的历史版本

            npm init --yes                                                                  //免交互: 直接生成package.json文件

        3.2.安装项目包

            npm install jquery --save                                                      //不带版本号: 默认最新版, 自动生成node_modules文件夹, 同时更新package.json文件

            npm install jquery@3.4.1 --save                                                 //带版本号: 下载指定版本 

            npm install jquery@3.4.1 -S                                                     // --save 简写 -S

        3.3.引入安装过的项目

            <script src="./node_modules/jquery/dist/jquery.js"></script>

        3.4.卸载项目

            npm uninstall jquery --save  

        3.5.继续安装其他项目包

            npm install bootstrap@3 -S                                                      //@3会找3版本里的最新的版本

        3.6.package.json文件解析

            github不允许上传100M以上的项目, 那么超过这个大小的依赖包, 就要从package.json这个文件中获取并下载

            上传项目到github时,node_modules文件夹不用上传

            npm install                                                                     //全部安装: 当你到package.json所在的目录,执行这个命令时, dependencies的包会安装

                                                                                            //"dependencies":{"vue":"^2.1.1","vuex":"^2.2.2","vue-router":"^2.1.1"}

        3.7.开启本地服务器(Listening at http://localhost:8088)

            npm run dev                                                                     //dev 开发 development: 是package.json里面的脚本, 是启动后端服务器的命令

                                                                                            //"scripts":{"dev":"node build/dev-server.js"}        

        3.8.发布环境,压缩文件

            npm run build                                                                   //压缩项目文件: 60M的项目可以压缩到 600多kb, 使用的是webpack工具

                                                                                            //"scripts":{"build":"node build/build.js"}

三.jQuery的UI库: Bootstrap框架 

1.Bootstrap介绍

2.起步

3.全局css样式

    3.1.概览

    3.2.栅格系统

    3.3.排版

        3.3.1.标题

            class = "h1"                                                                    //标题类名: .h1~.h6,为的是给内联inline属性的文本赋予标题的样式

            class = "small"                                                                 //副标题类名:也可以是标签<small> </small> 

        3.3.2.页面主体

            Bootstrap将全局font-size: 14px; line-height: 1.428                              //使用variables.less文件中: @font-size-base,@line-height-base

            Bootstrap将p标签: 设置了1/2行高的底部外边距

        3.3.3.中心内容

            class = "lead"                                                                  //突出显示: 让段落内容突出显示          

        3.3.3.内联文本元素

            <mark>highlight</mark>                                                           //高亮

            <del>as deletetd text</del>                                                      //删除线

            <s>as deleted text</s>                                                           //删除线

            <ins>as underlined</ins>                                                         //下划线

            <u>as underlined</u>                                                             //下划线

            <small>as fine rint</small>                                                      //小号文本: 是父容器的字体大小的85%,还可以使用class="small"  

            <strong>as bold text</strong>                                                    //加粗

            <em>as italicized text</em>                                                      //斜体

            <b></b>                                                                          //高亮  

            <i></i>                                                                          //加粗  

        3.3.4.对齐

            class = "text-left"

            class = "text-center"

            class = "text-right"

            class = "text-justify"                                                                

            class = "text-nowrap"

        3.3.5.改变大小写

            class = "text-lowercase"

            class = "text-uppercase"

            class = "text-capitalize"

        3.3.6.缩略语

            <abbr title="attribute">attr</abbr>       //缩略语: 当鼠标悬停在缩写上时,会 显示完整的内容,Bootstrap实现了对<abbr>的增强样式: 悬停时指针会变成带有"问号"样式

            <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>           //class="initialism", 为缩略语增加这个类,可以让font-size变的稍微小些

        3.3.7.地址

            <address>

            ...<br>                                                                          //回车换行

            </address>    

        3.3.8.引用

            <blockquote>                                                                     //引用样式: 将任何元素包裹在<blockquote>中

                <p>Lorem ipsum dolor sit amet</p>                                            //直接引用,建议用p标签

                <footer>famous in<cite title="Source Title">Source Title</cite></footer>     //引用来源: <footer>,来源名称<cite>

            </blockquote>

            class = "blockquote-reverse"                                                     //右对齐   

        3.3.9.列表

            <ul><li>...</li></ul>

            <ol><li>...</li></ol>

            class = "list-unstyled"                                                          //list-style: none; 只针对直接子元素, 

            class = "list-inline"                                                            //display: inline-block; 少量的内补padding,并排显示

            <dl class = "dl-horizontal">                                                     //标题和标语并排显示;    

                <dt>...</dt>

                <dd>...</dd>

            </dl> 

    3.4.代码

        3.4.1.内联代码

            <code>&lt;section&gt;</code>                                                     //<session>并高亮

        3.4.2.用户输入

            <kbd>cd</kbd>                                                                    //键盘按键的样式

            <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>                                        //ctrl + , :整体样式

        3.4.3.基本代码块

            <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>                                //正确展示代码: <p>Sample text here...</p>

            class = "pre-scrollable"                                                         //设置: max-height: 350px; 并在垂直方向展示滚动条

        3.4.4.变量

            <var>y</var> = <var>m</var><var>x</var> + <var>b</var>                          //y = mx + b

        3.4.5.程序输出

            <samp>This text is meant</samp>                                                 //This text is meant       

    3.5.表格

        3.5.1.基本实例

            class = "table"                                                                //基本样式: 少量内补padding,水平方向的分割线

            <table class="table">

                <tr>

                    <td>...</td>

                    <td>...</td>

                    <td>...</td>

                </tr>

            </table>

        3.5.2.条纹状表格

            class = "table-striped"                                                        //浏览器兼容: 依赖:nth-child,ie8不支持

        3.5.3.带边框的表格

            class = "table-bordered"                                                        

        3.5.4.鼠标悬停

            class = "table-hover"                                    

        3.5.5.紧缩表格

            class = "table-condensed"                                                       //让胖表格变瘦,padding减半 

        3.5.6.状态类

            让行和列对应不同的颜色

            class = "active"                                                                //灰色    

            class = "sucess"                                                                //绿色

            class = "info"                                                                  //蓝色  

            class = "warning"                                                               //黄色

            class = "danger"                                                                //红色

        3.5.7.响应式表格

            class = "table-responsive"                                                      //table表格,需要被这个包裹住  

    3.6.表单

        3.6.1.基本实例

            class = "form-group"                                                            //form里的每个控件包裹在.form-group里可以获得最好的排列

            class = "form-control"                                                          //width:100%

<form>

  <div class="form-group">

    <label for="user">用户名</label>

    <input type="email" class="form-control" id="user" placeholder="请输入用户名">

  </div>

  <div class="form-group">

    <label for="pwd">密码</label>

    <input type="password" class="form-control" id="pwd" placeholder="请输入密码">

  </div>

</form>

        3.6.2.内联表单

            class = "form-inline"                                                           //display:inline-block, viewport>768px时,有效果; 另外一定要添加label标签          

            <form class="form-inline">

        3.6.3.水平排列的表单

            class = "form-horizontal"                                                       //结合Bootstrap的栅格类,可以将label标签和控件放在一行并排布局

            <form class="form-horizontal">                                                 

            <div class="form-group">                                                        //将改变.form-group的行为,使其表现为栅格中的行row,所以无需额外添加行row

<form class="form-horizontal">

  <div class="form-group">

    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>

    <div class="col-sm-10">

      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">

    </div>

  </div>

  <div class="form-group">

    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>

    <div class="col-sm-10">

      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">

    </div>

  </div>

  <div class="form-group">

    <div class="col-sm-offset-2 col-sm-10">

      <div class="checkbox">

        <label>

          <input type="checkbox"> Remember me

        </label>

      </div>

    </div>

  </div>

  <div class="form-group">

    <div class="col-sm-offset-2 col-sm-10">

      <button type="submit" class="btn btn-default">Sign in</button>

    </div>

  </div>

</form>       

        3.6.4.被支持的控件

            输入框: type="text"   <input type="text" class="form-control" placeholder="Text input">

            文本域: <textarea class="form-control" rows="3"></textarea>

            多选框: disabled: 禁用; 默认堆叠

<div class="checkbox">

  <label>

    <input type="checkbox" value="">

    Option one is this and that&mdash;be sure to include why it's great

  </label>

</div>

<div class="checkbox disabled">

  <label>

    <input type="checkbox" value="" disabled>

    Option two is disabled

  </label>

</div>

            单选框: disabled: 禁用; 默认堆叠

<div class="radio">

  <label>

    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>

    Option one is this and that&mdash;be sure to include why it's great

  </label>

</div>

<div class="radio">

  <label>

    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">

    Option two can be something else and selecting it will deselect option one

  </label>

</div>

<div class="radio disabled">

  <label>

    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>

    Option three is disabled

  </label>

</div>

            多选框: 并排显示

                class = "checkbox-inline"

<label class="checkbox-inline">

  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1

</label>

<label class="checkbox-inline">

  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2

</label>

<label class="checkbox-inline">

  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3

</label>

            单选框: 并排显示

                class = "radio-inline"

<label class="radio-inline">

  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1

</label>

<label class="radio-inline">

  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2

</label>

<label class="radio-inline">

  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3

</label>

            下拉列表:

<select class="form-control">

  <option>1</option>

  <option>2</option>

  <option>3</option>

  <option>4</option>

  <option>5</option>

</select>

            默认显示多项的下拉列表:加属性 multiple

<select multiple class="form-control">

  <option>1</option>

  <option>2</option>

  <option>3</option>

  <option>4</option>

  <option>5</option>

</select>

        3.6.5.静态控件

            class = "form-control-static"                                                   //label后面放"纯文本"

<form class="form-horizontal">

  <div class="form-group">

    <label class="col-sm-2 control-label">Email</label>

    <div class="col-sm-10">

      <p class="form-control-static">email@example.com</p>

    </div>

  </div>

</form>

        3.6.6.焦点状态

            我们将某些表单控件的默认 outline 样式移除，然后对 :focus 状态赋予 box-shadow 属性。

        3.6.7.禁用状态

            disabled属性,为输入框设置这个属性,可以禁止与用户有任何交互,焦点,输入等,还添加了not-allowed鼠标状态

        3.6.8.只读状态

            readonly属性,可以禁止用户修改输入框中的内容,看起来就像被禁用了一样,但是仍然保留标准的鼠标状态

        3.6.9.Help text

        3.6.10.校验状态

            class = "has-warning"                                                //黄色

            class = "has-error"                                                  //红色

            class = "has-success"                                                //绿色

        3.6.11.控件尺寸

            class = "input-lg"                                                   //通过这种类似的类可为控件设置高度

            class = "col-lg-*"                                                   //通过这种类似的类可为控件设置宽度   

    3.7.按钮

        3.7.1.可作为按钮使用的标签或元素

            class = "btn"                                                        //只要有这个类名: a标签,button标签,input标签都可以作为按钮使用

                                                                                 //导航只支持button元素,如果是a标签: 必须加role = "button"

<a class="btn btn-default" href="#" role="button">Link</a>

<button class="btn btn-default" type="submit">Button</button>

<input class="btn btn-default" type="button" value="Input">

<input class="btn btn-default" type="submit" value="Submit">

        3.7.2.预定义样式

            class = "btn btn-default"                                            //白色

            class = "btn btn-primary"                                            //蓝色    

            class = "btn btn-success"                                            //绿色

            class = "btn btn-info"                                               //浅蓝色

            class = "btn btn-warning"                                            //黄色

            class = "btn btn-danger"                                             //红色   

            class = "btn btn-link"                                               //白色,没有外边框

        3.7.3.尺寸

            class = "btn btn-lg"

            class = "btn btn-sm"

            class = "btn btn-xs"

            class = "btn btn-block"                                              //设置宽度: 为父元素的100%,而且 display: block  

        3.7.4.激活状态

            class = "active"                                                     //默认按压时的样式: 当按钮处于激活状态时，其表现为被按压下去的样式

        3.7.5.禁用状态

            disabled = "disabled"                                                

    3.8.图片

        3.8.1.响应式图片

            class = "img-responsive"                                             //让图片支持响应式布局: max-width:100%; height:auto; display:block

                                                                                 //如果让图片水平居中,请使用class = "center-block", 而不要class="text-center"

        3.8.2.图片形状

            class = "img-rounded"                                                //圆角图片形状

            class = "img-circle"                                                 //原形图片形状

            class = "img-thumbnail"                                              //缩略图形状  

    3.9.辅助类

        3.9.1.情景文本颜色

            class = "text-muted"                                                 //哑光色

            class = "text-primary"                                               //蓝色 

            class = "text-success"                                               //绿色

            class = "text-info"                                                  //浅蓝色

            class = "text-warning"                                               //黄色

            class = "text-danger"                                                //红色

        3.9.2.情景背景色

            class = "bg-primary"                                                 //蓝色 

            class = "bg-success"                                                 //绿色

            class = "bg-info"                                                    //浅蓝色

            class = "bg-warning"                                                 //黄色

            class = "bg-danger"                                                  //红色    

        3.9.3.关闭按钮

            class = "close"                                                      //一个x的按钮  

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

        3.9.4.三角符号

            class = "caret"                                                      //下拉的那个按钮   

        3.9.5.快速浮动

            class = "pull-left"

            class = "pull-right"

        3.9.6.让内容块居中

            class = "center-block"                                               //为任意元素设置: display: block; 并通过margin属性让其中的内容居中

        3.9.7.清除浮动

            class = "clearfix"

        3.9.8.显示或隐藏内容

            class = "show"

            class = "hidden"

        3.9.9.屏幕阅读器和键盘导航

        3.9.10.图片替换

    3.10.响应式工具

    3.11.使用less

    3.12.使用sass

4.组件

    4.1.Glyphicons 字体图标

    4.2.下拉菜单

    4.3.按钮组

    4.4.按钮式下拉菜单

    4.5.输入框组

    4.6.导航

    4.7.导航条

    4.8.路径导航

    4.9.分页

    4.10.标签

    4.11.徽章

    4.12.巨幕

    4.13.页头

    4.14.缩略图 thumbnail

        4.14.1.默认样式的实例

            缩略图样式: 需要写到列column里面,实现的是:增加栅格的左右padding

            内容: 需要写到缩略图thumbnail里面

            class = "thumbnail"        

        4.14.2.自定义内容

            添加额外的标签"标题"caption,就可以把任何类型的html内容,加入到缩略图组件内

            标题标签:需要写到缩略图thumbnail里面

            class = "caption"

    4.15.警告框

    4.16.进度条

    4.17.媒体对象

    4.18.列表组

    4.19.面板

    4.20.面板

    4.21.具有响应式特性的嵌入内容

    4.22.Well

5.JavaScript插件

6.定制

7.网站实例

8.css的介绍

 

 

    

 

 

 

来源：https://www.cnblogs.com/aiaii/p/12266690.html