[udemy]WebDevelopment_Bootstrap,Templates

Bootstrap Introduction

Bootstrap 相对于CSS, JS

就像PPT模板相对于PPT

说白了就是前人已经做好了(pre-build)很多模板，你可以直接拿来主义

Bootstarp 4

Two ways to use it

1. download

you will see a bunch of files

Bootstarp.min.css means they are minified

2. CDN(Content Delivery Network)

we can directly copy this code into index.html

Because JS would be read after CSS, it be put in the bottom of body part

 <!DOCTYPE html>

 <html>

 <head>

     <title>Bootstrap</title>

     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

 </head>

 <body>

     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

 </body>

 </html>

next step,

if we would like to add Navbar in our website

copy the code into your html file directly

 <!DOCTYPE html>

 <html>

 <head>

     <title>Bootstrap</title>

     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

 </head>

 <body>

 <nav class="navbar navbar-expand-lg navbar-light bg-light">

   <a class="navbar-brand" href="#">Navbar</a>

   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

     <span class="navbar-toggler-icon"></span>

   </button>

   <div class="collapse navbar-collapse" id="navbarSupportedContent">

     <ul class="navbar-nav mr-auto">

       <li class="nav-item active">

         <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

       </li>

       <li class="nav-item">

         <a class="nav-link" href="#">Link</a>

       </li>

       <li class="nav-item dropdown">

         <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

           Dropdown

         </a>

         <div class="dropdown-menu" aria-labelledby="navbarDropdown">

           <a class="dropdown-item" href="#">Action</a>

           <a class="dropdown-item" href="#">Another action</a>

           <div class="dropdown-divider"></div>

           <a class="dropdown-item" href="#">Something else here</a>

         </div>

       </li>

       <li class="nav-item">

         <a class="nav-link disabled" href="#">Disabled</a>

       </li>

     </ul>

     <form class="form-inline my-2 my-lg-0">

       <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">

       <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

     </form>

   </div>

 </nav>

     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

 </body>

 </html>

Then beautiful Navbar is shown

Use the same step,

