教你用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美化了我们的页面;效果是不是比我们程序员写的页面漂亮的许多

时间: 2025-01-11 07:33:35

教你用Bootstrap开发漂亮的前端界面的相关文章

【连载】Bootstrap开发漂亮的前端界面之自定义右键菜单

连载: 1<教你用Bootstrap开发漂亮的前端界面> 2.<Bootstrap开发漂亮的前端界面之实现原理> 网页中的自定义右键菜单越来越普遍,自定义右键菜单可以增强用户体验,让用户使用软件更加的简便,今天我们就来基于Bootstrap来开发自己的自定义右键菜单. 一.首先,准备好自定义菜单,供单击右键展示: 菜单默认不可见,可以通过 style="display:block" 进行调试预览; <ul class="dropdown-menu

【连载】Bootstrap开发漂亮的前端界面之插件开发

相关文章: 1.<教你用Bootstrap开发漂亮的前端界面> 2.<Bootstrap开发漂亮的前端界面之实现原理> 3.<Bootstrap开发漂亮的前端界面之自定义右键菜单> 什么是jQuery插件? 首先,来看看我们一般是如何使用jQuery,第一种方式:$.trim(" hello world "),直接使用jQuery中方法,第二种方式:$("#myinput").val(),获取页面中的元素,然后使用jQuery对象

Bootstrap开发前端 进阶(优化及与后端结合接口)总结

Bootstrap开发前端 进阶(优化与接口分析)           chang_jw 通过使用bootstrap3.3.7,html5, CSS3进行购票系统网站前端开发. 实现index,film. Cinema, certain,login, success页面并可形成关联性跳转逻辑. 一,使用Google Fonts 插件进行字体优化 文字是网页中很重要的组成部分.为文字选择一个合适的字体,能够更好的展现一个网站的个性,表达所要传递的信息. 对于font理解首先是从CSS中,如: 浏览

推荐15款最好的 Twitter Bootstrap 开发工具

Twitter Bootstrap 自从2011年最初发布到网上后,迅速成为 Web 领域最流行的响应式前端开发框架之一,是网页设计的优秀实践.Twitter Bootstrap 框架包含了众多的预定义风格的组件,插件和加载项. 在这篇文章中,我们想向大家介绍15款最好的 Twitter Bootstrap 开发工具以更好地满足要求以及帮助提高他们的 Web 开发的生产力. 您可能感兴趣的相关文章 10大流行 Metro UI 风格 Bootstrap 主题和模板 推荐12款优秀的 Twitte

iOS开发如何学习前端(1)

iOS开发如何学习前端(1) 我为何学前端?因为无聊. 概念 前端大概三大块. HTML CSS JavaScript 基本上每个概念在iOS中都有对应的.HTML请想象成只能拉Autolayout或者设置Frame的ViewController.好比你在网页上放了一个Button,如果用HTML你就可以设置他的摆放位置,在哪哪个控件里.但是你不可以设置大小,颜色,圆角之类的属性.CSS专门负责HTML管不了的这些颜色啊,大小啊之类的属性.JavaScript主要负责响应事件,你把它想象成iOS

柯南君: 教你看敏捷开发のScrum是怎样工作的?

柯南君 教你看敏捷开发のScrum是怎样工作的? 如今敏捷开发是越来越火,人人都在谈敏捷.人人都在学习Scrum和XP,柯南君的朋友"远哥"是一位项目leader.柯南君与远哥促膝长谈.远哥也毫不避讳.知无不言言无不尽.把自己对Scrum的理解和自己工作中的经验积累与柯南君分享,在这里柯南君取代远哥与大家分享一些经验. 一. 什么是敏捷开发? 敏捷开发(Agile Development)是一种以人为核心.迭代.循序渐进的开发方法. 怎么理解呢?首先.我们要理解它不是一门技术,它是一种

CSS3实战开发:手把手教你照片墙实战开发

在<CSS3 2D转换技术之translate实战开发>文章中,我给大家列出了CSS3中的2D转换方法: 1.    translate() 2.    rotate() 3.    scale() 4.    skew() 5.    matrix() 同时对第一个方法 translate()做了非常详尽的介绍,并带领大家实战开发了一个导航条.如果你对translate不了解或不是太熟悉,请阅读我的博文 <CSS3 2D转换技术之translate实战开发> . 在讲解知识点之前

【小松教你手游开发】【unity实用技能】角色头部跟随镜头旋转

这个在端游上比较场景,在角色展示的时候,当摄像头在角色身边上下左右旋转时,角色头部跟随镜头旋转.如天涯明月刀等. 这个在手游上比较少见,不过实现也没什么区别. 首先一般情况下,找到模型的头部节点,直接用lookAt指向camera就可以了,不过一般需求不会这么简单. 比如说,超过头部扭动极限,头部需要插值回到原始点:当镜头从外部回到极限内,需要插值回来.这时候lookat就没法使用. 更有情况,头部本身坐标系不在世界坐标轴上, 可能旋转了90多或者输出的prefab就是歪的等等,这些情况都没办法

软件开发工程师(前端) 10—30w/年

软件开发工程师(前端) 10-30w/年[岗位职责]: 具备3年以上WEB前端工作开发工作经验. 精通前端的Html5.Css3.Javascript和Ajax技术,熟练掌握jQuery,ES6,Vue,Bootstrap等前端框架技术. 熟悉W3C标准,熟悉前端模板技术,对表现与数据分离,Web语义化等有深刻理解. 具有基于用户体验的交互式设计经验,持续的优化前端体验和页面响应速度,并保证兼容性和执行效率. 熟悉各种常见跨浏览器.跨设备问题,深刻理解Web标准,对可用性.可访问性等相关知识有实