教你用Bootstrap开发漂亮的前端界面
Bootstrap介绍:
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。
Bootstrap的特点:
一、预处理脚本:虽然可以直接使用 Bootstrap 提供的 CSS 样式表,不要忘记 Bootstrap 的源码是基于最流行的 CSS 预处理脚本 - Less 和 Sass 开发的。你可以采用预编译的 CSS 文件快速开发,也可以从源码定制自己需要的样式。
二、一个框架、多种设备:你的网站和应用能在 Bootstrap 的帮助下通过同一份代码快速、有效适配手机、平板、PC 设备,这一切都是 CSS 媒体查询(Media Query)的功劳。
三、特性齐全,Bootstrap 提供了全面、美观的文档。你能在这里找到关于 HTML 元素、HTML 和 CSS 组件、jQuery 插件方面的所有详细文档。
准备工作:
下载Bootstrap,中文站地址:http://v3.bootcss.com/
下载jQuery,地址为http://jquery.com/download/
下载生产版(压缩版)或开发版(未压缩版)
网页中使用bootstrap,引入bootstrap与jquery相关文件,至少3个。
使用bootstrap编写漂亮的界面,建议从Bootstrap全局CSS样式然后到Bootstrap组件最后Bootstrap JavaScript插件的顺序学习。
以下是一个简单的页面,使用bootstrap css美化了我们的页面;效果是不是比我们程序员写的页面漂亮的许多
教你用Bootstrap开发漂亮的前端界面的更多相关文章
- 【连载】Bootstrap开发漂亮的前端界面之插件开发
相关文章: 1.<教你用Bootstrap开发漂亮的前端界面> 2.<Bootstrap开发漂亮的前端界面之实现原理> 3.<Bootstrap开发漂亮的前端界面之自定义 ...
- 【连载】Bootstrap开发漂亮的前端界面之自定义右键菜单
连载: 1<教你用Bootstrap开发漂亮的前端界面> 2.<Bootstrap开发漂亮的前端界面之实现原理> 网页中的自定义右键菜单越来越普遍,自定义右键菜单可以增强用户体 ...
- Bootstrap开发漂亮的前端界面之实现原理
引:Bootstrap采用的是一个“响应式”设计.响应式Web 设计是一个让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法.例如,您先在计算机显示器上浏览一个网站,然后再智能手机上浏览,智能手 ...
- 推荐一款基于bootstrap的漂亮的前端模板—inspinia_admin
首先给出Demo网址:http://cn.inspinia.cn inspinia admin 最新版 bootstrap 完全响应式后台管理模板,采用扁平化设计.使用Bootstrap 3+ Fra ...
- 推荐15款最好的 Twitter Bootstrap 开发工具
Twitter Bootstrap 自从2011年最初发布到网上后,迅速成为 Web 领域最流行的响应式前端开发框架之一,是网页设计的优秀实践.Twitter Bootstrap 框架包含了众多的预定 ...
- Bootstrap——优秀的开源前端框架
Bootstrap是著名的社交网站.微博的先驱Twitter在2011年8月推出的开源WEB前端框架,集合CSS和HTML,使用了最新的浏览器技术,为快速WEB开发提供了一套前端工具包,包括布局.网格 ...
- iOS开发如何学习前端(1)
iOS开发如何学习前端(1) 我为何学前端?因为无聊. 概念 前端大概三大块. HTML CSS JavaScript 基本上每个概念在iOS中都有对应的.HTML请想象成只能拉Autolayout或 ...
- Bootstrap开发
1.BootStrap开发工具 任意前端工具 专门Bootstrap工具:Jetstrap(下载地址:jetstrap.com) 2.官网: www.bootcss.com(“下载Bootstrap” ...
- 基于bootstrap的漂亮网站后台管理界面框架汇总
基于bootstrap的漂亮网站后台管理界面框架汇总 10个最新的 Bootstrap 3 管理模板 这里分享的 10 个模板是从最新的 Bootstrap 3 管理模板集合中挑选出来的,可以帮助你用 ...
随机推荐
- POJ 3734 生成函数
题意:一排n长度的砖,有四种颜色,红色绿色是偶数,有少染色方式. 分析: 泰勒展开式: chx = (e^x+e^(-x))/2 = 1 + x^2/2! + x^4/4! + x^6/6! + .. ...
- 2018.12.30 Intellij IDEA设置main方法自动补全
Eclipse与 Intellij IDEA设置方法自动补全 1.首先,点击File-->Settings-->Editor-->Live Templates 设置你想输出的模板 右 ...
- 如何删除anaconda
因为实验室电脑之前装tensorflow是用的anaconda装的,导致现在用pip装tensorflow1.0装上了却还是用的annaconda下的tensorflow0.8,所以想删除anacon ...
- c#运用this.invoke() 在多线程时对UI进行修改
什么是进程呢?当一个程序开始运行时,它就是一个进程,进程所指包括运行中的程序和程序所使用到的内存和系统资源.而一个进程又是由多个线程所组成的,线程是程序中的一个执行流,每个线程都有自己的专有寄存器(栈 ...
- Navicat Premium 连接Oracle 数据库之配置
Navicat Premium连接Oracle 数据库之配置 1.Oracle数据库服务器下载 Oracle官方网站下载数据库最新版本:http://www.oracle.com/technetwor ...
- 并发编程之多线程基础-join方法及优先级(五)
join()方法作用 当在主线程当中执行到t1.join()方法时,就认为主线程应该把执行权让给t1 优先级 现代操作系统基本采用时分的形式调度运行的线程,线程分配得到的时间片的多少决定了线程使用处理 ...
- oracle远程导出/导入
创建db_link,远程导出/导入.expdp/impdp Oracle数据库本地磁盘空间有限,或应用系统的需要,会通过远程的方式导出数据库.在oracle当中,exp远程导库的速度太慢,而expdp ...
- Docker 入坑教程笔记
Docker 入坑教程笔记 视频网址B站:点这里 查询命令 man docker 简单启动和退出 docker run --name [容器名] -i -t ubuntu /bin/bash 交互启动 ...
- 解决WordPress设置错误的url网站不能访问的问题
通过WordPress后台首选项更改了网站url地址之后,网站就会出现访问不了的情况,一般来说,网站后台也登陆不上去了,我从网上寻找到了四种方法,这四种方法前三种都是需要登陆到后台的,但实际上出错后, ...
- 利用python和opencv批量去掉图片黑边
import os import cv2 import numpy as np from scipy.stats import mode import time import concurrent.f ...