bootstrap框架应用

开发中文网:v3.bootcss.com

(1)前段?  框架 ?

用户 --》  前端应用程序 ---》后端应用程序 ---》后端服务器。

框架:Library 或者lib,都值得是框架。第三方提供的,一些接口或者功能。

一.Bootstrap框架是什么??

BootStrap,最早的时候是两个单词的合成。现在成为专有名词Bootstrap,它是一个快速开发web应用程序和网站的前端框架。

二.为什么要学boot,而且为什么那么火爆?

(1)容易上手,学过HTML和CSS的人就能来学习

(2)游览器支持,几乎所有的游览器都支持bootstrap框架

(3)开发速度快,代码优雅简单

(4)移动先行,移动设备优先:自从3。0版本以后更好的适应于移动端开发。但是并不是不能开发PC端

(5)响应式设计:Bootstrap自带响应式设计,CSS可以适用于PC\移动端设备的自适应

三.strap所要学的方向或者东西?

(1)基本的页面结构:网格系统和基本的页面模板

(2)全局CSS样式:框架提供的CSS类

(3)组件:导航栏、警告框、下拉菜单等等

(4)JavaScript插件:用到的是JQ支持的插件。  轮播图等等。。

(5) 定制 :定制自己的组件   (不是重点)

四.如何下载呢?

(1)Bootstrap: 这是一个专有的名词, 意思为引导指令和引导程序

(2)下载:http://www.bootcss.com/ 是boot的官网,文档是英文的

(3)中文的官方网站:v3.bootcss.com  现在学的而是3版本

类似的框架还有很多:妹子UI amaze UI 也是一样的,是国内开发的

五.viewport使用

<!-- 1.设置 字符的编码格式-->

<meta charset="utf-8">

<!-- 2.让IE游览器渲染试图,按照edge游览器的方法 -->

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- 3.这是vieport 视口 -->

<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->

<!-- meta:vp -->

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

<!-- width=device-width 让网页的尺寸等于手机的尺寸

user-scalable = no; 禁止缩放(不推荐所有页面使用,具体看情况)

initial-scale = 1;使CSS里面的标签 按照设置的尺寸1:1显示在手机上

-->

六,布局容器-版心

(1)bootstrap已经给 body设置了基本的字体.颜色等等。所有的a标签,有颜色。而且正常状态下不显示下划线,除了hover显示下划线。

(2)布局容器:container 版心。bootstrap需要为页面内容和栅格系统包裹一个 .container 容器。

版心取值范围

1.屏幕大小  手机(<768) 宽度   宽度100%

2.小屏幕  768--992     宽度为750px

3.显示器  992-1200   宽度为970

4.超大屏幕 大于1200   宽度为1170

<!-- .container 类用于固定宽度并支持响应式布局的容器。 -->

<!-- .container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器 -->

(3)栅格系统

《1》栅格系统:是bootstrap提供的响应式布局方式

栅格系统的核心

row(被划分为12个大小的单位)

列   列  列

row

row

时间: 2024-08-06 07:58:13

bootstrap框架应用的相关文章

bootstrap框架

bootstrap框架: bootstrap是一套现成的CSS样式集合.能够简洁.直观.强悍.移动设备优先的前端开发框架,让web开发更迅速.简单. 包含了哪些文件: bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min

Bootstrap 框架 栅格布局系统设计原理

如果你是初次接触Bootstrap,你一定会为它的栅格布局感到敬佩.事实上,这个布局系统提供了一套响应式的布局解决方案. 既然这么好用,那他是如何用CSS来实现的呢? 我特意去Bootstrap官方下载了源代码进行分析了一番,看完之后果然有了收获,不过我只看了栅格布局的那块代码,其实也很简单,不必担心不懂,你只需要要基础的CSS知识即可. 前提条件(Bootstrap 自带) 首先使用这个布局之前要定义一下代码: 这行代码如果不懂,可以搜索一下,总之大致意思就是,被定义的元素的内边距和边框不再会

bootstrap框架中data-toggle=&quot;tab&quot;属性会取消a标签默认行为

这几天做公司项目用了bootstrap框架,在用导航组件的过程中,我发现在a标签里面添加data-toggle="tab"属性之后,这个a标签会失去默认行为,点击a标签的时候不会跳转,即使有href属性,但是它不管用.So,如果想要实现它导航栏的效果,又要能够让链接有效,只能去掉data-toggle="tab"属性.但是动态切换导航按钮的active属性就实现不了,但是实现了跳转,active属性还有什么用呢?就算有也看不到(小记)

Bootstrap 框架学习目录

Bootstrap 框架学习目录 Bootstrap 框架学习目录,布布扣,bubuko.com

Bootstrap框架的学习(一)

一.Bootstrap框架介绍 Bootstrap是一个非常优秀的前端UI框架,一个轻量级的UI前端框架,是基于HTML+CSS+JavaScript的框架. 二.简单介绍 Bootstrap框架是属于UI框架,与Jquery不一样,准确的描述Bootstrap框架属于CSS框架,而非JavaScript框架,但是它本身使用JavaScript来完善Bootstrap框架来完善视觉效果. 三.优点 完美的支持H5和CSS3,以及支持移动端浏览器 四.内容 可以参考一下官方文档http://v3.

BootStrap框架---1.页面排版

•前言: •  Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架. 今天我们来看Bootstrap的页面排版!!!! 首先:其默认设置了一些样式 全局font-size为14px,line-height为20px,p段落设置10px,颜色#333; 1.页面主体  .lead 1 //.lead 突出效果 2 <p>Boo

关于bootstrap的datepicker在meteor应用中的使用(不包含bootstrap框架)

1.安装bootstrap3-datepicker包 meteor add rajit:bootstrap3-datepicker 2.使用方法 Example In your handlebars template: <input type="text" class="form-control" id="my-datepicker"> In client-side JS code: Template.mytemplate.rende

PHP实战 新闻管理系统 使用到了bootstrap框架

刚刚接触 PHP 仿照视频 写了个新闻管理系统 其中也使用到了bootstrap框架 写下来整理一下思路. 这是个很简单的系统,首先是建立数据库表. mysql>create database newsdb mysql> create table news( -> id int unsigned not null auto_increment primary key,//这是新闻的id -> title varchar(64) not null,//这是新闻的标题 -> ke

Bootstrap框架(基础篇)之列表,表格,表单

继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>…</li> </ul> 有序列表 <ol> <li>…</li> </ol> 定义列表 <dl> <dt>…</dt> <dd>…</dd> </dl> Bootst