关于作者:
- 郑云飞(天放), 程序员Java
- weibo:@tianFang
- blog: zhengyunfei.iteye.com
- email: zhengyunfei8@gmail.com
- 学习路线图
由于工作需要,下班之余,就自学了bootstrap。不瞒大家,写这篇文章我才自学了3天bootstarp,如果你是一个bootstarp高手,就不要阅读这篇博客了。
bootstrap是Twitter公司里面的开发者和设计师做出来的一套用在网页上面的用户界面和交互的架构,架构的意思就是把经常用的一些东西事先为你编写好,你需要的时候可以直接去调用。比如说你想去设计页面的布局,你需要去计算网页的宽度,然后手工的把布局要用到的css代码写出来。bootstarmp结构内置了一套网格布局的系统,你只需要在元素中使用设计好的布局相关网格的类,不需要你再去撰写布局所使用的css代码,再比如说,你想在网页中出现一个按钮,通常你需要先用图形设计软件去设计这样的一个按钮,然后再把它用html和css表示出来,那么在网页中使用bootstarp结构的话,我们可以直接去添加bootstarp设计好的按钮相关的类,这样就可以立即在网页中出现一个漂亮的按钮,bootstrap还允许我们去控制这个按钮的颜色,样式,大小等等。boostrap里面包含了很多在网页中经常用的一些界面的设计,表格,表单,导航栏,按钮组,分页器,导航路径等等。bootstrap还提供了很多交互的小插件,比如说,对话框,下拉菜单,工具提示,选项卡等等。
这些你都可以直接去使用,只需要按照boostrap设计好的方式,先把代码的结构写出来,然后在元素上面使用相应的类,剩下的事呢bootstarp全部都会为你做好。这就让我们的工作变得非常的简单,下面呢我们就一起来学习使用bootstarp结构。
现在你看到的就是boostrap这个项目的官方网站,这个网站的界面就是用的bootstrap这个架构来创建的,你可以把这个网站当作是bootstrap结构演示的网站,在这个网站还有bootstrap结构详细的使用说明,我们可以先点开这个Get Started来看一下:
在这个页面里面提供了bootstrap的下载地址,介绍了bootstrap文件结构,bootstrap包含了那些东西,以及html模板和一些Examples.
接下来我们点击scaffolding这个界面来看一下:
在这个界面里面,说明了bootstrap一个内置的网格系统的使用,也就是布局网页要用到的那个网格系统,bootstrap这个网格系统可以是响应时的,也就是如果你愿意的话,你可以让网页根据上网设备的屏幕分辨率,来做出相应的变化。
好,我们再看一下Base Css:
这个页面里面是bootstrap架构设计好的常用的css样式,比如说基本的文字的排版,列表的样式,表格,表单等等。
我们再打开这个Components来看一下:
这个页面里面介绍了网页当中经常用的一些组件,比如说带下拉菜单的按钮,导航栏,选项卡等等,我们可以再看一下bootstrap架构的JavaScript插件来看一下:
那么在这个界面里面介绍了如何去使用bootstrap结构提供的这些JavaScript小插件,比如说对话框,下拉菜单,工具提示等等。好最后我们再看一下Customize这个菜单:
如果你打算去重新定制一下bootstrap的一个设计,或者呢你只需要bootstrap结构的其中的一小部分,那么在这个界面里面你可以做到。
下面我们就在网页中使用bootstrap架构
下一篇博客:在网页中使用bootstrap架构
相关推荐
最近小编正在开发一个基于Bootstrap3.0的wordpress模版,网站下一步的改版会全部替换成Bootstrap风格。这套源码的优点就是自定义的属性很多,所以可以做成很多不同的效果,缺点是相对应的也增加了学习成本,另外现有...
本文实例为大家分享了BootStrap入门学习的第一篇,供大家参考,具体内容如下 1、环境搭建 中文官网下载地址:http://www.bootcss.com/ 右击选中的WEB项目,点击导入,选择文件系统,然后下一步,选择BootStrap文件...
本人处女座,有收藏学习资料的爱好,天下没有免费的午餐,免费的午餐吃起来还没什么胃口,我是每一步走过来的,读者搜到此文档,说明想充电了,希望读者尽快成为大神,此文件内容便是资源名的介绍……
BootStrap是一个强大的CSS框架,简洁强大,本人也在学习BootStrap。 FreeMarker语法简单,能生成静态页,互联网项目都在用。MySQL数据库是应用最广泛的开源数据库,上手简单。 项目目前就用到以上技术,后续不排除会...
20-login_required装饰器21-列表和销毁视图22-表单实例和更新视图23-Django模板继承24-集成Bootstrap和Django 25-部署到Heroku 下一步: 在Django中配置电子邮件电子商务Tweetme 2 你在做什么? 让我知道... @...
学习jQuery其实还是在学DOM。 (3). 极简化: jQuery是对传统DOM操作的终极简化。jQuery是对DOM的每一步操作都进行了终极的简化。但是,步骤并没有减少。 (4). 函数库: jQuery中一切都是函数,没有属性。 2. 为什么:...
spring-boot-tutorial:Spring Boot教程带您一步步学习Spring Boot,其中包含大量示例。SpringBoot教程是一本关于Spring Boot学习的开源书。用大量实例带你一步一步走进Spring Boot的世界
博客这个博客网站是我在学习 Python 时创建的。 我很兴奋能在 Web 开发中迈出一步。 因此,我决定 Python 是非常强大且完整的编程语言,而且我也有相当的实践经验。 我创建了网站。 但是这些天我使用这个网站进行...
学习一个优秀的框架,总要循序渐进,了解->使用->原理->源码->改造。 材料 下载Tomcat-8.5.37程序 下载Tomcat-8.5.37源码 准备调试代码,如下 public static void main(String args[]) throws Exception { ...
并在多种方面有所帮助: 它使我可以练习在课堂上学习HTML,CSS和Bootstrap编程人们可以认识我它表明我有能力为可能的雇主创建这样的项目每个页面都有一个导航栏,允许用户单击下一步要访问的任何页面。 每个页面还...
./ch2_bootstrap/conFusion :这是我学习引导程序,css flexbox,gulp,grunt,npm脚本等其他课程的第一部分的根文件夹 meadowlarkTravel :我在这里关注一本书,事实证明该书过时了,无法与npm模块和平地使用。 ...
这个C#实现的小游戏是一个简单的猜数字游戏,让玩家...Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes
(没有用到任何框架,都是servlet,前端是JSP+bootstrap) 部署 1、导入sql 找到sql文件,导入到数据库,并且在下一步导入代码后,修改数据库的用户名和密码。 2、使用IDE导入代码 这里分两种情况, 如果你是使用...
写在前面 本仓库是本人自己总结的web前端开发...本人偶尔也会写博客,如果有喜欢玩博客的朋友也可以一起分享交流,分享也是一种学习! 踩坑总结 知识导航 您可以根据下面的链接快速定位到对应的知识点解析。依次进行
1、在计算机上学习安装虚拟机 2、在虚拟机上安装操作系统(win98或win2000) 3、实现虚拟机与主机通讯(比如在主机和虚拟机之间实现QQ聊天) 4、在虚拟机上运行软件实验(比如安装VideoPack5软件) 实验原理:所有的...
本次Lab分为对实验环境的配置和熟悉,Bootloader,JOS kernel这三个部分,一步一步引入,对OS启动和初始化的过程进行了学习。 完成情况 Exercise# 01 02 03 04 05 06 07 08 ch 09 10 11 12 Status √ √ √ √ √ √...
Laravel身为最优雅的PHP框架,很多学习PHP的小伙伴造就对Laravel垂涎欲滴。...所有的课程源码已放在Github上:laravel...简单说明之后我们来进入下一步,安装Laravel,在这我们是通过Composer来安装,打开命令行终端,执行
Boot入门初体验是一门针对初学者准备的课程,讲解了如何一步一步进入Spring?Boot开发,课程采用循序渐进的方式,一个知识点一个知识点的讲解和学习,让初学者不知不觉的掌握各种开发技能,课程包含了主流框架搭建、...
降雨预报 通过使用澳大利亚的降雨数据集来预测明天是否会下雨的项目。此项目在很多ml模型(例如catboost,xgboost,随机森林,支持向量分类器等)上进行了测试。... 现在进入最后一步。 运行应用 python ap
3、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目,作为参考资料学习借鉴。 4、本资源作为“参考资料”如果需要实现其他功能,需要能看懂代码,并且热爱钻研,自行调试。 ## 项目...