bootstrap初认识,hello bootstrap

先盗版一个介绍:

  2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。Bootstrap由MARK OTTO和Jacob Thornton所设计和建立,在github上开源之后,迅速成为该站上最多人watch&fork的项目。大量工程师踊跃为该项目贡献代码,社区惊人地活跃,代码版本进化非常快速,官方文档质量极其高(可以说是优雅),同时涌现了许多基于Bootstrap建设的网站:界面清新、简洁;要素排版利落大方

好,让我们开始吧:

bootstrap能做什么

  对,布局,讨厌设计的人有福了。bootstrap可以带你装逼带你飞。不再被position啊,magging啊,padding啊之类的弄的死去活来的

  好,兼容性,主流浏览器都OK,IE6的话,我就呵呵了

  爽,html5的基础插上bootstrap的翅膀,让nav(菜单栏)啊,header,footer,button,progress,提示信息之类的更容易

  如果你读懂上面的意思,那么你的页面就好办了,开发快了,样式统一了,关键是你可以做出一个东西,同时适配PC,平板和手机,不需要开发多个版本,bootstrap基于jquery+html5+css3,所以你

需要些什么呢:

  <!-- CSS -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/bootstrap-theme.css" rel="stylesheet">

  <!--  JavaScript -->
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>

  bootstrap官网可以下载,jquery得另外下载,原谅我没发连接,这个你得会

让我们来看一个页面:

很简单的一个页面,菜单,一些panel,轮播等,footer截屏没截上,就算了,那个轮播是我的淘宝店,大家要是比较高兴的话,可以帮我收藏一下,可以增加搜索展示

这个页面看起来,没什么,但是,缩放一下,它就是这样了:(右边是点开汉堡包菜单)

爽了吧,这下解决了很多问题,导航,是不是经常头疼啊,用哪种,方不方便,不同分辨率怎么办? 页面而已,到底用多宽,800还是1000,还是更多,用户屏幕是12寸,14寸,19寸还是24寸,忘了这此,不用再头疼了

今天这篇是开始篇,页面怎么实现的呢,不要着急啊,到我淘宝店买点茶业,喝喝茶,等一等,那个8块9是真的,过几天就来发啦,今天是加班到这么晚,顺便发一下

没什么意外的话,我会持续更新,虽然工作这么多年,也是刚学习H5,大家一起成长啊,如果发现我有不对的地方,请直接提出来啊!

时间: 2024-10-10 21:03:22

bootstrap初认识,hello bootstrap的相关文章

bootstrap学习笔记一: bootstrap初认识,hello bootstrap(下)

这一篇主要是补上源码,开始之前请先回顾:bootstrap学习笔记一: bootstrap初认识,hello bootstrap(上) 首先,我们的页面要求, lang,charset等就不用说了,老html属性, viewport是h5的属性,目的是 width=device-width 铺满设备宽度, initial-scale=1正常比较 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c

bootstrap初体验

这两天接触了bootstrap,它是一种前端开发框架.基于JQuery封装的一种框架,采用三格式布局,自带响应式布局,移动设备优先的前端开发框架. 刚开始的时候,拿着网页有点摸不着头脑,多使用几次以后发现这个框架很好用,使用几天以后发现,使用bootstrap可以很迅速的将网页框架化,而且思路清晰. 使用bootstrap首先要引入bootstrap的css以及js文件,然后就可以使用bootstrap开始对整个网页布局了,布局完成之后将内容填充进去 , 加上相应的效果就可以快速完成网页了,使用

【Bootstrap】1.初识Bootstrap

作为Web前端开发框架,Bootstrap为大多数标准的UI设计常见提供了用户友好.扩浏览器的解决方案. 1.下载Bootstrap 打开官方网址 http://getbootstrap.com/ 进行下载. 2.准备项目模板文件夹 接下来,我们为第一个项目创建一个文件夹以及一些基本的文件.谓词我们还要用到HTML5样板文件 HTML5 Boilerplate(H5BP),然后把Bootstrap的有用文件复制过去. 2.1 下载H5BP 访问网站链接地址:https://html5boiler

BootStrap之基础-1 BootStrap起步(基本概念、环境搭建)

一.基本概念 Bootstrap 简介 - 移动设备优先 - 所有的主流浏览器都支持Bootstrap 它既是由动态CSS语言Less写成 Github热门开源项目 包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目 够成 Bootstrap 目录说明 - CSS目录--用于存放Bootstrap框架使用的样式文件 - bootstrap.css文件: Bootstrap框架的样式文件 - bootstrap.min.css文件:Bootstrap框架的样式压

[Bootstrap]7天深入Bootstrap(1)入门准备

由于申请了一个域名,一个云主机,开始弄个人网站. 发现Bootstrap非常方便,和重要,故开始学习与分享关于Bootstrap的技术. 推个广告 个人网站:http://www.51pansou.com BootStrap视频下载:Bootstrap视频 BootStrap源码下载:Bootstrap源码 本节目录: 简介 入门 基本模板 CSS基本语法 JS基本语法 扩展 简介 Bootstrap是目前最流行的前端开发框架,由Twitter的两位前 员工Mark Otto和Jacob Tho

Bootstrap页面布局7 - Bootstrap响应式布局的实用类

在bootstrap-responsive.css这个CSS样式表中已经为我们设定好了几个实用的类: .visible-phone: 在智能手机设备上显示这个元素,在其他设备上隐藏该元素 .visible-tablet: 在平板电脑上显示这个元素,在其他设备上隐藏该元素 .visible-desktop: 在桌面电脑上显示这个元素,在其他设备上隐藏该元素 .hidden-phone: 在智能手机上隐藏,在其他设备上显示该元素 .hidden-tablet: 在平板电脑上隐藏,在其他设备上显示该元

坚持自学的第二天,bootstrap初入门

前言 昨天,初步学完了jekyll目录结构与Liquid语法的应用与认识. 日志 今天刚入门,做了一个bootstrap导航栏,但是选中状态不行,找了JS中写好的API,写法与视频中讲的有点不一样,但还没有尝试.这样的一个小错误,也和过支一样,花了几人小时.但是,还是不得要领,我想看原文档的API,并仔细研究,尝试编码验证还是很重要的.以后的几天,我将尝试使用这种模式,但是不同的是,自己仔细看完一遍,自己不看原代码写出来,并写好注释. 感言 今天熬住,没有再下载游戏,疯狂玩游戏的那种状态.遇到代

bootstrap初用新得1

## 基本准备 1. 首先把相关软件窗口规划好,对于我的喜好,我喜欢把除了浏览器外的其他软件分为左右两个半屏.左边和右边很多软件之间是需要配合使用的:     * 左边: scss文件,ps的guideGuide分栏图.     * 右边: html文件,css文件,markMan,文字txt.     * 另外,还需要打开images图相的文件.这个具体放左还是放右根据现在使用的是scss还是html来决定.     * 使用guideGuide时要注意,由于该插件是从第一列的内容区开始画线的

bootstrap初用新得2

##具体实现 1. 宽度无限的背景和始终居中的主题内容:   首先是背景要用一个div1来做out-background,然后div1的兄弟元素div2来做container.对out-background进行决对定位,对container进行相对定位,并且margin:auto.这样container就会居中在body中并且在out-background的上面.out-background可以设置几个不同高度的子元素,这样,就可以为container里的不同的行做背景了.————其实,完全跟c