前端技术Bootstrap的hello world

发布时间：2020-12-17 21:07:44 所属栏目：安全来源：网络整理

导读：---对于用户来说，界面就是程序本身。那么一个漂亮的web一定是你继续使用这个应用的前题。 ? 这一节我们来一起写个Bootstrap的hello wrold。 Bootstrap? Bootstrap?是最受欢迎的?HTML、CSS?和?JS?框架，用于开发响应式布局、移动设备优先的?WEB?项目。如何

---对于用户来说，界面就是程序本身。那么一个漂亮的web一定是你继续使用这个应用的前题。

这一节我们来一起写个Bootstrap的hello wrold。

Bootstrap?

Bootstrap?是最受欢迎的?HTML、CSS?和?JS?框架，用于开发响应式布局、移动设备优先的?WEB?项目。

如何使用Bootstrap？?????????????????????????????????????????????

Bootstrap的使用一般有两种方法。一种是引用在线的Bootstrap的样式，一种是将Bootstrap下载到本地进行引用。

引用在线样式：

引用在线样式的好处就是不用本地安装Bootstrap，也是不用考虑引用时的路径问题。缺点是担心性能问题，一旦在线样式挂了，那么自己的网站页面样式也就乱掉了。

http://v3.bootcss.com/getting-started/#download

Bootstrap中文网为?Bootstrap?专门构建了自己的免费?CDN?加速服务。

使用方法非常简单：

复制代码

<!DOCTYPE html>
<html lang="en">
  head>
    meta charset="utf-8"title>Hello Bootstrap</<!-- Bootstrap core CSS -->
    link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"body>
        h1>hello Bootstraphtml>

使用本地的Bootstrap

下载Bootstrap到本地进行解压，解压完成，你将得到一个Bootstrap目录，结构如下：

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff

本地调用如下：

="./bootstrap-3.2.0-dist/css/bootstrap.min.css"style type='text/css'> body { background-color: #CCC; } style<link?href="./bootstrap-3.2.0-dist/css/bootstrap.min.css"?rel="stylesheet">??--表示引入当前目录下的Bootstrap样式。

我们多加了一个背景色效果如下：

下面利用Bootstrap的样式编写一个网站出来。

添加导航行栏和登录框?? ????????????????????????????????????????

nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> div ="container"="navbar-header"> button ="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> span ="sr-only">Toggle navigationspan="icon-bar"></buttona ="navbar-brand" href="#">首页a>测试>开发divid="navbar"="navbar-collapse collapse"form ="navbar-form navbar-right"="form"="form-group"> input ="text" placeholder="Email"="form-control"="password"="Password"="submit"="btn btn-success">Sign inform>/.navbar-collapse --> nav 浏览器效果如下：

添加一篇文章????????????????????????????????????????????????????????

    ="jumbotron"='content' ='row-fluid'h2>Hello,world!p ="blog-post-meta">January 1,2014 by >Markp>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.><="btn btn-primary btn-lg"="button">阅读全文 &raquo; 
 添加底部介绍与友情链接????????????????????????????????????????????
 ="col-sm-3 col-sm-offset-1 blog-sidebar"="sidebar-module sidebar-module-inset"h4>About>Etiam porta em>sem malesuada magna> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.="sidebar-module">Elsewhereol ="list-unstyled"li>博客园>开源中国>infoqol 最终效果如下：
  
  完整代码： 
  
  ? 
  View Code 
 
 样式的继承??????????????????????????????????????????????????????????
  你一定很好奇，这些样式是怎么玩的？如何你细心的就会留意到div?标签的class属性。
  通过class的属性值去继承Bootstrap的样式定义，那么就达到了某种样式效果。 
 xmlns="http://www.w3.org/1999/xhtml"> 
> 
    ="utf-8" /> 
    >自定义样式自定义侧边栏样式 
        .divcss5-rightwidth320px; height120pxborder1px solid #F00floatrightclass属性引用自定义样式--> 
    ="divcss5-right">友情链接：>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!