bootstrap基本用法

进入中文官网:http://www.bootcss.com

开始第一个Demo

准备工作:

(1)进入bootstrap中文官网,点击起步

(2)下载生产环境

下载好的文件是一个压缩文件,学习时建议使用未压缩版本,项目开发时必须使用压缩版本。

(3)找到基本模板,将其复制粘贴进来,当然,必要时需要按需求进行更改。

  1. 学习bootstrap首先需要理解的是栅格系统,看官网(http://v3.bootcss.com/css/#grid-intro)给的定义:

我们需要理解的是col-xs- 、colo-sm- 、col-md- 、col-lg- 的用法,bootstrap本身的定义是一行固定有12列,其中这些后面跟的数字就是当前模块所占的列数,占满12列就是一行,多出来的就挤到下一行,跟之前的float思想一样。

通常的做法是:

<section id=“id”>    //设定一个大的模块

<div class="container”>    //定义里面存放内容模块

<div class="row”>        //定义一行,里面默认12列

<div class="col-md-12" >    //定义一个模块,在992px-1200px这个像素区域内所占12列。

<h2>xxxxxxxx</h2>

</div>

</div>

</div>

<section>

  1. 组件

参考官网地址(http://v3.bootcss.com/components/),直接引用。

  1. JavaScript插件

常用的用模态框(弹出框)、标签页、carousel(轮播图)、提示弹出框

用法(比喻):

直接把下面给出的代码copy进去,然后按需求进行更改即可。

时间: 2024-08-06 07:55:53

bootstrap基本用法的相关文章

Bootstrap 基本用法

使用bootstrap框架的步骤: 1.引用bootstrap的css框架,这样可以通过bootstrap来布局: <link rel="stylesheet" href="../css/bootstrap.min.css">; 2.引用bootstrap的js框架,这样可以使用; 注意:因为bootstrap的js框架是基于jquery而写的,因此要引用bootstrap的js框架的时候必须先引入jquery,这样才能使用bootstrap的框架: &

Bootstrap 基本用法(续)

在bootstrap中有很多的组件,这些组件可以帮组我们更快的写出一些好看的样式,下面就是一些样式: 导航框: <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> &

bootstrap的用法、bootstrap图标

正文 前言:最近好多朋友在群里面聊到bootstrap icon图标的问题,比如最常见的菜单管理,每个菜单肯定需要一个对应的菜单图标,要是有一个可视化的图标选择组件就好了,最好是直接选择图标,就能得到对应的class样式.于是乎各种百度,皇天不负有心人,最后被博主找到了,感觉效果还不错,并且支持自定义的图标,今天就拿出来分享下,绝对的干货哦! 一.Bootstrap icon picker组件 这个组件是在github上面搜索的时候找到的,初初看上去,确实是很不错的,并且是基于bootstrap

bootStrap @media 用法

一. @media 格式 @media all and (min-width:xxx) and (max-width:xxx) (亦可以写成@media all and (min-width:xxx) and (max-width:xxx)) {/*这段查询的all是针对所有设备(有些设备不一定是屏幕,也许是打字机,盲人阅读器)*/} @media only screen and (min-width:xxx) and (max-width:xxx){/*上面针对了所有设备,这段是只(only)

类似Bootstrap热门前端框架大集合

Bootstrap 首先说 Bootstrap,估计你也猜到会先说或者一定会有这个( 呵呵了 ),这是说明它的强大之处,拥有框架一壁江山的势气.自己刚入道的时候本着代码任何一个字母都得自己敲出来挡我者废的决心,来让自己成长.结果受到周围各种基友的引诱开始了 Bootstrap 旅程.本人虽然是个设计+前端的万里有一的人才,但是老天只让我会用 PS 和各种设计工具却不给我跟设计妹子一样的审美,所以这也是我最初选择 Bootstrap 的原因之一,它让我做出来的东西好歹能在妹子面前装个逼,不过时间长

基于Servlet+JDBC+Bootstrap+MySQL+AJAX权限管理系统项目实战教程

项目简介 权限系统一直以来是我们应用系统不可缺少的一个部分,若每个应用系统都重新对系统的权限进行设计,以满足不同系统用户的需求,将会浪费我们不少宝贵时间,所以花时间来设计一个相对通用的权限系统是很有意义的.     本系统的设计目标是对应用系统的所有资源进行权限控制,比如应用系统的功能菜单.各个界面等进行权限的操控.技术介绍 · Servlet3.0 Servlet 3.0 作为JavaEE6 规范体系中一员,随着JavaEE6规范一起发布.该版本在前一版本(Servlet2.5)的基础上提供了

关于前端框架BootStrap和JQueryUI(以及对应的优秀模板)

最近两个月由于需要升级公司产品的界面,所以不得不去学习了下原本并不熟悉的前端框架.这里也是推荐两款BootStrap和JQueryUI. bootstrap使用起始很简单,首先,需要得到所需要的Jar包,可以去中文官网http://getbootstrap.com/2.3.2/获取. 在我看来,要掌握bootstrap的用法有很多途径,可以去看帮助文档,或者看学习视频,这些能帮助你更系统全面的认识这个框架.但在时间不允许的情况下,我觉得最快的学习方法还是找个做好的基于次框架的网站或系统,然后看他

【转】Rails中Bootstrap的安装和使用

转自:http://blog.csdn.net/lissdy/article/details/9195651 眼看着前端攻城师们都开始使用Bootstrap创作网页,于是也想学着在最近正在学习的Rails中使用Bootstrap. 具体安装使用过程如下: 1.创建Rails工程 rails new usedschool   2.生成脚手架 rails g scaffold Item title:string description:text --skip-stylesheets 3.应用迁移 r

前端-BootStrap

bootstrap 英 /'bu?tstræp/ 美 /'b?t'stræp/ n. [计] 引导程序,辅助程序:解靴带 关于 BootCDN BootCDN 是 Bootstrap 中文网支持并维护的前端开源项目免费 CDN 服务,致力于为 Bootstrap.jQuery.Angular.Vuejs 一样优秀的前端开源项目提供稳定.快速的免费 CDN 加速服务. BootCDN 所收录的开源项目主要同步于 cdnjs 仓库. 自2013年10月31日上线以来已经为30多万家网站提供了稳定.可