bootstrap使用入门
2018-03-31 23:16:13 qq_37521566 阅读数 102

转自点击打开链接

入门自问:

1Bootstrap是什么?疑问

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap是基于HTML5CSS3开发的。

2、有什么用?疑问

HTML标签调用它的类就可以很快速的做一个高大上的网页,不用担心兼容问题,提供了很多样式供选择!使用bootstrap框架来写的话,只需要写好HTML标签然后调用类名就可以了!

3、如何去用?疑问

如何用当然是去官网下载并安装 Bootstrap啦!所以第一步是下载Bootstrap,然后在导入引用它。

(1)下载

我不知道用那个版本比较方便,现在 http://getbootstrap.com/ 下载了,不过我看书里的比较低版本一点就去Bootstrap中文网下载如下图:

                                                   

     

 

Bootstrap 提供了两种形式的压缩包,在下载下来的压缩包内可以看到以下目录和文件,这些文件按照类别放到了不同的目录内,并且提供了压缩与未压缩两种版本。

我们这里下载预编译版的,解压后课件的文件,(这个我是拷贝机房的,其中在js文件夹中多了一个npm.js文件,这是因为版本的不同)

                                                                                                       

 

            


自己懒得打字大笑,所以就在网上找了人家总结的关于 bootstrap文件包中某些文件的介绍:


                                           



bootstrap.css :是完整的bootstrap样式表,未经压缩过的,可供开发的时候进行调试用

bootstrap.min.css 是经过压缩后的bootstrap样式表,内容和bootstrap.css完全一样,但是把中间不必要的空格之类的东西都删掉了,所以文件大小会比bootstrap.css小,可以在部署网站的时候引用,如果引用了这个文件,就没必要引用bootstrap.css了,下面的文件同样。
 
bootstrap.min.js :bootstrap.js的压缩版,内容和bootstrap.js一样的,但是文件大小会小很多,在部署网站的时候就可以不引用bootstrap.js,而换成引用这个文件了~~
 
bootstrap.js  :这个是bootstrap灵魂所在,是bootstrap的所有js指令的集合,你看到bootstrap里面所有的js效果,都是由这个文件控制的,这个文件也是一个未经压缩的版本,供开发的时候进行调试用
 

bootstrap的环境至少需要3个文件:bootstrap.min.css、jQuery.min.js、bootstrap.min.js,具体代码将在下面的使用方法中提到:

 

(2)使用

    在网站中使用Bootstrap用两种方法:

      ①通过导入以上下载的文件

      ②直接使用 BootCDN 提供的免费 CDN 加速服务(同时支持 http 和 https 协议)

       ==>详细可参考http://v3.bootcss.com/getting-started/#download

  ------Bootstrap 中文网 联合 又拍云 共同为 Bootstrap 专门构建了免费的 CDN 加速服务,访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。BootCDN还对大量的前端开源工具库提供了 CDN 加速服务,请进入BootCDN 主页查看更多可用的工具库。


法二是将下面的代码引入到head之间即可(比如bootstrap3.3.5版本的):


                             

需要注意的是:
bootstrap.min.css、jquery.min.js、bootstrap.min.js这三个文件的引入顺序一定不能错乱,一般把jquery.min.js、bootstrap.min.js这两个文件放入HTML网页的最底部,这么做是为了防止网页未加载完毕而这两个文件先加载可能产生的不必要的问题。(简单的说就是js脚本文件放在底部)

 

(3)例子

 要求:使用了 Bootstrap 的基本的 HTML 模板,输出“helloworld

法一:通过导入下载好的Bootstrap文件

   

    

法二:使用 BootCDN 上的库


 




2018-01-19 00:27:55 wo_shi_LTB 阅读数 2052
BootStrap 是Twitter的工程师开发的前端框架,可以非常方便的设计出好看的页面效果。 

