Tip:
Highlight text to annotate it
X
>> NEEL MEHTA: Jadi khabar kepada semua orang yang menonton di sini,
atau menonton dalam talian, atau dari jauh.
Nama saya Neel, ini adalah CS50.
Dan seminar hari ini adalah responsif Web Design dengan Bootstrap.
Ia adalah satu perkara yang yang sangat dekat dengan hati saya.
Mudah-mudahan, ia akan menjadi dekat di hati anda
dan juga pada akhir seminar itu.
Jadi Bootstrap.
Berapa ramai daripada anda melakukan apa-apa jenis pembangunan web sebelum ini?
Jumlah yang baik?
Sedikit.
>> Jadi Bootstrap adalah dunia yang paling , rangka kerja depan popular.
Ia digunakan oleh- saya telah memilih satu beberapa websites-- rawak
Lyft, Newsweek, dan Vogue.
Ia digunakan oleh beberapa laman web.
Ia adalah satu rangka kerja reka bentuk web yang akan membolehkan anda membuat laman web anda
kedua-dua cantik dan responsif.
Dan saya akan pergi ke ini dua konsep di sini.
Indah.
Jadi, anda mempunyai laman web biasa pada kiri, yang dibuat dengan hanya HTML.
Anda telah belajar HTML dalam kelas dan dalam seksyen panjang lebar.
Bootstrap adalah satu cara untuk membuat laman web anda indah.
Anda boleh mengambil apa yang di sebelah kiri skrin anda
dan mengubahnya menjadi apa yang di sebelah kanan skrin anda dengan sangat,
sangat, kod yang sangat sedikit.
>> Anda mendapatkan butang biru yang bagus, anda akan mendapat mewah, tepi bulat pada skrin,
anda mendapat paparan senarai, anda akan mendapat kad, dan sebagainya dengan sedikit kod.
Ada sebenarnya tidak CSS yang anda perlu menulis sendiri.
Jadi Bootstrap membolehkan anda mempunyai ini CSS pra-dibina
komponen yang anda boleh meletakkan di dalam laman web anda
untuk membuat ia kelihatan cantik tanpa sangat banyak kerja sendiri.
Ia benar-benar satu bootstrap, titik permulaan,
untuk pengembaraan pembangunan web anda.
Dan setelah anda hanya mengejek sebuah laman web,
ia adalah satu tempat yang sangat baik untuk memulakan.
Anda boleh mendapatkan laman web yang baik mencari dengan sangat, kerja-kerja yang sangat sedikit.
Dan sesungguhnya, kita akan untuk melakukan ini diri kita sendiri
dalam perjalanan seperti lima minutes-- masa 10 minit.
Jadi ia agak mudah untuk membuat beberapa laman web yang menarik.
Jadi itulah bahagian pertama.
>> Yang kedua part-- responsif.
People, pada masa kini, tidak hanya mengakses web pada komputer riba mereka.
Sebenarnya, pada 2014, lebih ramai orang mengakses web melalui peranti mudah alih,
seperti telefon, atau tablet, atau perkhidmatan, atau sebagainya dari laman web.
Dan laman web secara tradisinya direka dengan komputer riba atau komputer meja
dalam fikiran.
Dan sebagainya dalam laman web yang sering tidak dengan baik sesuai dengan telefon anda.
Jika anda pernah melawat harvard.edu pada telefon anda,
ia adalah jenis yang menjengkelkan pengalaman, bukan?
Ini kerana ia tidak responsif.
Kami cuba untuk membuat laman web yang responsif,
yang bertindak balas dengan saiz skrin rakyat.
>> Jadi, jika ia telefon, ia akan pergi pada telefon.
Jika ia tablet, ia adalah akan pergi pada tablet.
Ia menyesuaikan untuk dipadankan dengan skrin yang sedang digunakan.
Dan sebagainya Bootstrap juga menyediakan beberapa sangat, utiliti yang sangat berguna untuk itu.
Dan kita akan membincangkan itu juga.
Jadi sekali lagi, terdapat dua bahagian untuk Bootstrap-- indah dan bertanggungjawab.
Kami akan bercakap tentang mereka.
Pertama, cantik.
Dan kemudian responsif.
>> Jadi semua kod yang kami akan bercakap tentang today--
kita akan mempunyai banyak contoh, banyak cabaran, dan sebagainya pada-- ia
semua tinggal di laman web ini di sini.
Slaid ini adalah apa yang kami hantar.
Jadi, jika anda berada di sini, anda boleh berasa percuma untuk tidak perlu menulis bahawa ke bawah.
Dan jika anda menonton dari jauh, berasa percuma menarik ini pada komputer anda
juga.
Anda mungkin akan memerlukannya semasa perjalanan seminar ini.
>> Jadi, kita akan menggunakan laman web dipanggil CodePen,
yang merupakan pengekodan kerjasama alam sekitar, dalam seminar ini.
Dan CodePen-- dan saya akan menunjukkan kepada anda di sini sebenar fast--
ia membolehkan anda untuk menulis HTML secara kolaboratif.
Saya boleh menulis, saya boleh hantar ke anda semua, anda semua boleh mengeditnya.
Walaupun anda berada jauh, anda masih boleh mengaksesnya dengan cara itu.
Anda boleh menaip kod HTML di bahagian atas dan ia akan secara automatik
ditukar ke dalam laman web di bahagian bawah.
Jadi ia adalah satu cara untuk anda untuk cepat mencuba kod
tanpa perlu melakukan apa-apa jenis barangan pada IDE anda, atau laman web anda sendiri,
atau apa sahaja.
>> Jadi teruskan dan tarik ini laman web, jika anda berada jauh
atau jika anda berada di sini, terutamanya jika anda jauh.
is.gd/cs50boostrap.
Tiada topi, tiada garis bawah, tidak ada apa-apa.
Maka orang-orang di antara kamu yang di sini, hanya memberi saya ibu jari
apabila anda telah ditarik up yang laman web.
Baik?
>> PENONTON: Ya.
>> NEEL MEHTA: Oleh itu, kita akan mendapat itu hanya dalam satu saat.
Jadi pertama, kita akan dapat, bagaimana anda membuat laman web anda cantik?
Kita akan belajar bagaimana untuk mengambil membosankan, HTML lama, seperti saya tunjukkan sebelum ini,
dan menghidupkan itu ke dalam komponen benar-benar baik,
seperti widget yang bagus, bagus, berwarna butang, dan label, dan jadual,
dan semua, menggunakan Bootstrap.
Jadi, jika kita semua boleh pergi ke CodePen bahawa anda hanya ditarik ke atas.
Ia sepatutnya kelihatan sedikit seperti ini.
Adakah ia kelihatan seperti ini untuk semua orang?
>> PENONTON: Ya.
>> NEEL MEHTA: Jika anda jauh, ia sepatutnya kelihatan seperti ini juga.
Jika tidak, saya akan menunjukkan kepada anda bagaimana tidak lama lagi anda boleh mendapatkan ia kelihatan seperti ini
di bahagian depan video.
Jadi di sini kita telah menulis HTML yang sangat asas,
seperti jenis yang anda telah telah menggunakan di dalam kelas.
Ia agak asas.
Tanpa perkhidmatan lebih.
Dan kami mempunyai beberapa barangan.
Kami telah mereka bentuk yang sangat, sangat asas memulakan
memanggil Yalp! yang anda boleh mencari restoran di kawasan itu,
dan mencari ulasan, dan arahan pada semua daripada mereka.
Ia adalah satu konsep yang sangat baik.
Ia tidak pernah dilakukan sebelum ini.
Ia adalah satu nama yang sangat unik juga.
>> Jadi apa yang kita akan cuba lakukan adalah membantu pemilik
daripada Yalp! membuat laman web beliau kelihatan benar-benar, benar-benar sejuk.
Jadi untuk permulaan, pemilik Yalp! telah membuat carian sedikit
kotak, dan butang kecil, dan kemudian mungkin sedikit
kawasan yang diserlahkan untuk diserlahkan restoran, dan kemudian
senarai restoran yang lain yang berada di dalam kawasan itu.
Oleh itu, kita hanya boleh pergi melalui Kod HTML puasa sebenar.
Bagaimanakah selesanya anda semua dengan HTML?
Kami telah melakukan sedikit bahagian dan juga di dalam kelas.
Yang baik?
>> Jadi hanya sebagai recap yang, HTML adalah tentang mempunyai
tag atau unsur-unsur yang memberitahu komputer bagaimana untuk meletakkan laman web.
Jadi h1 ini sini-- mula h1, Selamat datang untuk Yalp !, akhir h1-- memberitahu komputer,
menarik tandukan besar ia kata, Selamat datang ke Yalp!
di dalam sana.
Kami juga mempunyai bentuk.
Kita boleh input seperti ini, input teks, yang akan membuat sebagai kotak teks
anda menulis dalam.
Anda juga mempunyai butang.
Anda mendapatkan yang bagus, butang diklik.
Ia tidak berbuat apa-apa hak sekarang, tetapi anda mendapat butang.
Anda boleh mempunyai divs, atau pembahagi, untuk memecahkan halaman anda ke dalam pelbagai kumpulan.
>> Anda boleh mempunyai perenggan, anda mempunyai butang.
Jika anda mempunyai perenggan, kemudian anda mempunyai senarai tidak tertib, ul,
dan senarai dalam itu, li.
Jadi ini adalah sangat asas blok binaan bagi sebuah laman web.
Dan sesungguhnya, cukup banyak setiap laman web yang anda lihat
akan dibina menggunakan alat-alat yang sama.
Sudah tentu, mereka tidak semua kelihatan buruk ini kerana kami
akan rempah ia sedikit.
Jadi mari kita ini HTML lama membosankan dan permulaan mengubah ke dalam laman web yang indah
bahawa kita hanya melihat pasangan minit yang lalu.
>> Oleh itu, marilah kita mulakan sangat mudah.
Oleh itu, kita mempunyai butang ini di sini.
Dalam Bootstrap, seperti yang kita lihat, kita boleh mempunyai, cantik, butang yang bagus biru.
Dan itu dilakukan tidak dengan melakukan CSS peribadi.
Tidak ada CSS peribadi di sini.
Itu dilakukan dengan menambah kelas kepada unsur-unsur HTML anda.
Jika anda telah mencuba kelas, atau hrefs, atau sauh, atau jenis = "text" untuk inputs--
Elemen HTML boleh mempunyai sifat-sifat ini.
Mereka boleh mempunyai maklumat tambahan yang mungkin anda berikan kepada mereka.
>> Dan sebagainya, dalam kes ini, kelas-kelas adalah atribut.
Jadi, anda sedang menulis, butang class = sesuatu di dalam rentetan.
Dan sifat yang akan berkata kepada para komputer, ini tidak apa-apa, butang lama.
Ia adalah satu butang yang ada di kelas ini butang.
Dan sebagainya Bootstrap, jika anda memberikan gaya tertentu pada unsur anda,
ia akan menarik dengan cara yang tertentu.
Jadi saya menulis "btn btn-rendah.
btn sebagai singkatan untuk butang.
Anda akan melihat sekarang bahawa butang hodoh saya menjadi
ke dalam, cantik, butang yang bagus biru.
Ia kelihatan sangat bagus apabila kita klik padanya.
>> Dan jadi apa yang berlaku ialah kita mempunyai kelas btn dan kelas btn-sekolah rendah
pada unsur kami.
Dan Bootstrap akan masuk dan berkata, OK, saya tahu bahawa terdapat dua kelas.
Apa-apa unsur yang mempunyai kedua-dua kelas gelanggang hendaklah seperti ini.
Jadi itulah teras bagaimana anda melampirkan gaya untuk unsur-unsur dalam Bootstrap.
Anda hanya melampirkan kelas untuk mereka dan ia akan berat keluar jika difikirkan perlu.
Jadi di sini adalah contoh yang lain.
Dalam input ini, kita boleh menambah a class = "bentuk-kawalan".
Dan saya akan menunjukkan tidak lama lagi di mana anda boleh mengetahui apa kelas
disediakan setiap jenis unsur.
Tetapi kelas bahawa kita hanya ditambah mempunyai bagus, sudut bulat,
ia mempunyai padding yang baik, ia mempunyai yang bagus, cahaya biru kepadanya.
>> Kita juga boleh pergi ke dalam borang ini.
Dan class = "bentuk-baris", yang akan membuat bentuk, kerana anda bayangkan, sebaris.
Jadi ia kelihatan sedikit lebih seperti apa yang kita ada sebelum ini sudah.
Jadi sebelum kita pergi untuk gaya yang lain halaman, sebarang soalan mengenai apa yang kita
lakukan?
Kami kelas hanya dilampirkan untuk pelbagai elemen kami.
Dan saya akan menunjukkan kepada anda kemudian bagaimana anda boleh memikirkan apa kelas disediakan.
Kami dilampirkan kelas yang mempunyai gaya tertentu.
Dan itu memberitahu pelayar bagaimana untuk susun atur halaman menggunakan
Gaya disediakan Bootstrap ini.
Sebarang soalan daripada penonton?
>> Baik setakat ini?
Sejuk.
Banyak cabaran dengan Bootstrap hanya
mengetahui apa komponen adalah yang ada dan bagaimana anda menggunakannya.
Dan yang semua belajar yang mempunyai pengalaman dan juga
melalui membaca dokumentasi, yang kita akan bercakap tentang tidak lama lagi.
Jadi kita mempunyai div ini.
Ia hanya satu, perkara membosankan lama.
Kami ingin menekankan ia entah bagaimana.
Jadi dalam Bootstrap, terdapat banyak komponen yang ada.
Dan ini adalah getbootstrap.com.
Ia adalah satu rujukan yang sangat berguna.
Ia mengandungi perkara-perkara like-- di sini adalah cara yang anda lakukan butang.
Dan anda boleh melakukan bar nav, anda boleh label, anda boleh bar kemajuan,
yang boleh anda lakukan kumpulan senarai.
Pada asasnya, ia adalah semua jenis daripada anda mungkin melihat laman web.
>> Berikut adalah satu yang kita akan cuba sekarang.
Ia dipanggil panel.
Jika anda pernah menggunakan Google Sekarang, mereka mempunyai kad.
Atau mana-mana peranti Android mempunyai kad.
Mereka mempunyai kotak putih yang kecil yang mempunyai barangan di dalamnya.
Dan dengan itu kita akan cuba dan jangan bahawa diri kita di sini menggunakan perkara yang
dipanggil panel.
Jadi, jika kita melampirkan class = "Panel rata lalai "untuk div luar kita,
maka kita melampirkan div class = - mari kita hanya menyemak dokumentasi ini.
div class = "rata tajuk" dan kemudian div class = "panel badan".
Sekali lagi, jangan bimbang tentang menghafal kod ini.
Ia boleh didapati dalam talian.
>> Oleh itu, kita melakukan ini dan kini membosankan kami, lama div bertukar menjadi bagus, kad kecil ini.
Ia mempunyai padding yang baik, ia mempunyai sempadan, ia menonjol
dari seluruh halaman, yang agak sejuk.
Jadi mari kita masuk dan menukar Dapatkan ini butang arahan untuk kelihatan bagus.
Siapa di khalayak mahu memberitahu saya apa yang saya boleh lakukan untuk butang
untuk membuat ia kelihatan baik menggunakan Bootstrap?
Ya?
>> PENONTON: Kita boleh menambah kelas.
Dan yang boleh kita lakukan class = "btn btn-utama".
NEEL MEHTA: Ya.
Ada sekumpulan lain warna-warna untuk buttons--
atau bagi apa-apa, untuk perkara itu.
Kita boleh melakukan btn-bahaya dan menjadikannya merah.
Di sana kami pergi.
Kita boleh melakukan btn-kejayaan untuk menjadikannya hijau.
Kita boleh melakukan btn-info-- ada sekumpulan perkara-perkara yang disediakan untuk anda.
Jadi saya mempunyai sedikit cabaran untuk anda sekarang.
Jadi ada satu perkara lagi bahawa saya telah meninggalkan un-gaya.
Ini Restoran Top.
>> Dan kita mahu menggunakan perkara yang dipanggil kumpulan senarai untuk gaya ia.
Jadi cabaran saya kepada anda adalah pergi ke getbootstrap.com--
Saya akan menariknya di sini.
getboostrap.com.
Pergi ke getbootstrap.com, cari bahagian di mana mereka pergi ke kumpulan senarai.
Dan anda akan lihat di sini yang contoh dan kelas yang betul
yang boleh anda gunakan untuk membuat anda senarai ke dalam kumpulan-kumpulan ini senarai yang bagus.
Ini diusahakan contoh contoh-contoh kod, apa
kod yang anda gunakan, apa kod HTML yang anda gunakan, dan apa yang output.
>> Jadi cabaran saya atasmu, pergi getbootstrap.com,
sama ada anda berada di sini atau di rumah, dan untuk mencuba dan menambahkan gaya untuk ul ini
untuk membuat ia kelihatan bagus.
Dan menggunakan gaya kumpulan senarai.
Anda mahu mengambil masa beberapa minit, dan mencari dokumentasi,
cuba kamu ini?
Kerana seperti yang anda lakukan pembangunan web, anda akan sedar banyak kerja anda
akan dapat membaca dokumentasi ini.
Jadi saya fikir ia adalah baik untuk membiasakan diri dengan cara membaca dokumentasi,
bagaimana untuk mencari tahu apa yang di mana, apa kod contoh anda boleh menggunakan,
apa yang anda boleh memanfaatkan.
>> Jadi sekali lagi, getbootstrap.com, pergi ke tab Komponen ini,
dan kemudian tatal ke bawah ke Senarai Kumpulan.
Dan anda akan melihat contoh-contoh kod yang anda boleh gunakan untuk membuat HTML anda patut itu.
Jadi mengambil masa beberapa minit dan cuba dan meneroka sendiri,
sama ada anda berada di sini atau di rumah.
Jika anda berada di rumah, jeda video, mungkin, dan mencubanya sendiri.
Jika anda berada di sini, jika anda pergi ke kami website-- jika anda memuat semula halaman,
anda akan melihat ini di sana.
Ini kod yang sama sahaja menambah gaya baru di sana.
Oleh itu, mengambil beberapa minit.
Beritahu saya apabila anda berasa baik mengenainya atau apabila anda benar-benar hilang.
Bunyi yang baik?
Sejuk.
Pantas mengetepikan bagi anda di rumah, sementara kita menunggu,
jika anda pergi ke laman web yang GitHub bahawa saya meletakkan pasangan slaid yang lalu,
ke arah permulaan video, Saya mempunyai repo GitHub, repositori,
untuk ceramah ini.
Semua contoh-contoh kod yang kami akan bercakap tentang disimpan di sini.
Jadi, jika anda pergi untuk mencabar-1.html, ini semua kod yang kita ada sekarang
pada CodePen kami.
Jadi anda hanya boleh pergi ke hadapan, dan salinan ini, dan tampalkannya dalam CodePen anda sendiri.
Dan dengan cara itu, anda boleh bersaing dengan apa yang kita lakukan di sini.
Jadi halaman ini terbuka serta kita pergi melalui seluruh seminar itu.
Sekali lagi, anda mahu ia kelihatan seperti apa yang anda melihat ke bawah di bahagian bawah skrin anda
sana.
Berasa baik?
Pepejal.
Mari kita menunggu orang lain untuk selesaikan dengan apa yang mereka lakukan.
>> Ya?
>> PENONTON: Katakan yang saya mahu menggunakan Bootstrap di home--
NEEL MEHTA: Ya.
PENONTON: Saya lihat, di laman web, yang Mendapat halaman Bermula.
Mereka memberi saya pilihan Bootstrap, Source Code, atau Sass.
Yang ini yang saya mahu?
>> NEEL MEHTA: Ya.
Jadi persoalannya ialah, bagaimana anda mendapatkan mula menggunakan Bootstrap oleh diri kita sendiri?
Ia hanya berlaku untuk ajaib bekerja di sini.
Jadi, jika kita mempunyai masa pada akhir seminar tersebut,
Saya akan menunjukkan kepada anda bagaimana anda boleh mendapatkannya di laman web anda sendiri.
Seperti di sini, saya telah benar-benar dimasukkan ke dalam beberapa tetapan yang
akan mempunyai ia secara automatik dimuatkan, tetapi saya akan
menunjukkan kepada anda untuk melakukannya dari calar pada laman web anda sendiri.
>> PENONTON: Terima kasih.
>> NEEL MEHTA: Ya.
Soalan yang baik.
Berasa baik?
Berasa baik?
Sejuk.
Jadi siapa yang mahu memberitahu saya bagaimana mereka membuat Perkara ini kelihatan bagus dan Boostrappy?
Apa yang kelas pertama kita menambah ul itu?
PENONTON: class = "senarai kumpulan".
NEEL MEHTA: Ya. senarai-kumpulan.
Dan kemudian apa yang kita melampirkan lis ini?
Orang lain?
PENONTON: Kemudian, selepas itu, class = "senarai kumpulan-item".
>> NEEL MEHTA: Ya.
>> PENONTON: Dan ia adalah sama untuk satu depan.
>> NEEL MEHTA: Kelas li = "senarai kumpulan-item".
Itupun dia.
Kami mempunyai senarai kumpulan baik kita, seperti yang kita jangkakan.
Jadi ada anda pergi.
Dalam 10 minit, kami telah membuat membosankan ini, Yalp lama! Laman
kelihatan bagus dan profesional.
Dan itu hanya permulaan.
Jadi sekarang yang anda rasa baik tentang itu, mari kita
hanya pergi ke depan dan bercakap tentang beberapa lebih komponen yang
mungkin berguna seperti yang anda pergi sepanjang pengembaraan anda.
>> Sudah tentu, ada orang-orang yang banyak di sini.
Dan sekarang bahawa anda telah belajar bagaimana untuk melakukannya kumpulan senarai,
anda cukup banyak boleh mengajar diri anda bagaimana untuk melakukan mana-mana.
Tetapi, sudah tentu, mari kita cuba dan melakukan beberapa lagi diri kita sendiri,
hanya supaya anda mendapatkan rasa untuk bagaimana anda boleh menggunakannya.
Saya hanya akan pergi kepada contoh ini di sini.
Sekali lagi, kod yang saya hanya ditampal di sini boleh didapati di sini.
Jadi berasa bebas untuk menariknya ke atas.
>> Oleh itu, kita telah melalui beberapa contoh-contoh ini.
Oleh itu, kita mempunyai butang, yang kita telah melihat bagaimana untuk melakukannya.
Kita boleh membuat butang yang lebih besar.
Dengan butang class-- ia pergi, btn btn-lg dan btn-default menjadikannya putih.
Jadi ini menjadikan kami lebih besar butang daripada sebaliknya mungkin.
Ia mungkin datang dengan mudah, jika anda mempunyai butang besar atau sesuatu yang hantar.
Kita lihat contoh kumpulan senarai, kita lihat contoh borang.
>> Salah satu yang sangat penting adalah ikon.
Dan ikon adalah cara bagi anda untuk menambah perkara yang menarik, seperti daftar masuk
tanda, atau plus, atau rakan ikon, atau ikon mulakan semula,
atau apa sahaja ke aplikasi web anda.
Jadi sekali lagi, jika kita ke sini, komponen, glyphicons,
adalah ikon yang ada untuk Bootstrap.
Ada satu lengkap senarai semua orang-orang di sini.
Jadi hanya sebagai contoh, mari kita cuba menambah satu.
>> Jadi seperti Facebook, kami cuba untuk untuk mempunyai butang Add Friend.
Mari kita pertama menambah beberapa gaya.
butang class = "btn btn-kejayaan".
Dan kita pergi.
Mari kita menambah icon di sini.
Apa ikon, yang anda fikir, mungkin masuk akal untuk meletakkan di sini?
Anda mungkin telah melihat pada beberapa laman web atau apa sahaja,
tetapi apa yang contoh ikon yang mungkin pergi baik di dalam butang ini?
Jangan ragu untuk menyemak imbas pandangan ini, jika anda memerlukan sebarang inspirasi.
Ada banyak berguna yang boleh didapati di sini.
Ya?
>> PENONTON: Mungkin satu glyphicon pengguna?
NEEL MEHTA: OK.
Satu ini.
Yang cukup baik.
Ya.
Di Facebook, saya fikir ia akan kelihatan sedikit seperti itu.
Jadi di sini adalah bagaimana kita pergi tentang menambah ikon untuk halaman kami.
Kami hanya mempunyai span-- rentang yang merupakan bekas neutral untuk sesuatu.
Div adalah bekas untuk sesuatu, jangka adalah bekas lain.
divs mempunyai rehat talian di sekeliling mereka, rentang tidak.
Jadi ada cara yang berbeza mempunyai bekas generik.
Seperti ia tidak masuk akal untuk meletakkan ia dalam sebuah perenggan atau apa-apa.
Kami telah mendapat untuk meletakkan ia dalam sesuatu walaupun,
jadi kita hanya diletakkan di dalam tempoh masa yang.
Jadi span class = glyphicon glyphicon-pengguna "jangka dekat.
Dan kita kini mempunyai icon dalam butang.
>> Oleh itu, ia tidak kelihatan sama sekali tidak seperti apa yang anda mungkin lihat di facebook.com.
Dan maka ia adalah baik bahawa ini boleh sebenarnya diletakkan di mana-mana sahaja yang anda mahu.
Di bar header anda, dalam kumpulan senarai anda.
Apa-apa sahajalah.
Ia tidak perlu dalam butang.
Jadi, sebagai contoh, saya boleh meletakkan kelas yang sama di sini.
"glyphicon glyphicon-pengguna".
Dan ternyata sama saja.
Jadi ini icons-- anda boleh menggunakan rentang class = "glyphicon glyphicon-apa sahaja".
Dan yang akan membenarkan anda menambah ikon di mana sahaja yang anda mahu.
Dan ikon adalah sangat penting sebahagian daripada membuat lihat laman web
profesional dan dilakukan dengan baik.
Jadi tidak keterlaluan, tetapi ia sering satu perkara yang baik untuk mengetahui.
>> Panel, lagi.
Saya hanya akan melakukan ini sekali lagi sebagai recap yang kerana mereka jenis yang terlibat.
Anda akan melihat bahawa dalam beralih HTML biasa anda
laman web ke dalam Bootstrap-afied laman web, anda akan mempunyai
untuk menambah struktur tambahan ke laman web.
Sebagai contoh, kami mempunyai tambahan divs di sini hanya kerana mereka
yang diperlukan untuk membuat panel.
Jadi hanya menyimpan bahawa dalam fikiran yang anda akan perlu mempunyai struktur tambahan.
Jadi "panel rata lalai".
Mungkin ia adalah rata header.
Saya fikir ia adalah panel-tajuk.
Ya.
Di sana kami pergi.
Jadi, sekali lagi, ada panel kami.
>> Satu perkara lagi yang kita tidak meliputi lagi, jadual.
Jadual, oleh jenis rupa keingkaran hodoh.
Macam ini.
Tetapi jadual ini adalah, sudah tentu, bahagian yang sangat penting
apa yang anda akan lakukan dalam pembangunan web.
Dalam Pset7, sebagai contoh, CS50 Kewangan, yang akan datang tidak lama lagi,
anda akan menggunakan banyak jadual.
Dan banyak web dev menggunakan banyak jadual untuk memaparkan maklumat,
seperti saham, atau skor, atau apa sahaja.
>> Jadi menggayakan jadual sebenarnya sangat mudah.
Anda menambah kelas meja ke meja anda.
Dan, saya dapat berkata, ia kelihatan cukup baik.
Anda boleh melakukan perkara-perkara tambahan, seperti "jadual jadual-berjalur".
Dan anda akan melihat hasilnya di sini.
Anda boleh melakukan jadual-bersempadan.
Ada banyak pilihan yang anda boleh.
Tetapi pada dasarnya, menambah meja, kelas meja,
akan membuat jadual anda kelihatan cukup bagus.
Supaya adalah buruk ringkas beberapa gaya yang lebih penting
dan bahagian-bahagian yang anda akan perlu menggunakan untuk Bootstrap.
Jadi saya berfikir bahawa balutan sebahagian yang indah.
Sebarang pertanyaan sekarang tentang bagaimana untuk membuat laman web anda cantik?
Bagaimana anda boleh menggunakan komponen untuk keuntungan anda?
Berasa baik?
Ya?
PENONTON: Mungkin ini adalah soalan bodoh,
tetapi anda boleh menggunakan Bootstrap di Wikipedia?
Jika anda menyunting laman Wikipedia?
NEEL MEHTA: Ya.
Jadi persoalannya adalah, Saya menyunting laman Wikipedia,
Saya boleh termasuk gaya Bootstrap di sana?
>> PENONTON: Ya.
>> NEEL MEHTA: Dan sebagainya Bootstrap adalah pada dasarnya lembaran gaya CSS besar.
Satu lembaran gaya CSS hanya berkata, setiap kali Saya mempunyai kelas ini, melampirkan gaya ini.
Maka lembaran gaya CSS untuk Bootstrap akan menjadi sesuatu seperti .btn,
kelas butang, akan mendapatkan seperti sempadan sudut bulat atau apa sahaja.
Jadi, pada asasnya, Bootstrap ia hanya sekumpulan kelas dan mempunyai banyak gaya
ditetapkan bagi kelas-kelas.
Jadi selagi anda mempunyai CSS itu, ini senarai peraturan dalam halaman anda,
anda akan mendapat gaya Bootstrap.
Iaitu, sudah tentu, bergantung pada mempunyai gaya Bootstrap dalam halaman anda
bermula dengan.
>> Dan sebagainya dalam Wikipedia, anda mungkin tidak boleh
berbuat demikian kerana Wikipedia tidak mempunyai Bootstrap di dalamnya.
Tetapi jika ia tidak mempunyai Bootstrap, anda mungkin boleh melakukannya.
Dan jika anda mahu, anda boleh termasuk, tetapi itu mungkin
memecahkan susun atur yang sedia ada halaman.
Tetapi soalan yang sangat baik.
Anda boleh menggunakan Bootstrap di mana sahaja ia dimasukkan,
tetapi ia tidak dibina dalam secara lalai.
>> PENONTON: Terima kasih.
>> NEEL MEHTA: Ya.
Apa-apa soalan lagi?
Ya.
Jadi sama ada anda berada di sini atau di rumah, hanya ingat getboostrap.com-- lagi,
getboostrap.com-- adalah rakan anda.
Setiap kali anda menggunakan Bootstrap, ini akan memberikan anda
arahan mengenai bagaimana untuk mendapatkan bermula, bagaimana untuk menggunakan komponen.
Ada beberapa JavaScript sejuk plug-in yang kita tidak akan pergi ke sini,
tetapi ia bernilai check-keluar juga.
Jadi ini adalah rakan anda.
Ia hanya penting untuk mendapatkan digunakan untuk bagaimana untuk menggunakan ini.
>> Jadi mari kita bersembang sedikit tentang membuat laman web responsif.
Jadi seperti yang saya katakan sebelum ini, orang yang digunakan komputer riba mereka, mereka menggunakan telefon mereka.
Dan seperti yang anda mungkin bayangkan, ini adalah saiz skrin yang sangat berbeza daripada itu.
Dan supaya laman web yang sama yang kelihatan baik pada telefon saya
tidak akan kelihatan baik, semestinya, pada komputer.
Jadi apa yang anda perlu lakukan adalah membuat laman web anda menyesuaikan diri.
Ia perlu menyesuaikan diri dengan pelbagai saiz skrin bahawa itu pada.
>> Ia perlu dikatakan, saya tahu saya pada komputer, komputer riba yang besar, saya perlu berkembang.
Saya tahu saya pada telefon, saya perlu mengecut.
Dan sebagainya Bootstrap menyediakan beberapa sangat, alat yang sangat berguna untuk melakukan ini.
Jadi Bootstrap mari kita rehat anda sebuah laman web kepada 12 tiang.
Anda boleh membuat baris dan mempunyai 12 tiang.
Dan anda boleh partition orang-orang yang anda mahu.
Anda boleh mempunyai satu, perkara yang besar, iaitu 12 tiang luas.
Anda boleh mempunyai dua perkara yang enam setiap satu.
Anda boleh melakukan satu perkara yang empat, satu yang dua, atau satu yang enam.
Anda boleh melakukan tiga, tiga, tiga, tiga.
Anda boleh melakukan apa sahaja pecahan yang anda inginkan.
>> Jadi mungkin laman web anda perlu mempunyai lajur kiri itulah satu pertiga lebar.
Supaya akan menjadi empat tiang luas dan seluruh halaman
akan menjadi lapan tiang luas.
Jadi ini adalah satu contoh.
Mari kita tarik ke atas contoh yang lain.
>> PENONTON: Adakah ia sentiasa perlu yang lebih berpecah?
Bolehkah ia menjadi tujuh, lima berpecah?
>> NEEL MEHTA: Ya.
Ia boleh menjadi tujuh, lima.
Ya.
Selagi ia menambahkan kepada 12, ia adalah baik.
Jadi mari kita pergi ke sini.
Sekali lagi, kod yang di sini juga boleh didapati di sini,
di bawah contoh responsif.
Jadi saya hanya ditarik ke atas beberapa contoh kod responsif di sini.
Jadi, anda melakukan ini dengan menggunakan perkara yang dipanggil berturut-turut.
Row merupakan kelas yang lain.
Ia gaya lain anda menambah ke anda divs untuk membuat mereka komponen mereka sendiri.
>> Jadi, anda berkata, div class = "berturut-turut" untuk membuat berturut-turut,
untuk memberi diri anda 12 tiang ruang.
Dan kemudian anda masukkan ke dalam ruangan itu.
Jadi di sini kita col-xs-6.
Jangan bimbang tentang xs.
Kami akan bercakap kira-kira dalam sekejap.
Tetapi pada dasarnya, kita mempunyai satu perkara yang enam luas.
Kami memanggilnya kiri.
Dan supaya kotak di sebelah kiri di sini.
Kami ada satu perkara yang enam daripada 12 tiang luas.
Dan orang yang berada di sebelah kanan.
>> juga hanya memberikan jenama div anda mengisinya kelabu.
Jadi itu hanya supaya kita boleh melihat bahawa mereka berbeza.
Dan hal ini contoh pertama.
Ia adalah satu contoh yang sangat mudah bagaimana anda akan menggunakan baris dan lajur yang sukar ditandingi.
Anda menentukan berturut-turut menggunakan class = "berturut-turut".
Dan kemudian anda melakukan class = "col-xs-6" melakukan separuh, "col-xs-6" untuk melakukan separuh yang lain.
Berikut adalah contoh yang lebih rumit.
Mari kita lihat Tiny, Besar, Selebihnya satu.
>> Kita boleh membuat kecil dua lajur lebar, kita boleh membuat besar enam tiang yang luas,
dan Selebihnya empat tiang luas.
Yang menambah sehingga 12.
Dan sebagainya ini berakhir merangkumi lebar halaman.
Sekali lagi, kita mempunyai berturut-turut di luar.
Kemudian kita mempunyai div class = "col-xs-2" dan kemudian 6, dan kemudian 4.
Dan yang akan menyediakan struktur untuk kita.
Dan supaya kita boleh meletakkan apa sahaja palang pintu yang kita mahu di dalam sini.
Daripada kecil, kita boleh meletakkan butang.
butang class = "btn btn-utama".
Dan sebagainya notis bahawa butang kami tidak mengambil semua lebar,
tetapi sekurang-kurangnya ia terhad itu ruang yang banyak.
>> Jadi, itu semua baik dan baik.
Jadi, sekarang kita boleh memecahkan web kami halaman menjadi ketulan, lebar bijak.
Kita boleh mengatakan kita mahu mempunyai kiri yang ruang, dan ruang yang betul, dan sebagainya.
Tetapi kita tidak pergi ke atas bagaimana anda membuat ia responsif.
Dan sebagainya Bootstrap mari kita buat itu juga.
Ia mempunyai perkara-perkara ini dipanggil titik putus.
Oleh itu, ia mempunyai cara untuk mengetahui sama ada anda berada di komputer riba, anda berada di tablet,
anda berada di mendatar telefon, atau anda dalam panggilan menegak.
Ia tahu saiz skrin.
Dan memecah ini ke dalam empat kategori-- besar atau lg, iaitu komputer riba, biasanya.
md atau sederhana, yang merupakan tablet.
mp, kecil.
Atau xs, tambahan kecil.
Dan setelah anda tentukan lajur, kamu berkata,
ia harus enam tiang luas pada peranti kecil tambahan.
Itulah sebabnya kita lakukan col-xs-6.
Kita katakan bahawa yang sepatutnya enam daripada 12 tiang luas
pada peranti kecil tambahan.
Dan jika ia apa-apa yang lebih besar, kita akan hanya lalai untuk menggunakan saiz kecil tambahan.
Jika apa-apa yang lebih besar daripada tambahan yang kecil, ia akan menjadi enam luas.
Dan supaya kita boleh memanfaatkan ini untuk membuat tiang kami
mengambil jumlah yang berbeza tiang berdasarkan saiz skrin.
Mari kita pergi ke saiz semula responsif ini.
Jadi kita mempunyai ruangan kami.
Dan ia berkata, "col-lg-6 col-xs-12".
Jadi memandangkan apa yang anda tahu setakat ini, apa yang anda
fikir akan berlaku pada skrin besar?
Well, ia adalah jenis memberi laluan, tetapi apa yang dilakukan
anda fikir ia akan melihat suka pada skrin besar?
Dan mengapa?
>> PENONTON: Adakah yang pada skrin besar, ia adalah
akan mengambil hanya bahagian ruang yang penuh?
Seperti separuh daripada itu, saya rasa?
>> NEEL MEHTA: Ya.
>> PENONTON: Dan pada yang lebih kecil skrin, ia akan
untuk mengambil seluruh skrin, 12.
NEEL MEHTA: Ya.
Betul.
Jadi, sebagai contoh, mari kita hanya melihat di sini.
Ya.
Maka pada apa-apa yang lg atau bigger-- supaya komputer saya berlaku
akan lg kerana ia adalah cantik wide-- ia akan membuat
ia berdampingan kerana ia col-lg-6.
Jadi kerana ia pada yang besar, ia menjadikannya enam tiang yang luas dan enam tiang luas.
Mari kita lihat apa yang akan berlaku jika saya membuat ini ke dalam satu yang lebih kecil.
Saya hanya akan ke skrin un penuh ini.
Dan saya akan mengecut skrin.
Saya akan mengecut skrin, jadi ia kelihatan seperti saya pada peranti yang lebih kecil.
Jadi saya akan mengecut ia seperti ini.
>> Dan Voilà.
Ia kini disusun kerana sekarang kita telah pergi
dari supaya- besar ini mungkin saiz skrin kecil tambahan.
Dan sekarang ia berkata, OK, kita tidak dalam besar, kita berada di tanah kecil tambahan.
Oleh itu, kita akan menggunakan saiz kecil tambahan.
Dan kita akan xs-12, xs-12.
Jadi ia akan disusun.
Dan hanya notis bahawa terdapat perkara yang dipanggil titik putus a.
Titik putus A adalah di mana anda membuat peralihan
dari tambahan kecil untuk kecil, kecil ke besar, dan sebagainya.
>> Jadi hanya melihat bahawa kerana saya slaid ini keluar, akhirnya, anda akan mendapat ke titik
di mana mereka akan melompat menjadi sebelah menyebelah.
Itupun dia.
Jadi ada titik pecah yang betul di sana.
Oleh itu, kita boleh membuat ia lebih rumit.
Sekarang kita boleh mengatakan, ini perkara yang perlu menjadi empat lebar.
Iaitu, mereka perlu mengambil kira-kira satu pertiga
ucapan pada peranti yang sangat besar.
Pada peranti sederhana, ia perlu mengambil setengah skrin kerana ia md-6.
Pada alat yang sangat kecil, ia perlu mengambil masa sehingga 12.
Dan hal ini kelihatan agak semula jadi.
Mari kita mencuba ini untuk diri kita sendiri.
>> Maka pada skrin besar, mereka empat lebar.
Mengecut ia sedikit.
Dan mereka kini enam luas.
Jadi ini adalah enam, enam, enam.
Mengecut ia lebih dan kemudian mereka akan benar-benar disusun.
Jadi ini, sebagai contoh, masuk akal jika anda menghadapi kad, seperti kad berita,
sebagai contoh, di mana jika ia pada skrin yang sangat besar,
ia OK jika anda mempunyai beberapa sebelah menyebelah kerana mereka semua akan mendapat ruang yang cukup.
Tetapi mereka perlu mempunyai ruang yang cukup.
Maka pada skrin yang lebih kecil, anda akan mahu untuk memberi mereka
lebih banyak ruang, berkadaran, halaman.
>> Jadi sebagai contoh dunia sebenar, katakan kita ada Twitter.
Dan kita mempunyai kotak teks, jadi anda boleh tweet di sebelah.
Dan kita mempunyai senarai tren topik di sebelah kanan.
Maka pada skrin besar, kita harus telah mereka menjadi sebelah menyebelah,
supaya anda boleh melihat mereka pada gelas.
Tetapi pada skrin yang lebih kecil, yang patut kita lakukan 12 dan 12,
supaya topik trending adalah di bawah kawasan tweet.
Oleh kerana kawasan tweet adalah Perkara utama dan pada skrin kecil,
topik trending tidak perkara yang agak banyak.
Dan supaya kita meletakkan mereka tepat di bawah, jadi bahawa kedua-duanya boleh mendapatkan ruang yang cukup.
Akal setakat ini?
>> PENONTON: Ya.
>> NEEL MEHTA: pepejal.
Jadi itu sahaja contoh-contoh yang saya ada di sini.
Mari kita mencuba dan melakukan cabaran.
Jadi sekali lagi, ini adalah cabaran-2.html untuk Pelawat berikut bersama-sama di rumah.
Jadi rakan saya, Mark Zuckerberg, datang kepada saya pada hari yang lain.
Dan dia seperti, Neel, saya mempunyai mendapat cukup baik reka bentuk web.
Yang boleh saya lakukan HTML.
Saya telah membuat kecil ini, edit baru ke Facebook.
Saya mempunyai idea baru untuk bagaimana kita perlu mendandan Facebook.
Dan di sini ia adalah.
Di sini.
Berikut adalah beberapa kod contoh.
Jadi ia dipanggil Fancybook.
>> Kami mempunyai beberapa kemas kini status.
Kami mempunyai Nemo, Mike Kosowski, ***-- tiga kemas kini status.
Dan kemudian kita mempunyai senarai rakan-rakan dalam talian di bawahnya.
Jadi dia melakukan kerja rumah beliau.
Dia tahu sedikit tentang Bootstrap, dia membuat paparan senarai,
yang telah dilakukan sedikit HTML.
Jadi dia mempunyai laman web.
Tetapi dia seperti, Neel, saya tidak memahami reka bentuk responsif sama sekali.
Adakah anda mempunyai apa-apa pakar-pakar yang boleh membantu saya dengan itu?
Dan nasib baik, anda kini pakar-pakar dalam reka bentuk responsif.
>> Jadi apa yang dia memberitahu saya bahawa dia mahu Fancybook kelihatan seperti ini.
Pada alat yang sangat kecil, seperti telefon, segala-galanya
perlu disusun, seperti di sini.
Jadi, anda mempunyai garis masa pendahuluan, sehingga atas, dan kemudian
anda harus mempunyai bar chat di bahagian bawah.
Tetapi pada tablet atau medium peranti, ia perlu separuh dan separuh,
seperti dalam garis masa perlu separuh dan senarai kawan chat
hendaklah di atas separuh yang lain.
>> Kemudian pada komputer riba, garis masa perlu mengambil tiga perempat
dan kemudian lindung nilai borak perlu mengambil satu lagi suku yang satu.
Karena itu Ia seperti, Neel, saya mempunyai ini kod di sini, tetapi ia tidak responsif.
Ia perlu berkelakuan seperti ini.
Jadi cabaran saya kepada anda diberikan kod ini sini--
jika anda memuat semula anda CodePens, anda akan melihat ini.
Atau jika anda hanya paste kod di cabaran-2, anda akan melihat ini.
>> Berikut adalah kod contoh ini.
Anda akan melihat beberapa xxxs.
Saya mahu anda untuk menukar xxxs, sehingga garis masa dan senarai rakan-rakan
berikut ciri-ciri komputer ini di sini.
Jangan bimbang tentang apa yang dalam garis masa sekarang.
Kami akan mendapatkan bahawa dalam langkah seterusnya.
Tetapi untuk sekarang, mari kita lihat jika kita dapat perkara-perkara ini untuk berpecah seperti ini.
Begitu juga yang masuk akal?
Jadi, jika anda berada di rumah, hentikan video dan cuba
untuk membuat halaman web anda melihat responsif seperti ini.
Jika anda berada di sini, mengambil seperti dua, tiga minit.
Jangan ragu untuk berbual dengan jiran, dan cuba, dan menetapkan Encik Zuckerberg
masalah reka bentuk responsif.
Jika anda mempunyai sebarang pertanyaan, sila maklumkan kepada saya.
Berasa baik?
Selesai?
Nice.
>> PENONTON: [didengar].
NEEL MEHTA: Apa?
>> PENONTON: Saya baik.
>> NEEL MEHTA: Oh, baik.
Nice.
PENONTON: Perkara mengenai 12, adakah Bootstrap yang
merawat ruang skrin yang diberikan sebagai 12 unit melintangi dan kemudian membahagikan bahawa sehingga?
Bagaimana sebenarnya melakukan proportioning kerja untuk ini?
>> NEEL MEHTA: Ya.
Jadi persoalannya ialah, bagaimana tidak perkadaran yang
bekerja untuk Bootstrap, bukan?
>> PENONTON: Ya.
NEEL MEHTA: Dan setiap kali apabila anda mempunyai div class = "berturut-turut",
tidak kira berapa besar skrin, Bootstrap akan memberikan anda 12 unit
saiz yang sama untuk mengambil bahawa saiz banyak.
Jadi, dalam col 1, ia sentiasa 8.33% saiz skrin,
sama ada itu luas ini atau bahawa ini luas.
Dan sebagainya, sudah tentu, pada yang lebih kecil skrin, setiap lajur adalah lebih kecil.
Anda masih mempunyai 12 tiang lebar, ia adalah lebih kecil.
Supaya ia terpulang kepada anda untuk memastikan barang-barang mengambil ruang yang lebih,
berkadaran, untuk mengimbangi untuk kekurangan ruang.
Adakah ini masuk akal?
>> PENONTON: Ya.
Terima kasih.
NEEL MEHTA: Soalan yang baik.
PENONTON: Pada besar skrin, anda boleh mempunyai
garis masa mengambil masa sehingga tiga perempat?
>> NEEL MEHTA: Ya.
NEEL MEHTA: Bagaimana seorang lelaki rasa?
Baik?
Sejuk.
Jadi mari kita kembali.
Dan mari kita cuba dan menetapkan bahagian ini laman web Encik Zuckerberg.
Oleh itu, garis masa adalah di sini, pada bahagian atas, dan senarai rakan-rakan
adalah di bahagian bawah.
Dan dengan itu kita hanya perlu memperuntukkan tiang, dengan saiz berkadar,
Setiap ini.
Jadi *** pertama ini adalah untuk garis masa.
Apa kelas jualah kami di sini?
Apa yang anda semua dimasukkan ke dalam sini?
Jadi ingat, pada skrin yang besar, ia memerlukan untuk mengambil tiga suku daripada lebar.
Dan jadi apa gaya akan memberi anda itu?
Pada skrin yang besar, tiga suku daripada lebar.
Apa kelas kami menggunakan sana?
PENONTON: Jadi, kita hanya akan menjadi mengedit bahawa contoh pertama kelas.
NEEL MEHTA: Buat masa ini.
Ya.
>> PENONTON: Kami tidak mengedit setiap satu, ciri individu garis masa?
NEEL MEHTA: Bukan sekarang, sekurang-kurangnya.
Jadi semua ini adalah satu blok.
Kami hanya menukar mereka bentuk blok.
Jadi di sini kita col-lg-9 kerana ia adalah sembilan daripada 12 lebar pada skrin besar.
Dan kemudian pada skrin sederhana, berapa banyak ruang yang perlu saya dapat?
PENONTON: Ia sepatutnya menjadi separuh dan separuh.
NEEL MEHTA: Betul.
Jadi berapa banyak itu?
>> PENONTON: Jadi enam.
NEEL MEHTA: Enam.
Dan kemudian tambahan kecil harus adalah- jika ia mengambil lebar keseluruhan baris,
berapa ramai yang sepatutnya?
PENONTON: 12.
NEEL MEHTA: 12.
Ya.
Dan sekarang kita telah mendapat untuk menukar ini orang-orang yang lain,
jadi ia mengambil masa sehingga seluruh ruang.
Jadi col-lg--
PENONTON: Ia akan ambillah seluruh skrin?
NEEL MEHTA: Ia mengambil masa sehingga satu perempat skrin pada peranti yang besar,
seperti yang kita tunjukkan di sini.
>> PENONTON: Tiga.
>> NEEL MEHTA: Tiga.
Dan kemudian col-md-6 untuk mengambil sehingga seluruh ruang.
col-xs-12.
Jadi sekarang kita mempunyai garis masa mengambil tiga suku
halaman dalam skrin besar dan kemudian satu perempat di sebelah.
Dan kemudian jika saiz skrin ke bawah, ia perlu mengubah saiz dengan sewajarnya.
Jadi ia disusun sekarang, pada skrin yang sangat kecil.
Dan jika kita bersaiz sehingga sedikit, mereka harus betul-betul separuh dan separuh.
Oleh itu, kita telah melakukan itu setakat ini.
Sangat hebat.
Sebab itu kita tidak akan melakukan perkara yang bahagian lain cabaran.
Anda boleh melakukannya sendiri.
Tetapi pada dasarnya, anda perlu untuk mencuba dan membuat ini responsif
sebagai well-- membuat garis masa barang-barang, diri mereka sendiri, responsif.
Jadi sekarang kita telah melalui semua yang anda perlu tahu
mengenai sisi responsif Bootstrap.
Sebarang soalan mengenai responsif reka bentuk dengan Bootstrap
dan bagaimana anda boleh pergi tentang melakukan perkara itu?
Ya?
>> PENONTON: Adakah sama jika kita mempunyai video terbenam
dan kami mahu mengawal skala di mana was-- video
saiz video pergi dari laptop ke telefon.
NEEL MEHTA: Ya.
Lebih kurang.
Anda harus memberitahu video untuk mengambil sebagai banyak ruang kerana ia diberikan,
yang kadang-kadang sedikit menjengkelkan.
Tetapi idea teras adalah sama.
A video, seperti apa-apa objek lain di halaman, seperti butang atau apa sahaja,
selagi anda menggunakan lajur dan baris,
anda boleh memberikan jumlah tertentu ruang.
Dan supaya mendapatkan itu untuk memberi penghormatan kepada yang satu soalan yang berbeza kerana seperti YouTube
membenamkan mempunyai tertentu, saiz yang disukai.
Tetapi secara teori di kurangnya, ia akan bekerja.
Cool?
>> PENONTON: Saya rasa itu, untuk imej, adakah anda benar-benar
perlu mempunyai versi imej yang sama dalam pelbagai saiz
untuk komputer riba berbanding iPhone?
Yeah Persoalannya, adakah kita perlu mempunyai imej yang responsif juga.
Dan sesungguhnya, anda boleh berbuat demikian.
Saya fikir ia adalah dalam CSS.
Tetapi Bootstrap membolehkan anda untuk berbuat demikian juga.
Anda boleh mempunyai imej responsif.
Anda boleh mempunyai imej anda mengubah saiz mengikut saiz halaman.
Dan ada satu perkara yang sangat baru HTML5, versi terbaru HTML,
dan CSS3, terbaru versi CSS, yang
akan membiarkan anda meminta gambar yang berbeza berdasarkan saiz skrin anda berada di.
Biasanya, ia cukup baik untuk hanya mempunyai imej anda hanya mengecut atau berkembang
betapa besar ia perlu.
Tetapi anda boleh, jika anda mahu kepada, mempunyai satu 32 sebanyak 32
untuk skrin sangat kecil, dan 64 oleh 64 untuk skrin besar,
dan kemudian melayani mereka secara terpilih.
Awak boleh lakukannya.
Ia dilakukan oleh sesetengah orang.
Ia masih canggih cantik.
Tetapi jawapan pendek, images-- responsif Bootstrap dapat menyelamatkan hari di sana.
Cool?
>> PENONTON: Terima kasih.
>> NEEL MEHTA: Jadi mari kita bercakap sebenar cepat tentang bagaimana
untuk mendapatkan ini di laman web anda sendiri.
Katakan anda mahu membuat anda laman web sendiri menggunakan Bootstrap.
Dan begitu mari kita hanya berjalan melaluinya bersama-sama.
Katakan anda membuat hanya halaman HTML biasa.
Jangan ragu untuk ikut bersama-sama dalam apa sahaja editor kegemaran anda.
Oleh itu, kita hanya mempunyai beberapa halaman HTML.
Yang boleh kita lakukan! DOCTYPE html.
Ini juga html, halaman kami.
Tiada yang baru.
Kami telah melakukan ini sebelum ini.
Jadi di sini kita mempunyai HTML dan kita boleh meletakkan barangan di dalam sini.
Kita boleh mempunyai butang kami.
Dan seperti yang saya katakan sebelum ini, ini tidak semestinya akan bekerja.
Mengapa mungkin ini tidak berfungsi?
Mengapa kita tidak akan mendapatkan kami , butang berwarna-warni baik?
>> PENONTON: Kerana kami tidak menghubungkannya kepada projek Bootstrap atau fail?
NEEL MEHTA: Ya.
Betul.
Kerana Bootstrap-- ia hanya fail CSS mewah.
Ia adalah satu siri gaya yang yang melekat pada unsur-unsur anda.
Di sini kita telah memberitahu bahawa kita mahu menggunakan gaya ini.
Saya akan saiz yang sehingga sedikit.
Kami telah diberitahu ia kita mahu menggunakan gaya ini, tetapi kita tidak pernah
diceritakannya apa gaya yang berada.
Dan itulah apa yang anda soalan sebelum ini adalah.
Itulah jawapan untuk itu.
Kita perlu mencari jalan untuk gaya dan masukkan ia dalam halaman kami entah bagaimana.
Dan kehendak supaya Bootstrap menunjukkan kepada kita bagaimana untuk berbuat demikian.
>> Jadi, jika anda pergi ke bahagian atas sini, Bermula.
Ada cara yang berbeza untuk muat turun.
Ini mungkin tidak masuk akal semestinya.
Bootstrap-- ini akan membolehkan anda turun fail CSS itu sendiri.
Dan anda termasuk dalam halaman anda sendiri.
Kod sumber boleh jika anda mahu untuk menggodam ke atasnya oleh diri sendiri.
Anda tidak perlu ini benar-benar.
Sass adalah bahasa yang yang menghimpunkan ke dalam CSS.
Anggaplah ia sebagai prapemproses a.
Sama seperti PHP adalah prapemproses daripada HTML, Sass adalah prapemproses untuk CSS.
Jadi, jika anda mahu melakukannya cara itu, anda boleh berbuat demikian.
>> Cara yang paling mudah adalah menggunakan CDN, atau kandungan penghantaran rangkaian.
Ia adalah sebuah laman web yang hanya menyajikan salinan Bootstrap
sangat pantas untuk anda termasuk di halaman anda sendiri.
Jadi di sini adalah satu contoh.
Ia akan memberikan elemen pautan ini.
Unsur pautan memberitahu pelayar anda, mengambil apa-apa fail yang disimpan di sini
dan memasukkannya ke dalam laman web kami.
Dan dalam kes ini, ia adalah fail CSS Bootstrap.
Oleh itu, kita hanya akan menyalin URL, atau teks itu, dan kami akan membuang ia di dalam
kepala kita.
>> Dan saya tidak akan bermula halaman untuk ini, tetapi anda boleh percaya bahawa ini berfungsi.
Link akan membawa anda CSS.
Memasukkannya ke dalam anda halaman dan kemudian anda akan menjadi
dapat menggunakan semua Bootstrap kelas yang anda tahu dan cinta.
Jika anda mahu untuk memastikan ia dalam dan memilikinya pada sistem fail anda sendiri
daripada harus pergi ke internet untuk merebut,
seperti jika anda mahu menggunakan luar talian laman web ini,
anda boleh menggunakan pilihan Muat Turun.
Tetapi bagi sebahagian besar, menggunakan CDN agak cepat kerana dengan cara itu,
ia disimpan dikemaskini untuk anda juga.
Anda perlu secara manual sama ada.
Masuk akal?
>> Jadi banyak alat akan mempunyai ini dibina dalam secara lalai. Dalam Pset7 dan Pset8 anda,
Saya percaya Bootstrap adalah dimasukkan secara automatik.
Dan dalam CodePen, untuk Sebagai contoh, ia sudah
dimasukkan kerana saya menambah menambah tetapan itu.
Jadi, jika anda pernah mahu untuk bermain-main dengan itu, anda hanya boleh pergi pada CodePen,
atau pergi ID anda, atau apa sahaja.
Dan anda mungkin boleh akses Bootstrap sana,
tetapi ia tidak sentiasa dibina dalam, secara lalai, ke web.
Masuk akal?
>> Ya.
hanya sebagai recap-- kita ada seperti lima minit.
Tetapi sebagai recap, dalam laman web baru, anda boleh memasukkan Bootstrap seperti ini.
Dan sebaik sahaja anda dimasukkan, anda boleh melakukan semua perkara yang menyeronokkan di sini.
Anda boleh pergi, dan anda hanya boleh membaca dengan teliti CSS, anda boleh menambah beberapa gaya sejuk,
anda boleh mempunyai komponen seperti butang,
dan jadual, dan senarai barang-barang yang kami nyatakan.
Ada beberapa JavaScript plugin sejuk, yang anda mungkin mahu meneroka.
Mereka menambah beberapa sejuk interaktiviti ke laman web.
Seperti ini menjadikan dialog mod.
>> Jadi ada beberapa perkara yang menyeronokkan anda boleh lakukan dengan Bootstrap.
Jadi nasihat saya kepada anda adalah pergi ke hadapan dan menggunakannya dalam projek-projek anda sendiri,
ikut arahan kita hanya melakukan tentang bagaimana untuk mendapatkannya,
dan hanya membaca Bootstrap kerana anda akan belajar lebih lanjut mengenai apa yang perlu dilakukan.
Dan dengan itu kita telah pergi alih, hari ini, bagaimana untuk menggunakan
dokumentasi, apa bangunan blok, dan bagaimana ia adalah dari segi konsep.
Oleh sebab itu cabaran saya kepada anda adalah membuat laman web menggunakan Bootstrap.
Pergi ke dalam dokumen.
Dan menggunakan alat-alat yang kita ada pelajari setakat ini untuk mencuba dan menghuraikan mereka
dan memahami mereka.
Dan menggunakan gaya-gaya dan alat-alat anda lihat di sana dalam laman web anda.
Dan ia hanya besar, proses eksperimen.
>> Cuba gaya tertentu.
Adakah ia berfungsi?
Adakah tidak?
Cuba meletakkan barang-barang bersama-sama.
Lihat apa yang berlaku.
Ia amat banyak diri yang berpandu, proses penemuan.
Tetapi hari ini, kami telah belajar sangat asas-asas apa yang Bootstrap?
Mengapa ia berfungsi?
Bagaimanakah ia berfungsi?
Bagaimana kita mula menggunakan itu, di tempat pertama?
Dan sekarang bahawa anda lebih bonggol itu, anda
akan dapat melakukannya cukup lancar dengan diri anda.
>> Jadi sekali lagi, semua kod yang kami lakukan di sini.
Jadi jika anda mahu untuk mendapatkan berus pada,
seperti, apa yang cheat cepat kunci untuk semua gaya?
Anda boleh pergi ke dalam sampel ini di sini.
Kami mempunyai beberapa gaya contoh di sini.
Jika anda ingin mencuba cabaran sekali lagi dengan diri sendiri,
anda boleh cuba mereka di sini dan menyemak penyelesaian.
Jadi pautan ini akan menjadi termasuk pada slaid, yang
akan dihantar kepada anda sudah tentu.
Tetapi ia juga di sini.
Anda boleh berhenti video, jika anda mahu.
Semua maklumat yang anda perlukan adalah akan menjadi di sini, di laman web ini.
Jadi, jika sesiapa yang mempunyai sebarang pertanyaan, kita boleh membawa mereka untuk beberapa minit.
Jika tidak, terima kasih semua banyak untuk menonton.