如何使用bootstrap框架

Bootstrap是前端工程师比较常用的框架、插件,根据它的定义,Bootstrap就是用于前端开发的一个模板,就是别人做好了我们直接可以搬过来直接使用或者根据自己需要略加修改设计自己的页面效果的成品。所以更加准确说,我们更多的时候是去学习如何去使用Bootstrap,那么我们该如何学会更好的使用Bootstrap?下面是我个人在Bootstrap学习使用过程中得一些心得,在这儿跟大家分享,不足之处欢迎前辈们多多指教!

第一:在学习一个新的知识,我们首先的明白它是什么以及我们为什么要学习它,然后深入,理解它的一些概念性的知识,不必死记硬背,记住不是目的,透彻理解才是。

第二:下载Bootstrap,认真阅读,深入学习Bootstrap里面的js和JQ的一些插件,动手实践,加深印象。

第三:如何吧Bootstrap运用在自己的开发中,步骤:

1、第一步,构建一个基本HTML页面,基本模板,可以在Bootstrap里面找到直接复制过来,EX:

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn‘t work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好,世界!</h1>

    <!-- jQuery (necessary for Bootstrap‘s JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
 

说明

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

用来修复网页在移动设备上显示的问题

2)

<!--[if lt IE 9]>

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

这是对ie9之前等版本不支持HTML5的浏览器进行特殊的处理

4)在head中的bootstrap-responsive.css是非必须文件,可以不引入,这个文件的主要作用是做一个响应式的网页。

5)在网页中bootstrap.css是bootstrap中的样式文件,bootstrap.js是脚本文件,两个文件相互对应,引入的顺序和位置一般是:CSS文件在head标签中引入,js文件在body标签里引入。其中jquery文件要在bootstrap脚本文件之前引入。

6)Bootstrap是基于HTML5网页的,所以首先要建立一个HTML5类型的网页

做完以上的操作就建好了一个基本的bootstrap网页了,然后就可以在body里面使用bootstrap中定义好的各种好看的样式。

简要说明在Bootstrap中,网页按照十二栏的布局分布,在div中通过span类可以定义该div块占据多少栏,span1~span12可以选择.

2、第二步:根据你的网页需要,直接引入Bootstrap里面的CSS布局或JS插件,说白了就是把Bootstrap里面你需要的东西拷贝过来,根据具体需求决定直接使用或者进行修改。

时间: 2024-12-19 16:23:21

如何使用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框架应用

开发中文网:v3.bootcss.com (1)前段?  框架 ? 用户 -->  前端应用程序 --->后端应用程序 --->后端服务器. 框架:Library 或者lib,都值得是框架.第三方提供的,一些接口或者功能. 一.Bootstrap框架是什么?? BootStrap,最早的时候是两个单词的合成.现在成为专有名词Bootstrap,它是一个快速开发web应用程序和网站的前端框架. 二.为什么要学boot,而且为什么那么火爆? (1)容易上手,学过HTML和CSS的人就能来学习

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

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