本章演示一些基本元素 使用 Bootstrap和不用的区别
  • 使用Bootstrap和不用的区别
    演示按钮 输入框 下拉框等常见的组件,在原生html和Bootstrap的效果比较
    同时还演示了几种html中没有的效果


  • 使用Bootstrap 很简单,按照如下步骤进行即可。

    因为bootstrap用到了html5的特性,为了正常使用,需要在最开头加上 
    <!DOCTYPE html>
    <!DOCTYPE html>
  • 导入js 导入css

    接着导入js和css
    Bootstrap需要JQuery才能正常工作,所以需要导入jquery.min.js
    接着是 Bootstrap的css,里面定义了各种样式
    最后是 Bootstrap的js,用于产生交互效果,比如关闭警告框
    注:顺序不要搞错了,否则有一些效果会出不来。

    首先是JQuery
    然后是Bootstrap css
    最后是Bootstrap js
    <script src="js/jquery/2.0.0/jquery.min.js"></script>
    <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
  • 套用class

    接着就是出现BootStrap的效果,使用是非常简单的,只需要套用 bootstrap css中定义的class即可。
    如按钮,增加class btn btn-success 就能有bootstrap的效果了
    简单的吓死人

    <!DOCTYPE html>
    <meta http-equiv="Content-Type" Content="text/html;charset=GB2312">
    <script src="js/jquery/2.0.0/jquery.min.js"></script>
    <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
     
    <button class="btn btn-success">按钮</button>

2017-11-22 11:04:01 weixin_34204057 阅读数 8


在做前端开发中,其实有百分之四十的时间用来布局写样式,百分之三十用来写
JS逻辑交互,百分之三十时间用来测试调bug,可以看的到的是,用在布局+样式的时候会比较多,

所以会有很多的前端框架诞生,例如
bootstrap

前端框架包含有设定好的
html布局结构,css样式,一些js效果,理论上将,不需要写一行代码,只需复制粘贴就可以实现一个静态页面,
官方不要脸的介绍:简洁、直观、强悍的前端开发框架,让
web开发更迅速、简单。

bootstrap不仅可以写PC的页面,还可以做响应式

响应式:利用媒体查询等技术,通过检测浏览器的尺寸不同,来显示不同的布局结构,原理就是,媒体查询可以检测到屏幕的尺寸是否处于某一个范围,如果是的时候可以让某一段
css代码起作用,来实现结构切换

boot 默认的将屏幕划分成了四种:

0-768 xs ;768-992 sm ; 992-1200 md;1200- lg ;

boot 提供了两个布局容器,这两个布局容器是要作为某一个大的区域的最外层元素的,会和其他的一些布局类名配合使用

.container .container-fluid

container-fluid在任意屏幕下宽度都是百分之一百

container 是在xs屏永远都是100%;768-992,宽度:768;992-1200,宽度:992;1200- 宽度:1200,永远居中

boot 提供了栅格系统(12栅格化,网格化,网格系统)会让我们在布局的时候,想象着将一行的空间分成12份,通过设置每一个元素占几份来控制元素的排列

row类名可以在容器中将某一行分成12份

col-type-num 可以确定某一行中的某一个元素在type屏幕的情况下占num份

注意,在使用这些类名的时候有小屏优先这样的原则
:

在写媒体查询样式的时候,应该先写小屏的样式,再写大屏的样式,小屏解析的
css代码会较少,性能较高

col-type-offset-num 设定的是某一个元素在某一个屏幕尺寸下向右偏移几份

例如
我们只需要加上
class名即可

<li class=" col-xs-12 col-sm-6 col-md-3 news"><img src="images/1.jpg" alt=""></li>

<li class=" col-xs-12 col-sm-6 col-md-3 news"><img src="images/2.jpg" alt=""></li>

想要学习前端开发的同学,可以加群:
543627393 学习哦!


2016-10-25 14:47:20 zhujun_xiaoxin 阅读数 519

Bootstrap概述

  • Bootstrap是Twitter公司开发的一个基于HTML、CSS、JavaScript的技术框架,符合HTML、CSS规范,且代码简洁、视觉优美。
  • Bootstrap集合CSS、HTML和JavaScript,使用最新的浏览器技术,为实现快速开发提供了一套前端工具包,包括布局、栅格、表格、按钮、导航和提示等。