we can add Jumbotron ['dʒʌmbəutrɔn] n. 电视机的超大屏幕

and modal

You may notice that when we click the button

we have our own modal, which proves this is JS

How can we add our own custom look ?

For example, I would like to change Launch demo modal button's color

We can search buttons code, and edit the Launch demo modal's button code

Or we can change it in the style.css file

.btn-success{

    background-color: orange;

}

Bootstrap 4 Grid

This is the reason why bootstrap is so popular.

Boootstrap allowed us to create very responsive website using these ideas of columns

   <div class="container">

     <div class="row">

         <div class="col col-sm-6" >

           1 of 2

         </div>

         <div class="col col-sm-3" >

           2 of 2

         </div>

          </div>

   </div>

.col{

    background-color: grey;

    border: 2px solid black;

}

The web site would be shown like this,

Bootstrap has the idea of a grid system and this grid system has 12 lines

col-sm-6 : 1 of 2 part covers 6/12

col-sm-3 : 2 of 2 part covers 3/12

   <div class="container">

     <div class="row">

         <div class="col col-sm-6" >

           1 of 2

         </div>

         <div class="col col-sm-3" >

           2 of 2

         </div>

         <div class="col col-sm-3" >

           Extra

         </div>

          </div>

   </div>

The web site would be shown like this,

But what if the sum of these three is over 12 ?

  <div class="container">

     <div class="row">

         <div class="col col-sm-6" >

           1 of 2

         </div>

         <div class="col col-sm-3" >

           2 of 2

         </div>

         <div class="col col-sm-4" >

           Extra

         </div>

          </div>

   </div>

The web site would be shown like this,

   <div class="container">

     <div class="row">

         <div class="col col-sm-6 col-md-12 col-lg-12" >

           1 of 2

         </div>

         <div class="col col-sm-3 col-md-6 col-lg-12" >

           2 of 2

         </div>

         <div class="col col-sm-4 col-md-6 col-lg-12" >

           Extra

         </div>

          </div>

   </div>

If the size of the window is medium then I want the whole 12 grid system to the first div, 6/12 gird to the second, 6/12 to the third.

Same logic as col-lg-12.

This is how you can create really responsive websites. And the biggest selling feature of bootstrap is that it make sure our website look good no matter what screen size.

Putting Your Website Online

github.io

DEVELOPER FUNDAMENTALS:IV

Try to use free templates:

Animate.css (https://daneden.github.io/animate.css/)

So it is very rare when build something from scratch

Create-tim(https://www.creative-tim.com/)

有已经搭好的web模板

[udemy]WebDevelopment_Bootstrap,Templates的更多相关文章

解决Windows版Git出现templates not found的问题
环境: Win10 x64 Git windows客户端(下载自 https://git-scm.com/) SourceTree 1.9.6.1(使用系统安装的Git,而非SourceTree内嵌的 ...
[c++] Templates
Template是编译时多态.所有的模板都是在编译时产生对应的代码,它没有面向对象中的虚表,无法实现动态多态. Function Template A function template is a p ...
webstrom live templates
javascript: 在live templates底部要选择javascript # $('#$END$') $ $($end$) $bd $(document.body) $d $(docume ...
Myeclipse Templates详解(一) —— Java模板基础
目录 Templates简介 MyEclipse自带Templates详解新建Template 自定义Template 因为自己比较懒,尤其是对敲重复代码比较厌恶,所以经常喜欢用快捷键和模板,Mye ...
Using FreeMarker templates (FTL)- Tutorial
Lars Vogel, (c) 2012, 2016 vogella GmbHVersion 1.4,06.10.2016 Table of Contents 1. Introduction to F ...
juqery模板 Templates
现在已经有了许多JavaScript的解决方案模板,从这方面说,标准化的模板解决方案必然是大势所趋.在本节中,我们向你简要描述四个最流行最有趣的模板.现有的模板解决方案能解决什么?那些特色在jQuer ...
django TEMPLATES
?: (1_8.W001) The standalone TEMPLATE_* settings were deprecated in Django 1.8 and the TEMPLATES dic ...
django复习笔记3:urls/views/templates三板斧
0.先看看文件结构 mysite/ mysite/ ├── __pycache__ │ └── manage.cpython-.pyc ├── blog │ ├── __init__.py │ ...
Effective C++ -----条款44：将与参数无关的代码抽离templates
Templates生成多个classes和多个函数,所以任何template代码都不该与某个造成膨胀的template参数产生相依关系. 因非类型模板参数(non-type template para ...

随机推荐

cuteftp不能连接虚拟机的解决方法
使用cuteftp在PC和虚拟机之间传送文件工具/原料 PC机中装有cuteftp软件和虚拟机注意事项首先要确保虚拟机中的ftp软件已安装,如未安装可以用如下命令安装 sudo apt-get ...
web 安全相关（一）：Log注入(转)
在网上有很多关于安全的文章,但是 OWASP 开发指导涵盖了几乎所有关于Web站点安全的东西.(注:OWASP(开放Web应用安全项目- Open Web Application Security ...
我的AOP那点事儿--1
题记:一段时间以来一直想整理下关于AOP的知识,之前一直停留在会怎么使用AOP,关于AOP的深入点儿的知识就不知所以然了,正好项目上刚好用到需要用AOP实现的功能,所以找个时间统一整理下就很有必要了. ...
graphql cli 开发graphql api flow
作用代码生成 schema 处理脚手架应用创建项目管理安装cli npm install -g graphql-cli 初始化项目(使用.graphqlconfig管理) 以下为demo de ...
随笔教程：FastAdmin 如何打开新的标签页
随笔教程:FastAdmin 如何打开新的标签页 FastAdmin 有弹窗功能有时候不能胜任所有情况,有一定局限性. 那这时候就需要在新的标签页打开页面. 在 FastAdmin 中打新的标签页很简 ...
php中隐形字符65279（utf-8的BOM头）问题和fwrite写入文件bom头导致的乱码问题解决
php中隐形字符65279(utf-8的BOM头)问题今天在CSDN看到一个php输出空白隐形字符65279的问题,在网上找了下,发下这个65279字符是php用来标记文件是utf-8编码的,输出 ...
Dubbo 基础教程
原文地址:Dubbo 基础教程博客地址:http://www.extlight.com 一.前言当服务越来越多时,容量的评估,小服务资源的浪费等问题逐渐显现,此时需要增加一个调度中心基于访问压力实 ...
httpd编译安装
Apache安装问题:configure: error: APR not found . Please read the documentation: Linux上安装Apache时,编译出现错误: ...
bzoj4576 [Usaco2016 Open]262144
题目大意: 给出n个数a[1..n],n<=262144,a[i]<=40,相邻且相同的数可以合并成一个并将值加1,问能获得的最大数是多少用一个双向链表维护原数列,每个节点记录此节点对应 ...
[C#][Log4Net] 配置
<?xml version="1.0" encoding="utf-8" ?> <configuration> <configSe ...

[udemy]WebDevelopment_Bootstrap,Templates

[udemy]WebDevelopment_Bootstrap,Templates的更多相关文章

随机推荐

热门专题