选择Bootstrap的理由

Bootstrap引入了12栏栅格结构的布局理念,使设计质量高、风格统一的网页变得十分容易。它包含了HTML、CSS和JavaScript三大主要部分。

  • Bootstrap的HTML是基于HTML5的最新前沿技术,摒弃了那些复杂而毫无意义的标签,引入了全新的标签。
  • Bootstrap的CSS是使用LESS创建的CSS,是新一代的动态CSS。
  • Boostrap的JavaScript是使用jQuery的CSS,是优秀的JavaScript,它不会使每个用户为了相似的功能去网站上下载一份相同的代码,而是用一个代码库,将常用的函数放进去,按需取用。

Bootstrap构成模块

Bootstrap构成模块从大的方面可以分为布局框架、页面排版、基本组件、jQuery插件以及变量编译的LESS部分。与前一版相比,Bootstrap增加了多个新模块。

页面布局

布局对于每个项目都必不可少。Bootstrap在960栅格系统的基础上扩展出一套优秀的栅格布局,而在响应式布局中有更强大的功能,能让栅格布局适应各种设备。

页面排版

页面排版的好坏直接影响产品的风格,也就是说页面设计的好不好看。在Bootstrap中,页面的排版是从全局的概念上出发,定制了主体文本、段落文本、强调文本、标题、Code风格、按钮、表单、表格等样式。

基本组件

基本组件是Bootstrap的精华之一,其中都是开发者平时需要用到的交互组件。例如,网站导航、标签页、工具条、面包屑、分页栏、提示标签、产品展示、提示信息和进度条等。

jQuery插件

Bootstrap中的jQuery插件主要用来帮助开发者实现与用户交互的功能,Bootstrap1提供了6中常见插件。

  1. 模态对话框
  2. 下拉项
  3. 滚动监听
  4. 标签页
  5. 工具提示
  6. 弹出提示
    Bootstrap2在Bootstrap1的基础上又增加了6款插件,
  7. 警告框
  8. 按钮
  9. 折叠
  10. 轮播
  11. 输入提示
  12. 过渡效果

动态样式语言LESS

LESS是动态CSS语言,它基于JavaScript引擎或者服务器端对传统的CSS进行动态扩展,具有更强大的功能和更好的灵活性。

jQuery UI Bootstrap

jQuery UI Bootstrap除了包含Bootstrap各个方面的功能之外,还在其基础上补充了以下特征:动态添加标签页、日期范围选择组件、自定义文件载入框、滑动块、日期空间。

Bootstrap的主要特色

  • 跨设备、跨浏览器
  • 提供12列栅格布局
  • 支持响应式设计
  • 可定制的jQuery插件
  • 选用LESS构建动态样式
  • 支持HTML5
  • 支持CSS3
  • 提供开源代码

Boostrap的主要功能

  • 栅格系统

栅格系统与著名的960Grid大同小异,不过960Grid默认是16栏、940像素宽,由于LESS带来的动态语言特性(变量、函数等),可以通过配置几个参数,自定义栅格。

  • 布局

布局主要包括一个固定宽度的居中,一个可变宽度的浮动布局。

  • 字体样式
  • 多媒体展现
  • 表单
    Bootstrap对表单进行了比较充分的定制,风格比较明显。导航等网站的全局导航栏保持一致,使用样式实现背景色渐变,固定在头部,因此不需要考虑浏览器兼容问题。

Bootstrap版本变化

Bootstrap1

2011年8月,Twitter推出了用于快读搭建Web应用程序的轻量级前端开发工具Bootstrap,该工具由Twitter的设计师Mark Otto和Jacob Thornton合作完成。Bootstrap是一套用于开发Web的应用程序,符合HTML和CSS简洁但优美规范的库。

Bootstrap2

2012年1月,Twitter在开发者博客上公布消息,其6个月前发布的轻量级前端开发工具Bootstrap迎来重大改进,正式升级为Bootstrap2。Bootstrap2在原有特性的基础上着重改进了用户的体验和交互性,比如新增加的媒体展示功能,适用于只能手机上多种屏幕规格的响应式布局,另外还新增了12款jQuery插件,可以满足Web页面常用的用户体验和交互功能。
Bootstrap2的一个重大改进是添加了响应式设计的特征,Bootstrap1中并不支持这一特征。
Bootstrap2对现有框架进行了清晰的功能划分,主要分为脚手架(Scaffolding)、基础CSS、构件库和jQuery插件库。

  • Scaffolding

主要提供基于网格的各种布局,包括普通栅格系统、嵌入式栅格、固定布局、自适应布局,同时可以自定义网格和布局。

  • 基础CSS

包括各种排版样式(标题、段落、引用块、列表、内联标签等),在代码展示方面提供了基于code标签的内嵌代码,基于pre的块代码和基于Google Prettify的样式代码。此外,提供各种表格、表单、按钮、图标的展示方式。

  • 构件库

提供了基于按钮、导航、标签、警告、进度栏、图像网格等控件。

  • jQuery插件库

提供了十几种插件实现动态效果,例如模态对话框、下拉项、标签页、工具提示、弹出提示、轮播等,开发者可以根据自己的业务需求使用不同的插件实现各种动态效果。

Bootstrap参考资源

Bootstrap中文参考
Bootstrap英文参考
Bootstrap中文网

2018-10-16 16:27:00 weixin_33709219 阅读数 1

了解之路:

1. 首先按照官网了解一下,下载bootstrap文件,然后按照官网开始第一个页面;这样就能够了解到bootstrap是怎么样的一个东西。会发现很简单。

2. github上找到ace,然后下载文件,找到index.html,部署到项目,其实只要覆盖一下就可以,然后套模板就行。

官网了解一下:

https://v3.bootcss.com/getting-started/

照抄模板搞定:

https://github.com/bopoda/ace

http://ace.jeka.by/index.html

有任何疑问欢迎QQ交流:2691216015

转载于:https://www.jianshu.com/p/5a2d9d91e4b1

bootstrap入门

阅读数 204

1.学习bootstrap提供的基本css类,基本组件的使用容器布局栅格系统导航等等2.定制自己的专属boostrap这里面有些问题等待我来回答什么是npm?什么是grunt?什么是less?什么是sass? npminstallbootstrap@3Bootstrap使用 Grunt 作为编译系统npminstall-ggr...

博文 来自: lineuman

Bootstrap入门

阅读数 59

一、网格系统container-&gt;row-&gt;col表格-》行-》列(12列)网格系统时小设备优先,可以给列定义多种类型的样式。&lt;divclass="container"&gt;&lt;divclass="row"&gt;&lt;divclass="col-xs-6col-sm-3"&gt;

博文 来自: qq_20567419

BootStrap入门

阅读数 202

1、介绍中文官网及下载相关:http://www.bootcss.com/http://v3.bootcss.com/getting-started/#downloadGitHub:https://github.com/twbs/bootstrap使用时,需要引入dist文件夹下及JQ文件。Bootstrap实现了响应式布局,采用了媒体查询(CSSMediaQuery)。2、BootSt

博文 来自: jiangtea

bootstrap入门

阅读数 6

Bootstrap提供了如下重要的特性:❑一套完整的基础CSS插件。❑丰富的预定义样式表。❑一组基于jQuery的JS插件集。❑一个非常灵活的响应式(Responsive)栅格系统,并且崇尚移动先行(MobileFirst)的思想。css优先级优先级如何确定CSS的优先级?这里我们要先引入一个机制,分别用4个数字(a,b,c,d)表示优先级组合,比如1,1,1,1和0,1,0,1。它们的意思...

博文 来自: weixin_34038652

BootStrap入门

阅读数 20

2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。Bootstrap由MARKOTTO和JacobThornton所设计和建立,在github上开源之后,迅速成为该站上最多人watch&fork的项目。大量工程师踊跃为该项目贡献代码,社区惊人地活跃,代码版本进化非常快速,官方...

博文 来自: iteye_4836
没有更多推荐了,返回首页